Los colores de estado de Bootstrap y Tailwind fallan para personas con daltonismo

La mayoría de los sistemas de diseño traen un rojo para los errores y un verde para el éxito. Es una convención tan arraigada que nadie la audita. Medimos qué les pasa a esos valores por defecto con deficiencias de la visión del color simuladas, y los números son peores de lo que la convención da a entender.

Qué medimos

Tomamos los colores de estado por defecto de dos sistemas muy usados y calculamos la distancia perceptual CIEDE2000 entre cada par de rojo y verde: primero para la visión típica y luego para cada deficiencia simulada con el modelo de Machado et al. (2009).

A grandes rasgos, una distancia menor de 10 significa que dos colores son difíciles de distinguir uno junto al otro. Por debajo de 5 se perciben como el mismo color.

Par	Visión típica	Deuteranopía	Protanopía	Acromatopsia
Bootstrap danger / success	74.1	4.0	25.4	10.0
Tailwind red-500 / green-500	76.1	7.8	25.9	12.9
Rojo / verde genérico	70.6	6.0	23.0	10.1
Azul / naranja	62.4	74.2	66.1	28.7

La columna que más importa es la de deuteranopía, porque la deuteranomalía, su forma más leve, afecta a cerca del 5% de los hombres. Para esas personas, los estados de error y de éxito de Bootstrap están separados por una distancia perceptual de cuatro. No es una degradación sutil. Es el mismo color.

La última fila es el control. El azul frente al naranja no solo resiste: con deuteranopía se separa todavía más que con visión típica.

Por qué ninguna auditoría de contraste lo detecta

Esta es la parte que vale la pena interiorizar, porque explica cómo sobrevive el problema en sistemas que, por lo demás, están construidos con cuidado.

Un verificador de contraste hace una sola pregunta: ¿este primer plano se distingue de este fondo? El #dc3545 de Bootstrap sobre blanco da 4.53:1. Su #28a745 sobre blanco da 3.01:1. Ambos están en el rango de lo aceptable y ambos se aprueban.

Pero el verificador nunca compara el rojo con el verde, porque nunca están uno encima del otro. Aparecen en lugares distintos, uno en el aviso de error y otro en el aviso de éxito, y la herramienta no tiene ningún concepto de relación entre ellos.

Las fallas por daltonismo viven justo en ese punto ciego. Son fallas entre pares de colores de primer plano, y las herramientas habituales solo prueban primer plano contra fondo.

La protanopía es distinta, y eso importa

Fíjate en que la protanopía sale mucho mejor en la tabla: alrededor de 25 en lugar de 4. No es porque a las personas con protanopía estos colores les resulten fáciles.

La protanopía implica una menor sensibilidad a la luz roja en general, así que los rojos se ven más oscuros además de con el tono desplazado. Esa diferencia de luminosidad es lo que vuelve a subir la distancia: los dos colores se pueden distinguir, pero por el brillo y no por el tono.

Y eso da una pista útil sobre la solución.

Lo que de verdad funciona

Separa por luminosidad. La percepción de la luminosidad no se ve afectada por ninguna deficiencia rojo-verde. Si tus colores de error y de éxito se diferencian por un salto claro de luminosidad además de por el tono, siguen siendo distinguibles hagan lo que hagan los conos. Este único cambio arregla la mayoría de las paletas.

Usa el eje azul-naranja para codificar dos valores. Gráficas, interruptores, comparaciones de antes y después. El azul frente al naranja es la combinación de dos colores más robusta que existe, y la medición de arriba muestra por qué.

Deja de cargar todo el significado en el color. Esta es la que de verdad cumple con WCAG, y es la solución que no depende de acertar con las matemáticas. El criterio de conformidad 1.4.1 exige que el color nunca sea el único medio para transmitir información. En la práctica:

• Un ícono en la alerta, no solo un borde de color
• Etiquetas directas en las series de una gráfica, no solo una leyenda de colores
• Líneas continuas frente a líneas punteadas
• La palabra “Error” en el mensaje de error

En cuanto hay una segunda señal, la paleta deja de cargar sola con el significado, y una confusión de colores se vuelve un problema estético y no funcional.

Una nota sobre los valores por defecto de los frameworks

Nada de esto significa que Bootstrap o Tailwind estén mal hechos. Ambos te dan las herramientas para sobrescribir estos valores, y ambos documentan el requisito de accesibilidad.

Pero lo que se publica son los valores por defecto. Un valor por defecto que resulta invisible para el 5% de los hombres merece que lo cambies en tu propia capa de tema en lugar de heredarlo. Cuesta una línea en un archivo de configuración, y la alternativa es un tipo de error que ninguna auditoría automática de tu pipeline va a sacar a la luz.

Revisa tu propia paleta

Las mediciones de este artículo salieron de nuestro simulador de daltonismo, que pasa cada par de una paleta por ocho tipos de visión simulados e informa cuáles se confunden. Funciona por completo en tu navegador: pega tus colores de marca y ve qué pares ha estado aprobando en silencio tu auditoría de contraste.