Comprobador de contraste de color
Mida la relación de contraste WCAG de cualquier pareja de texto y fondo, y encuentre un tono que apruebe cuando no llegue al mínimo.
Comprobar el contraste de color según WCAG
El texto con poco contraste es uno de los fallos de accesibilidad más comunes en la web. Afecta a las personas con baja visión y con diferencias en la percepción del color, pero también a cualquiera que lea el teléfono a pleno sol. Las Pautas de Accesibilidad para el Contenido Web (WCAG) convierten «suficientemente legible» en un número: la relación de contraste.
Esta página abre el conversor de colores en su pestaña Contraste.
Los umbrales WCAG de un vistazo
| Qué está comprobando | AA | AAA |
|---|---|---|
| Texto de cuerpo y etiquetas | 4,5:1 | 7:1 |
| Texto grande (24px, o 18,7px en negrita) | 3:1 | 4,5:1 |
| Iconos, bordes de campos, anillos de foco y elementos de gráficos | 3:1 | — |
AA es el nivel al que remiten la mayoría de las leyes y normas de contratación pública. AAA es más estricto y merece la pena como objetivo en textos de lectura larga, pero no se espera en cada elemento de un sitio.
Corregir un color que no aprueba
Cuando una pareja no llega, el comprobador propone el tono más cercano del mismo matiz que alcanza 4,5:1 sobre su fondo, de modo que puede mantener reconocible el color de marca y a la vez hacer legible el texto. Las correcciones típicas son oscurecer el color del texto entre 10 y 20 puntos de luminosidad, o reservar el color de marca para titulares grandes y botones y usar una variante más oscura para el texto pequeño.
Errores habituales
- Texto de marcador de posición en gris que parece elegante pero queda muy por debajo de 4,5:1.
- Texto blanco sobre colores de marca vivos, como naranja, amarillo o verde claro.
- Comprobar solo el tema claro: el modo oscuro necesita su propia comprobación.
- Texto sobre imágenes: mida contra la zona más clara sobre la que pueda quedar el texto, o añada un velo semitransparente detrás.
La fórmula detrás de la relación
Cada canal sRGB se escala a 0–1 y se linealiza, y luego se combinan como 0,2126 R + 0,7152 G + 0,0722 B para obtener la luminancia relativa. La relación es (L1 + 0,05) / (L2 + 0,05), siendo L1 el color más claro. El verde domina porque el ojo es más sensible a él, y por eso el amarillo sobre blanco suspende de forma tan clara. Para preparar colores antes de probarlos, conviértalos con HEX a RGB o ajuste la luminosidad con HEX a HSL.