Paletas aptas para daltónicos y cómo probar tus diseños

Una paleta apta para daltónicos es un conjunto de colores que siguen siendo distintos para quienes confunden ciertos tonos, normalmente rojos y verdes. El truco es separar los colores por luminosidad además de por tono, y no dejar nunca que el color sea la única señal. Un azul oscuro y un naranja claro siguen siendo diferentes para casi todo el mundo; un rojo medio y un verde medio, con una luminosidad parecida, pueden verse como el mismo marrón turbio. Abajo tienes paletas para copiar, las parejas que conviene evitar y tres maneras gratuitas de probar tu trabajo.

Tipos de daltonismo, en resumen

La visión del color depende de tres tipos de conos en el ojo, sensibles más o menos a longitudes de onda largas, medias y cortas. Cuando falta un tipo o está desplazado, algunos colores que la mayoría ve distintos empiezan a parecerse. El artículo de WebAIM sobre daltonismo explica la biología; para el diseño, lo que importa es esta tabla.

El hilo común: el tono deja de ser fiable, pero la luminosidad sobrevive. Una persona con deuteranopia sigue viendo con claridad que un color es más oscuro que otro. Ese único hecho explica todas las reglas que siguen.

Una paleta apta para daltónicos que puedes copiar

El conjunto seguro más conocido es la paleta que propusieron Masataka Okabe y Kei Ito para figuras científicas. Sus ocho colores se eligieron para seguir siendo distinguibles con los tipos comunes de daltonismo, y funciona igual de bien en gráficos, mapas, etiquetas y colores de estado dentro de un producto.

Para trabajos de marca, ocho colores suelen ser demasiados. La pareja individual más segura es azul y naranja: están a lados opuestos de la línea de confusión entre rojo y verde y difieren en luminosidad, así que casi todo el mundo los lee como distintos. Azul con amarillo, y morado oscuro con verde claro, también funcionan bien.

Degradados y escalas para datos

Para mapas de calor y gráficos que muestran un rango, usa una escala cuya luminosidad cambie de forma constante de un extremo al otro. Una escala de rojo a verde falla dos veces: los extremos confunden a los lectores daltónicos y ambos extremos tienen una luminosidad parecida. De azul a naranja, o un solo tono de oscuro a claro, funciona para casi todos.

Parejas que conviene evitar y qué usar en su lugar

Algunas combinaciones dan problemas una y otra vez. El rojo #d7263d y el verde #2e9e44 de arriba se ven claramente distintos para la mayoría, pero su luminosidad perceptiva es casi idéntica (en torno al 57% y al 62% en OKLCH), así que para alguien con deuteranopia apenas queda nada para distinguirlos.

Si los colores de tu marca son rojo y verde, no hace falta cambiarlos. Basta con que uno sea claramente más oscuro que el otro y con no usarlos nunca como única diferencia entre, por ejemplo, una ganancia y una pérdida. Una flecha o un signo más y menos lo resuelve para todos. Cómo elegir esos colores desde el principio lo explica cómo elegir los colores de marca.

Nunca dependas solo del color

Esta es la regla más importante, y además forma parte de las Pautas de Accesibilidad para el Contenido Web. Si la leyenda de un gráfico, un error de formulario, una etiqueta de disponible o un mapa solo se distinguen por el color, algunos lectores pierden el significado. Añade una segunda señal:

• Etiquetas directamente sobre las líneas y barras del gráfico en lugar de una leyenda de colores.
• Iconos para los estados: una marca de verificación para el éxito, una cruz o un aviso para los errores.
• Patrones o estilos de línea, como líneas discontinuas y continuas, en los gráficos.
• Posición y orden, para que el primer elemento signifique siempre lo mismo.
• Contraste de texto que cumpla por sí solo, comprobado con un verificador de contraste.

Los gráficos para redes necesitan el mismo cuidado. Un post que dice «verde significa disponible» sobre un calendario rojo y verde perderá a algunos lectores. Las palabras lo transmiten mejor, y las propias palabras tienen que leerse sobre el fondo, sobre todo en degradados, donde el contraste cambia a lo largo del encuadre. Texto sobre degradados lo trata en detalle.

La versión de la derecha es lo que hace un Mark de Gradiently por sí solo: desplaza su zona más tranquila y con mejor contraste detrás del texto, y la tinta automática elige texto claro u oscuro para cada línea, así que la separación viene de la luminosidad y no del tono.

Cómo probar un diseño para daltonismo

1. 1

   Haz la prueba en escala de grises

   Exporta el diseño o haz una captura y pásalo a escala de grises. Si dos colores que significan cosas distintas se convierten en el mismo gris, cambia la luminosidad de uno de ellos.

2. 2

   Simúlalo en el navegador

   En Chrome o Edge, abre las herramientas para desarrolladores, abre el menú de comandos, escribe Rendering y usa Emulate vision deficiencies para ver la página en vivo con protanopia, deuteranopia, tritanopia o acromatopsia.

3. 3

   Revisa toda la pantalla en gris

   Mac y Windows incluyen un filtro de color en escala de grises en sus ajustes de accesibilidad. Actívalo para revisar apps, archivos de diseño y exportaciones, no solo páginas web.

4. 4

   Quita el color y vuelve a leerlo

   Pregúntate si cada gráfico, etiqueta y estado sigue teniendo sentido solo con etiquetas e iconos. Si es así, el color es decoración, que es donde debe estar.

Las simulaciones son aproximaciones, y la visión del color varía de una persona a otra. Si la accesibilidad importa en tu producto, pide a personas daltónicas que conozcas que miren el resultado real. Para gráficos en concreto, diseño de infografías profundiza en etiquetado y maquetación, y armonía de colores te ayuda cuando necesitas una paleta segura que además se vea pensada.