Cómo diseñar paletas accesibles para el daltonismo

La primera vez que entendí de verdad el daltonismo no fue por una especificación, sino por una revisión de código. Había construido un panel de estado donde los puntos verdes significaban «saludable» y los rojos «caído», y un ingeniero de backend del equipo mencionó, casi disculpándose, que no era capaz de distinguir qué servidores estaban en llamas. Es uno del aproximadamente uno de cada doce hombres con deficiencia rojo-verde de la visión cromática. Mi precioso sistema de semáforo era, para él, una cuadrícula de círculos pardo-grisáceos idénticos. No había nada roto en el código. Todo estaba roto en el diseño.

Eso es lo que pasa al diseñar una paleta accesible para el daltonismo: los fallos son invisibles para quien los publicó. No puedes sentir el bug. Así que tienes que construir el hábito de diseñar como si el color fuera información que podrías perder en cualquier momento, porque para una parte significativa de tus usuarios ya lo es.

Qué tan común es, y qué falla en realidad

La deficiencia de visión cromática (DVC) afecta a alrededor del 8 % de los hombres y al 0,5 % de las mujeres de ascendencia noreuropea: en torno a 1 de cada 12 hombres y 1 de cada 200 mujeres. En un producto con cualquier audiencia real, eso no es un caso extremo. Eso es una columna en tus analíticas.

La deficiencia no es «ver en blanco y negro»: la monocromacia verdadera es rarísima. Lo que ocurre es que un tipo de cono del ojo está desplazado o ausente, lo que colapsa ciertos colores entre sí. Los tipos principales, según su frecuencia:

• Deuteranomalía y deuteranopía: respuesta reducida o ausente del cono verde. Esta es la gorda: la deuteranomalía por sí sola afecta a alrededor del 5 % de los hombres, lo que la convierte en la forma más común con diferencia. Rojos, verdes, marrones y naranjas se difuminan entre sí.
• Protanomalía y protanopía: respuesta reducida o ausente del cono rojo, en torno al 1 % de los hombres para la forma completa. Confusión rojo-verde similar, pero los rojos además se ven más oscuros y pueden desaparecer sobre negro.
• Tritanopía y tritanomalía: deficiencia azul-amarillo. Genuinamente rara (del orden del 0,01 % y no ligada al sexo, por lo que afecta a hombres y mujeres por igual), pero vale la pena echarle un vistazo porque rompe las distinciones azul-verde y amarillo-rosa que los otros tipos dejan intactas.

La conclusión práctica: alrededor del 99 % de la DVC es rojo-verde. Si tu paleta sobrevive a una simulación rojo-verde, has cubierto a la inmensa mayoría de los usuarios afectados. Ahí es donde conviene poner tu atención primero.

Esto es un problema distinto del contraste

Aquí va la distinción que hace tropezar incluso a equipos cuidadosos. El contraste de luminancia (el de WCAG) tiene que ver con claro frente a oscuro: si puedes leer el texto. La deficiencia de visión cromática tiene que ver con la confusión de tonos: si puedes distinguir dos colores entre sí cuando resultan ser similares en luminosidad. Son problemas independientes, y puedes fallar uno mientras bordas el otro.

El ejemplo clásico: un texto rojo puro #FF0000 sobre verde puro #008000 tiene un contraste de luminancia de aproximadamente 1.3:1, que falla estrepitosamente en WCAG; pero aunque «arreglaras» el contraste, una persona con deuteranopía seguiría teniendo dificultades, porque los dos tonos en sí colapsan entre ellos. A la inversa, dos colores pueden tener un contraste estupendo y aun así ser una trampa para la DVC si estás usando su tono, y solo su tono, para portar significado.

Así que una paleta accesible para el daltonismo y una paleta conforme a WCAG son círculos que se solapan, no el mismo círculo. Necesitas las dos. Si todavía no lo has hecho, vale la pena leer Los ratios de contraste WCAG explicados junto con este artículo: el contraste de luminancia es la base, y el diseño seguro frente a la DVC es la capa que va encima.

La única regla que arregla casi todo: no confíes nunca solo en el color

Si te llevas un único principio de este artículo, llévate este: no confíes solo en el color para transmitir información. El W3C lo convierte en un requisito explícito —Criterio de Conformidad 1.4.1 de WCAG, Uso del color— y es el hábito de mayor impacto que puedes construir.

La solución es casi siempre la redundancia. Siempre que el color porte significado, empáralo con una segunda señal que no sea de color:

• Texto o etiquetas. Mi panel de servidores mejoró en el instante en que cada punto también decía «Activo» o «Caído». Aburrido, a prueba de balas.
• Iconos y formas. Un tick, una X, un triángulo de advertencia. Los estados de error reciben un icono distinto, no solo un color distinto. Por eso un buen formulario muestra un borde rojo y un icono de error y un mensaje.
• Patrones y texturas. En los gráficos, rellena las barras o las regiones con tramas, puntos o guiones, de modo que las categorías se distingan incluso en escala de grises.
• Posición y orden. Una leyenda que sigue el mismo orden de arriba abajo que las áreas apiladas que describe permite a la gente emparejar por posición, no por tono.

La prueba rápida que hago en cualquier pantalla: imagínala impresa en una impresora láser en blanco y negro. Si sigues entendiéndola, no estás confiando solo en el color. Si dos estados se vuelven idénticos, has encontrado tu bug.

Elegir tonos que sobreviven a la DVC

La redundancia se ocupa del significado. Pero aun así quieres que los colores en sí sigan siendo distinguibles siempre que sea posible, especialmente en la visualización de datos, donde no puedes poner una etiqueta de texto en cada uno de 200 puntos de datos.

Unas cuantas reglas prácticas sacadas de la trinchera:

• Evita el rojo-verde como único contraste. El emparejamiento «bueno/malo», «antes/después», «equipo A/equipo B» que por defecto recurre al rojo y al verde es el fallo de DVC más común con diferencia. Si necesitas dos colores opuestos, el azul y el naranja es el par más seguro del planeta: se mantiene distinto en todos los tipos de DVC. El azul y el rojo es una segunda opción sólida.
• Apóyate en las diferencias de luminosidad, no solo en el tono. Si dos categorías también difieren en luminancia, quienes tienen DVC pueden distinguirlas incluso cuando los tonos colapsan. Un azul claro frente a un azul oscuro se lee como dos cosas para todo el mundo.
• Ten cuidado con los tonos intermedios. El verde azulado, el oliva, el marrón y los naranjas embarrados se sitúan justo en la zona de peligro de la deficiencia rojo-verde. Los tonos puros y bien separados aguantan mejor que los turbios.

En lugar de reinventar esto, súbete a hombros de quienes lo resolvieron con rigor. La paleta Okabe-Ito (también llamada paleta Wong, por el artículo de Bang Wong de 2011 en Nature Methods) es un conjunto de ocho colores diseñado para seguir siendo distinguible en todos los tipos comunes de DVC. Vale la pena guardar los códigos hex: naranja #E69F00, azul cielo #56B4E9, verde azulado #009E73, amarillo #F0E442, azul #0072B2, bermellón #D55E00, púrpura rojizo #CC79A7 y negro #000000. La he usado como paleta categórica en más paneles de los que puedo contar, y nunca ha fallado una simulación.

Cuando estás construyendo una paleta de marca o de interfaz en lugar de un gráfico, normalmente no necesitas ocho colores distinguibles para la DVC: necesitas un par de acentos que no choquen. Ahí es donde el generador de paletas de colores se gana su sitio: construye tu armonía (un esquema complementario dividido o triádico), lee los valores HSL y después separa deliberadamente tus dos colores semánticamente más importantes tanto en luminosidad como en tono. La lectura HSL lo hace fácil: baja la luminosidad de uno, súbela en el otro, y te habrás comprado una separación que sobrevive a la DVC. Si quieres entender por qué ciertas relaciones de la rueda chocan más que otras, Paletas complementarias divididas vs. triádicas entra en la geometría.

Pruébalo: no confíes en tus propios ojos

No puedes calibrar esto a ojo, porque (estadísticamente) lo más probable es que tengas visión cromática normal y la cuestión es precisamente que el fallo es invisible para ti. Simulas.

• Coblis (el Simulador de Daltonismo en Colblindor) te permite subir una captura de pantalla y verla a través de ocho tipos distintos de deficiencia. Todo se ejecuta localmente en tu navegador, así que puedes lanzarle exportaciones a resolución completa. Es mi opción preferida para comprobar una pantalla terminada.
• DevTools del navegador. El panel de Renderizado de Chrome tiene un desplegable «Emular deficiencias visuales» —protanopía, deuteranopía, tritanopía y visión borrosa— aplicado en vivo sobre la página real. Genial para cazar problemas mientras todavía estás en el marcado.
• Plugins de Figma y Sketch como Stark o los simuladores de visión integrados te permiten comprobar los diseños antes incluso de que se construyan.

Mi flujo de trabajo real: diseño con normalidad y después paso las pantallas clave —paneles, gráficos, errores de formulario, cualquier cosa donde el color signifique algo— primero por deuteranopía (la más común), después por protanopía y luego por una pasada rápida de tritanopía. El noventa por ciento de los problemas que encuentro están en esa primera vista de deuteranopía. Arregla esos y habrás ayudado a más gente con el menor esfuerzo.

Los errores que sigo viendo

• Estados de validación rojo/verde sin icono. El más común. Un borde rojo y un borde verde son el mismo borde para millones de usuarios. Añade un icono y un mensaje, siempre.
• Mapas de calor y gráficos que solo varían el tono. Un mapa de calor de verde a rojo es un campo de minas para la DVC. Usa una escala secuencial que también module la luminosidad (de amarillo claro a azul oscuro, por ejemplo), o añade etiquetas de valor.
• Leyendas codificadas por color emparejadas solo por color. Si la única forma de relacionar una línea con su etiqueta es «busca la verde», quienes tienen DVC se quedan atascados. Ordena la leyenda para que coincida con los datos, o etiqueta directamente sobre la línea.
• Dar por hecho que «pasó WCAG» significa «es accesible». El contraste y la DVC son ejes distintos. Una paleta puede superar el 4.5:1 en todas partes y aun así convertirse en un amasijo en deuteranopía. Prueba los dos.
• Diseñar solo en tu propio monitor perfecto. El mismo punto ciego que oculta los problemas de contraste oculta los de DVC. Simula, siempre.

Nada de esto te pide que diseñes interfaces feas ni que renuncies al color. El color es maravilloso y deberías usarlo con libertad. La disciplina es solo esta: deja que el color sea la capa deliciosa, nunca la única capa. Empareja cada tono significativo con una etiqueta, un icono o una forma; elige emparejamientos que sobrevivan al colapso rojo-verde; apóyate en la luminosidad tanto como en el tono; y pasa el simulador antes de darlo por terminado. Haz eso y el próximo ingeniero que no pueda ver tus puntos verdes seguirá sabiendo exactamente qué servidores están en llamas.