Bhinish Dhiman
Cómo crear una paleta de colores apta para daltónicos
Traducido del original en inglés. Leer el original
Separa los colores por luminosidad además de por tono, porque la percepción de la luminosidad no se ve afectada por ninguna deficiencia rojo-verde. Usa el eje azul-naranja para codificar dos valores. A partir de cuatro categorías, el color por sí solo deja de ser fiable y necesitas una segunda señal.
Alrededor de 1 de cada 12 hombres tiene algún tipo de deficiencia en la visión del color. Las recomendaciones de diseño suelen quedarse en “no uses rojo y verde juntos”, algo demasiado vago para aplicarlo y que, además, no es exactamente la regla real.
La regla real
No es que el rojo y el verde se vuelvan idénticos. Una persona con deuteranopía normalmente sigue distinguiendo un rojo de un verde, porque los dos suelen diferenciarse en luminosidad además de en tono.
Lo que se confunde es un par que se diferencia solo en el eje rojo-verde y con una luminosidad parecida. Esa es la falla concreta, y por eso el consejo vago pasa por alto tantos casos reales, incluidos pares que no tienen nada de rojo ni de verde.
El azul y el morado son el ejemplo más claro. Para la visión típica se ven claramente distintos, con una distancia perceptual de unos 15. Con deuteranopía esa distancia cae por debajo de 1. Se convierten en el mismo color, y nadie te advierte sobre el azul y el morado.
Las dos propiedades que resisten
La luminosidad. No se ve afectada por ninguna deficiencia rojo-verde. Dos colores separados por un salto claro de luminosidad siguen siendo distinguibles hagan lo que hagan los conos. Es la herramienta más fiable que tienes.
El eje azul-amarillo. Se mantiene casi intacto en la protanopía y la deuteranopía, que juntas suman la inmensa mayoría de los casos. El azul frente al naranja es la combinación de dos colores más robusta que existe: en las mediciones, a menudo se separa todavía más con deuteranopía que con visión típica.
Las deficiencias tritán sí afectan el eje azul-amarillo, pero son tan poco frecuentes, alrededor del 0.01%, que el azul-naranja sigue siendo la opción correcta por defecto.
Cómo construir una paleta categórica
Dos categorías. Azul y naranja. Es prácticamente un problema resuelto; úsalo y sigue adelante.
Tres. Azul, naranja y un tercero que se diferencie sobre todo por luminosidad: un neutro muy oscuro o muy claro. No recurras al verde como tercer color.
Cuatro. Azul, naranja, más un neutro claro y uno oscuro. Estás cerca del límite práctico de lo que el color puede transmitir por sí solo.
Cinco o más. El color dejó de ser una codificación fiable. Necesitas un segundo canal: forma, patrón, etiquetas directas, posición. No es una concesión; las etiquetas directas superan a una leyenda de colores para cualquier lector, no solo para las personas con daltonismo.
Si quieres un conjunto ya hecho, la paleta Okabe-Ito tiene ocho colores diseñados justo para esto y se usa mucho en publicaciones científicas. Los esquemas cualitativos de Paul Tol son otra opción bien probada.
Los colores de estado merecen atención especial
El rojo para error y el verde para éxito son la falla por daltonismo más común en el software, porque son una convención que nadie audita.
Medidos, el danger y el success por defecto de Bootstrap están a una distancia perceptual de unos 74 para la visión típica y de 4 con deuteranopía. En Tailwind, red-500 y green-500 pasan de 76 a cerca de 8. Ambos pares aprueban el contraste por separado sobre blanco, así que ninguna auditoría de contraste los marca.
Tres soluciones, de menos a más duradera:
- Sepáralos en luminosidad. Un rojo oscuro y un verde claro siguen siendo distinguibles. Es el cambio más barato.
- Sal del eje rojo-verde. Usar azul para el éxito es poco habitual, pero se entiende perfectamente.
- Agrega un ícono. Una cruz y una marca de verificación, o un triángulo de advertencia. Esta es la que de verdad cumple con WCAG 1.4.1 y la que sigue funcionando cuando alguien rediseña la paleta.
Lo que exige WCAG
El criterio de conformidad 1.4.1, Uso del color, es de nivel A, el nivel básico. Exige que el color nunca sea el único medio visual para transmitir información, indicar una acción, pedir una respuesta o distinguir un elemento.
Fíjate en lo que no dice. No prohíbe las combinaciones de rojo y verde, y no exige ninguna paleta en particular. Exige redundancia: alguna otra señal que transmita la misma información.
Ese planteamiento es útil, porque apunta a la solución duradera. Una paleta segura es una buena práctica. Una segunda señal es el requisito, y resiste aunque otra persona rediseñe tus colores más adelante.
Cómo revisar tu propio trabajo
La simulación te dice qué es probable que se pierda, no lo que ve una persona concreta, y los modelos son aproximaciones. Úsala para encontrar problemas, no para certificar que no los hay.
La pregunta que vale la pena hacer es por pares, no por color: ¿qué dos colores de esta paleta dejan de distinguirse? Nuestro simulador de daltonismo pasa cada par por ocho tipos de visión e informa cuáles se confunden, que es la comprobación que una herramienta de contraste, por su propia estructura, no puede hacer.