Contraste de color

El gris claro #999999 sobre blanco tiene una relación de contraste de 2.85:1, muy por debajo del 4.5:1 que WCAG 2.2 pide para el texto normal.

Por qué importa el contraste

El texto pálido sobre su fondo es difícil de leer para las personas con baja visión, para muchos lectores mayores y para cualquiera que use el celular bajo el sol. WCAG 2.2 no deja "pálido" a gusto de cada quien. Mide la luminancia relativa de los dos colores, un número que va de 0 para el negro a 1 para el blanco, y los compara con la relación de contraste (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro. El resultado va de 1:1, un color sobre sí mismo, a 21:1, negro sobre blanco. El curso de teoría del color desarrolla la fórmula paso a paso; aquí la usamos.

Las cifras que hay que alcanzar

El criterio de conformidad 1.4.3 Contraste (mínimo), de nivel AA, pide al menos 4.5:1 para el texto normal y 3:1 para el texto grande, que WCAG define como al menos 18 puntos, o 14 puntos en negrita. El criterio 1.4.6, de nivel AAA, sube estas cifras a 7:1 y 4.5:1. El criterio 1.4.11 Contraste no textual pide 3:1 para las partes de los controles y gráficos que la gente necesita ver, como el borde de un campo de texto o las líneas de un gráfico. Quedan exentos los logotipos y el texto puramente decorativo o que forma parte de un control inactivo.

Vale la pena recordar algunos valores. El gris #767676 da 4.54:1 sobre blanco y suele citarse como el gris liso más claro que pasa AA; #777777 da 4.48:1 y no pasa. El más oscuro #595959 llega a 7.00:1 y pasa AAA. Los colores saturados pueden engañar: el rojo puro #ff0000 sobre blanco da solo 4.00:1, mientras que el rojo más profundo #c01c28 llega a 6.11:1. El texto de ejemplo dentro de los campos de formulario es un fallo frecuente, porque los diseñadores a menudo lo hacen muy claro a propósito.

Cómo revisar los colores en la práctica

Rara vez hace falta hacer la cuenta a mano. Cuando inspeccionas un elemento de texto, el selector de color de las herramientas para desarrolladores de los navegadores principales muestra su relación de contraste con el fondo, a menudo con una línea que marca los umbrales AA y AAA. Hay dos casos que requieren más cuidado. El texto sobre una foto o un degradado no tiene un único fondo, así que revísalo contra la parte más clara que tenga detrás, o pon un panel sólido debajo. Y un sitio con tema oscuro hay que revisarlo dos veces, porque un color que pasa sobre blanco puede fallar sobre un casi negro: el azul #1a5fb4 da 6.29:1 sobre blanco, pero solo 3.34:1 sobre negro puro.

Nunca solo el color

El contraste entre el texto y el fondo es la mitad de la historia. El criterio 1.4.1 Uso del color, de nivel A, dice que el color no debe ser la única forma de mostrar una información. El rojo #c01c28 y el azul #1a5fb4 se leen bien sobre blanco, pero entre sí su relación es de solo 1.03:1. En escala de grises, o para alguien que no distingue el rojo del azul, se vuelven el mismo gris. Por eso un campo obligatorio marcado solo con una etiqueta roja, o un enlace que se distingue del texto que lo rodea solo por el color, necesita una segunda señal: una palabra, un ícono, un subrayado.