El texto de bajo contraste es uno de los fallos de accesibilidad más comunes de la web y uno de los más fáciles de corregir. El texto gris claro sobre fondo blanco puede verse elegante en el monitor calibrado de un diseñador, pero es difícil o imposible de leer para personas con baja visión, para lectores mayores y para cualquiera que use el celular al aire libre. Las Pautas de Accesibilidad para el Contenido Web, conocidas como WCAG, ofrecen un estándar preciso y comprobable para que esto no sea cuestión de opinión.
Qué es la relación de contraste
La relación de contraste compara la luminancia relativa, una medida del brillo percibido, de dos colores. Va de 1:1, donde ambos colores son idénticos, a 21:1, que es negro sobre blanco. La fórmula es:
relación = (L1 + 0.05) / (L2 + 0.05)
Aquí L1 es la luminancia del color más claro y L2 la del más oscuro. El término 0.05 tiene en cuenta la luz ambiental y mantiene finita la relación para el negro puro.
La luminancia relativa se calcula a partir de los valores de rojo, verde y azul del color tras convertirlos a una escala lineal, ponderados según la sensibilidad del ojo humano a cada canal: el verde aporta más, el rojo algo y el azul lo menos.
L = 0.2126 R + 0.7152 G + 0.0722 B
Por eso dos colores que parecen igual de "brillantes" por su tono pueden tener relaciones muy distintas, y por eso el amarillo sobre blanco falla de forma drástica mientras que el azul oscuro sobre blanco pasa con facilidad.
Los umbrales
WCAG 2.1 define dos niveles de conformidad para el contraste del texto:
| Contenido | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande | 3:1 | 4.5:1 |
| Componentes de interfaz y gráficos | 3:1 | no definido |
Texto grande significa al menos 18 puntos (unos 24 píxeles) en peso normal, o al menos 14 puntos (unos 18.7 píxeles) en negrita. Cualquier cosa más pequeña cuenta como texto normal.
El nivel AA es el objetivo estándar y el que mencionan la mayoría de las leyes de accesibilidad y las políticas de compras públicas. El nivel AAA es más estricto y no siempre es alcanzable en todos los diseños, pero es una buena meta para el texto de cuerpo que la gente lee durante mucho tiempo.
A qué se aplican las reglas
- El texto y las imágenes de texto frente a su fondo.
- Los componentes de la interfaz, como el borde de un campo de entrada, el contorno de un botón o el icono que identifica un control, frente a los colores adyacentes, a 3:1.
- Los objetos gráficos necesarios para entender el contenido, como las líneas y barras de un gráfico, también a 3:1.
- Los indicadores de foco, que deben verse con claridad tanto contra el elemento como contra su entorno.
Qué está exento
La decoración pura, los controles inactivos o deshabilitados, los logotipos y nombres de marca, y el texto incidental, como el que aparece dentro de una fotografía, no están obligados a cumplir las relaciones. Aun así, no uses esto como excusa para marcadores de posición o textos de ayuda ilegibles: si la gente necesita leerlo, debería cumplir.
Ejemplos conocidos
- Negro sobre blanco es 21:1, el máximo.
- El gris
#767676sobre blanco es de unos 4.54:1, el gris más claro que cumple AA para texto normal. - El ligeramente más claro
#777777sobre blanco es de unos 4.48:1 y por tanto no cumple por poco. Un cambio mínimo marca la diferencia. - Blanco sobre un naranja medio como
#f97316es de solo unos 2.8:1 y no cumple para texto normal, aunque a muchas personas les parezca vivo y legible.
El contraste no está solo
La relación es solo una pieza del uso accesible del color. No dependas únicamente del color para transmitir significado: un mensaje de error en rojo también debería tener un icono o texto, y un gráfico debería usar etiquetas o patrones además de tonos. Alrededor de uno de cada doce hombres y una de cada doscientas mujeres tienen alguna forma de deficiencia en la visión del color, así que las señales solo de color dejan atrás a mucha gente.
El tamaño del texto, el grosor de la fuente, el espaciado y la longitud de línea también afectan la legibilidad, y los pesos finos necesitan contraste extra para seguir siendo legibles.
Mide, no adivines
El contraste percibido no es fiable porque las pantallas, la iluminación y los ojos varían. Mídelo. Pega los valores hexadecimales de tu texto y fondo en el verificador de contraste de color para ver la relación y si cumple AA y AAA para texto normal, texto grande y componentes de interfaz, y luego ajusta los colores hasta que el resultado esté en verde.
Cumplir estos umbrales casi no cuesta nada durante el diseño y elimina una barrera real para muchos usuarios. Hazte el hábito de comprobar cada par de texto y fondo antes de publicar.