Se explica el contraste de color de WCAG: Ratios, umbrales y un ejemplo de trabajo

Por qué el contraste importa

Texto que se ve perfectamente legible en el monitor calibrado de un diseñador puede llegar a ser difícil de leer para muchas personas en condiciones normales. La baja visión, los cambios relacionados con la edad en el ojo, las deficiencias de la visión del color, las pantallas baratas o oscuras y la luz solar brillante en un teléfono reducen la diferencia que un lector percibe entre el texto y su fondo. Copia de cuerpo gris claro en una página blanca es un ejemplo clásico: se ve refinado en un modelo y se convierte en una variedad para una gran parte de los visitantes reales.

El WCAG aborda esta cuestión con criterios de éxito mensurables en lugar de asesoramiento vago. Debido a que el requisito es un número, un equipo puede probarlo, grabarlo y acordarlo. Los requisitos de contraste también aparecen en las leyes de accesibilidad y las normas de contratación pública de muchos países, que suelen hacer referencia a WCAG 2.1 o 2.2 a nivel AA, por lo que el contraste correcto es tanto una mejora de la usabilidad como un requisito común de cumplimiento.

Luminancia relativa: el bloque de construcción

La relación de contraste se basa en la luminancia relativa, que es una medida de lo brillante que un color aparece al ojo humano, escalado de 0 para el negro a 1 para el blanco. No es lo mismo que el valor de ligereza en HSL. Un amarillo puro y un azul puro pueden compartir la misma ligereza HSL, sin embargo el amarillo se ve mucho más brillante, y la luz relativa captura esa diferencia.

Calcularlo toma tres pasos. Primero, tome cada uno de los valores de los canales rojo, verde y azul, que van de 0 a 255 en un color hexadecimal, y divide por 255 para obtener un número entre 0 y 1. En segundo lugar, convertir cada uno de esos valores sRGB codificados gamma a luz lineal. Si el valor es 0.04045 o menos, dividirlo por 12.92. De lo contrario, añadir 0,055, dividir por 1.055, y elevar el resultado a la potencia de 2.4. Algunas versiones del texto de la WCAG, y muchas herramientas, utilizan 0.03928 como el corte en su lugar, una figura heredada de un sRGB draft más antiguo; la diferencia nunca cambia un resultado real para los colores de 8 bits.

En tercer lugar, combina los tres valores lineales con pesos que reflejan la sensibilidad del ojo a cada primario: la luminancia es igual a 0,2126 veces el rojo más 0,7152 veces el verde más 0,0722 veces el azul. El verde domina porque nuestros ojos son más sensibles a él, mientras que el azul contribuye muy poco, por lo que el texto azul oscuro puede pasar fácilmente mientras que los enlaces azules brillantes a veces fallan.

Fórmula de la relación de contraste

Una vez que tienes la luminancia relativa de ambos colores, la relación de contraste se calcula como la luminancia más ligera más 0,05, dividida por la luminancia más oscura más 0,05. El 0.05 añadido a cada lado representa la luz ambiente que refleja una pantalla, y también evita que la fórmula se divida por cero cuando un color es negro puro.

El orden de los colores no importa, porque la fórmula siempre pone el más ligero en la parte superior. El texto blanco en la marina da exactamente la misma proporción que el texto marino en blanco. Lo que importa es el par. El resultado se escribe como una relación como 4.5:1, y se compara con los umbrales en la siguiente sección sin redondear. Un par que calcula a 4.47:1 no pasa un requisito de 4.5:1, aunque podría mostrarse como 4.5 en una herramienta que ronda a un decimal.

Umbrales AA y AAA y definición de texto amplio

WCAG establece dos niveles para el contraste de texto. El criterio de éxito 1.4.3, Contraste (mínimo), es el nivel AA y requiere al menos 4.5:1 para texto normal y al menos 3:1 para texto grande. El criterio de éxito 1.4.6, Contraste (Mejorado), es el nivel AAA y eleva esas cifras a 7:1 para el texto normal y 4.5:1 para el texto grande. La mayoría de las organizaciones se dirigen a AA en general y utilizan AAA para el contenido de lectura de forma larga donde pueden.

El texto grande tiene una definición precisa: al menos 18 puntos, o al menos 14 puntos si el texto es en negrita. Debido a que un punto CSS es igual a 1.333 píxeles CSS, que funciona a aproximadamente 24 píxeles para el peso regular y alrededor de 18.66 píxeles para negrita. Un título de 20 píxeles en un peso normal por lo tanto no es texto grande y debe cumplir 4.5:1, un detalle que viaja por muchos sistemas de diseño.

Hay algunas excepciones. Texto que es puramente decorativo, texto que forma parte de un componente de interfaz de usuario inactivo, como un botón desactivado, texto dentro de una fotografía que es incidental, y texto en logotipos o nombres de marca no tienen ningún requisito de contraste. El texto del marcador de posición, los mensajes de error y el texto de enlace no están exentos y deben cumplir los mismos umbrales que la copia corporal.

Contraste no textual

WCAG 2.1 añadió el criterio de éxito 1.4.11, Contraste no textual, a nivel AA. Requiere una relación de contraste de al menos 3:1 contra los colores adyacentes para la información visual necesaria para identificar los componentes de la interfaz de usuario y sus estados, y para las partes de gráficos necesarias para entender el contenido.

En la práctica, esto cubre el borde de una entrada de texto cuando el borde es lo único que muestra dónde está el campo, el contorno de una casilla de verificación o botón de radio, el indicador de enfoque del teclado, iconos que actúan como botones sin una etiqueta de texto, y las líneas o segmentos en un gráfico que llevan significado. Un borde de entrada gris pálido sobre el blanco es uno de los fracasos más frecuentes. Si un gráfico utiliza color para separar series de datos, cada serie debe llegar a 3:1 contra sus vecinos o debe distinguirse de otra manera, como con etiquetas o patrones. Por otra parte, WCAG dice que el color nunca debe ser la única manera de transmitir la información, por lo que un campo requerido no debe ser marcado por texto rojo solo.

Ejemplo trabajado: texto azul sobre fondo blanco

Supongamos que desea utilizar el azul #2563EB para texto de enlace en una página blanca. Dividir el código hexadecimal en canales: 25 es 37, 63 es 99, y EB es 235. La división por 255 da 0,1451 para rojo, 0,3882 para verde y 0,9216 para azul.

Los tres están por encima de 0.04045, por lo que cada uno utiliza la fórmula de potencia. Rojo se convierte ((0.1451 + 0.055) dividido por 1.055) a la potencia de 2.4, que es de aproximadamente 0.0185. El verde se convierte en alrededor de 0,1248, y el azul se convierte en alrededor de 0,8308. Aplicando los pesos, la luminancia es igual a 0,2126 veces 0,0185, más 0,7152 veces 0,1248, más 0,0722 veces 0,8308. Es decir, 0,0039 más 0,0892 más 0,0600, o aproximadamente 0,1532. Blanco tiene una luminancia de exactamente 1.

La relación de contraste es (1 + 0,05) dividido por (0.1532 + 0,05), que es 1,05 dividido por 0,2032, o aproximadamente 5,17:1. Que pasa AA para texto normal y AAA para texto grande, pero no llega al 7:1 necesario para el texto corporal de AAA. Para comparar, el azul más oscuro #1D4ED8 alcanza alrededor de 6.70:1 en blanco, el gris medio #767676 alcanza alrededor de 4.54:1, que es sobre el gris más claro que todavía pasa AA en blanco, y el gris más claro #949494 maneja sólo alrededor de 3.03:1, suficiente para texto grande pero no para copia corporal.

Control y contraste de fijación con herramientas ToolWorld

El Comprobador de Contraste de Color ToolWorld realiza exactamente el cálculo descrito anteriormente. Usted elige un primer plano y un color de fondo con un selector de color o escribiendo códigos hexadecimal, y muestra la relación de contraste a dos decimales junto con una vista previa en vivo de texto muestral grande y pequeño en el fondo elegido. Informa si el texto normal pasa AA y AAA y si el texto grande pasa AA, así que puede probar un par en segundos en lugar de trabajar a través de la aritmética. Comproba pares de texto; para elementos no textuales, compara la proporción que muestra con el objetivo 3:1 tú mismo.

Cuando un par falla, la solución habitual es mantener el tono y cambiar la ligereza: oscurecer el texto o aclarar el fondo hasta que la relación aclare el umbral. El generador de paletas de color ToolWorld puede ayudar aquí, porque su esquema monocromo produce variaciones más claras y oscuras de un solo color base, mientras que sus esquemas análogos, complementarios, triádicos y tetradicos sugieren tonos relacionados. Copia un candidato en el comparador de contraste, pruébelo sobre su fondo, y mantén los tonos que pasan. Construir una paleta de esta manera, con pares de texto y fondo comprobados observados desde el principio, ahorra mucho más tiempo que auditar páginas terminadas.

Un consejo final: probar combinaciones reales, no sólo su color de marca principal contra el blanco. Los estados Hover, el texto en banners de colores, los enlaces dentro de las cajas de llamada y las variantes de modo oscuro crean un nuevo par que necesita tu propia comprobación.