Por qué importa el contraste entre texto y fondo
El contraste es la diferencia de luminancia entre dos colores. Cuando es pequeña, el texto se funde con el fondo y leer cuesta esfuerzo, o directamente no es posible. Esto afecta a mucha más gente de lo que parece:
- Personas con baja visión, que dependen de una diferencia clara entre claro y oscuro para distinguir las letras.
- El envejecimiento natural del ojo: con la edad, el cristalino pierde transparencia y la sensibilidad al contraste disminuye. Un gris que parece elegante a los 25 años puede ser ilegible a los 65.
- Malas condiciones de uso: el móvil a pleno sol, el brillo de la pantalla bajado para ahorrar batería, proyectores débiles y monitores mal calibrados.
- Personas con daltonismo, que pueden percibir como parecidos colores de tonos distintos. El contraste de luminancia sigue funcionando aunque se pierda la diferencia de tono.
Por eso las pautas de accesibilidad miden la luminancia y no el tono: es el indicador que mejor predice si un texto será legible para el mayor número de personas.
Los criterios de contraste de WCAG 2.2
Las WCAG (Pautas de Accesibilidad para el Contenido Web), publicadas por el W3C, incluyen tres criterios de conformidad relacionados con el contraste de color. La versión 2.2 mantiene los mismos umbrales que la 2.0 y la 2.1:
- 1.4.3 Contraste (mínimo), nivel AA: el texto y las imágenes de texto necesitan al menos 4,5:1, o 3:1 si el texto es grande.
- 1.4.6 Contraste (mejorado), nivel AAA: sube a 7:1 para texto normal y a 4,5:1 para texto grande.
- 1.4.11 Contraste no textual, nivel AA: los componentes de interfaz (bordes de campos, botones solo con icono, iconos que transmiten información) y las partes de gráficos necesarias para entender el contenido necesitan 3:1 respecto a los colores adyacentes.
| Distintivo en la herramienta | Criterio | Relación mínima |
|---|---|---|
| AA texto normal | 1.4.3 | 4,5:1 |
| AA texto grande | 1.4.3 | 3:1 |
| AAA texto normal | 1.4.6 | 7:1 |
| AAA texto grande | 1.4.6 | 4,5:1 |
| Componentes de interfaz | 1.4.11 | 3:1 |
Los umbrales no se redondean: una combinación de 4,49:1 no cumple AA para texto normal. La norma prevé excepciones, como los logotipos, el texto puramente decorativo y los componentes desactivados. El texto completo está en la documentación oficial del W3C.
Qué se considera texto grande
Para WCAG, el texto grande es el que mide al menos 18 puntos (unos 24 px) en peso normal, o 14 puntos (unos 18,66 px) en negrita. Las letras más grandes y gruesas tienen trazos más anchos, así que siguen siendo legibles con menos contraste.
En la práctica, los títulos suelen contar como texto grande; el texto de párrafo, los pies de foto, las etiquetas de formulario y los enlaces dentro del texto, no. Las tipografías muy finas o de diseño poco habitual pueden necesitar más contraste que el mínimo, incluso en tamaño grande.
Cómo se calcula la relación de contraste
El cálculo tiene dos pasos. Primero, cada color se convierte en luminancia relativa, un valor de 0 (negro) a 1 (blanco). Para ello, cada canal RGB se divide entre 255 y se linealiza, deshaciendo la curva gamma de sRGB:
c = valor / 255
si c ≤ 0,04045: c = c / 12,92
si no: c = ((c + 0,055) / 1,055) ^ 2,4
L = 0,2126 × R + 0,7152 × G + 0,0722 × BLos pesos reflejan cómo funciona el ojo: percibimos el verde mucho más claro que el azul. Después, la relación es (L1 + 0,05) / (L2 + 0,05), donde L1 es el color más claro.
Ejemplo con #FF5733: los canales linealizados son R = 1, G ≈ 0,0953 y B ≈ 0,0331, lo que da L ≈ 0,283. Sobre blanco (L = 1), la relación es 1,05 / 0,333 ≈ 3,15:1: cumple para texto grande y componentes, pero no para texto normal. Sobre negro (L = 0), la relación es 0,333 / 0,05 ≈ 6,66:1, suficiente para AA en cualquier tamaño.
Errores comunes de contraste
Gris claro sobre blanco
Es el error más habitual en los sitios «minimalistas». #999999 sobre blanco solo tiene 2,85:1. El gris más claro que todavía cumple AA para texto normal sobre blanco es #767676 (4,54:1); #777777 se queda en 4,48:1 y no cumple. Para AAA hay que bajar hasta #595959 (7:1).
Texto sobre imágenes
Una foto tiene zonas claras y oscuras, y el contraste debe funcionar en la peor de ellas. Usa el selector de color de imagen para capturar el píxel más claro que hay detrás de un texto blanco y compruébalo aquí. Si no cumple, añade una capa oscura semitransparente sobre la imagen o coloca el texto sobre un fondo sólido.
Placeholder y texto de ayuda
El texto de ejemplo dentro de los campos suele ser un gris muy claro. Si transmite información, como el formato esperado de una fecha, se le aplica el mismo 4,5:1. Mejor aún: no uses el placeholder como única etiqueta del campo.
Estados de foco, hover y bordes
El contorno de foco y los bordes de los campos son componentes visuales y necesitan 3:1 respecto a los colores adyacentes según el criterio 1.4.11. WCAG 2.2 añadió además el criterio 2.4.13 (Apariencia del foco, AAA), que trata del tamaño y el contraste del indicador de foco. Un hover que solo cambia ligeramente el tono también pasa desapercibido para mucha gente.
Cómo corregir una combinación que no cumple
En la mayoría de los casos, la solución es cambiar la luminosidad y mantener el tono: oscurece el texto sobre fondos claros o acláralo sobre fondos oscuros. Así el color sigue siendo reconocible como parte de la identidad visual. Eso es justo lo que hace la sugerencia de esta herramienta: busca el color de texto más cercano al original, con el mismo tono, que alcanza el nivel AA o AAA, y un botón aplica el ajuste al instante.
- Introduce el color del texto y el del fondo (el botón de invertir te ayuda a probar la combinación al revés, como en modo oscuro).
- Revisa los distintivos y la vista previa en vivo.
- Si algún nivel no cumple, aplica la sugerencia y comprueba que el resultado siga encajando con el resto de la paleta.
- Copia el enlace de la página: guarda los dos colores y puedes enviarlo a tu equipo para que lo revise.
Un contraste suficiente no lo resuelve todo. Evita transmitir información solo con el color, como errores en rojo y aciertos en verde sin icono ni texto. El simulador de daltonismo muestra cómo ven tu paleta otras personas, y las guías de contraste y accesibilidad y de diseño para daltonismo incluyen ejemplos prácticos.