Guía de paletas aptas para daltónicos — reglas prácticas para diseñadores y desarrolladores

Comparamos las paletas de Okabe-Ito y Paul Tol con simulaciones de los tipos 1, 2 y 3, y resumimos reglas de diseño que no dependen del color: contraste de luminosidad, doble codificación y criterios WCAG.

Si alrededor de 1 de cada 12 hombres (en poblaciones de ascendencia europea) tiene una alteración rojo-verde, entre quienes miran sus gráficos, mapas y paneles siempre habrá personas daltónicas. La buena noticia es que basta con seguir unas pocas reglas para que desaparezcan la mayoría de los problemas.

Regla 1: no transmita información solo con el color

El criterio de conformidad 1.4.1 de las pautas de accesibilidad web WCAG, “Uso del color”, establece que el color no debe ser el único medio visual para transmitir información. Un campo con error lleva un borde rojo junto con un icono y un texto; las líneas de un gráfico, además del color, usan formas, líneas discontinuas o etiquetas directas.

Regla 2: asegure la diferencia de luminosidad

Aunque haya una alteración de la visión del color, las diferencias de brillo se perciben bien. Elija colores que deban distinguirse con una luminosidad claramente distinta. La forma más sencilla de comprobarlo es ver si se siguen distinguiendo al imprimir en blanco y negro.

Regla 3: evite la pareja rojo-verde y use azul-naranja

“Bien = verde, mal = rojo” es el error más común. Con los tipos 1 y 2, ambos se ven como un ocre parecido. Si necesita contraponer dos categorías, lo más seguro es azul ↔ naranja.

Paletas probadas

La paleta de “diseño de color universal” propuesta por Okabe e Ito son 8 colores elegidos para distinguirse también con alteraciones rojo-verde. La tabla siguiente muestra los mismos colores transformados con una simulación de dicromacia (Machado 2009, intensidad 100%).

Paleta Okabe–Ito (8 colores) — cada fila simula el mismo color con cada tipo
Visión normal	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Dicromacia tipo 1	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Dicromacia tipo 2	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Dicromacia tipo 3	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

La paleta “bright” de Paul Tol también está pensada a la vez para la visión alterada del color y para la impresión en blanco y negro.

Paleta Paul Tol bright (7 colores)
Visión normal	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Dicromacia tipo 1	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Dicromacia tipo 2	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Dicromacia tipo 3	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

En cambio, las combinaciones habituales de rojo, verde y naranja muy saturados se solapan entre sí con los tipos 1 y 2.

Ejemplo que conviene evitar — combinación basada en rojo y verde muy saturados
Visión normal	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Dicromacia tipo 1	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Dicromacia tipo 2	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Dicromacia tipo 3	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Para valores continuos, una luminosidad que cambie de forma uniforme

Para valores continuos como temperatura o densidad, use mapas de color secuenciales cuya luminosidad cambie de forma uniforme en una sola dirección (viridis, cividis, etc.). Cividis se diseñó teniendo en cuenta las alteraciones de la visión del color.
El mapa de color arcoíris (jet) tiene una luminosidad irregular que induce a error incluso sin alteraciones de la visión del color, y además pierde información en el tramo rojo-verde.
Para valores que divergen en dos sentidos (aumento y disminución), un mapa divergente azul-blanco-naranja (o rojo) es más seguro que uno rojo-verde.

Texto y contraste

Para el texto, se recomienda un contraste de luminosidad con el fondo de al menos 4.5:1 según el criterio WCAG 1.4.3. El texto rojo sobre fondo negro pierde mucho contraste para las personas con tipo 1.
En los enlaces, no cambie solo el color: mantenga el subrayado.

Orden de comprobación

1. ¿Se distingue en blanco y negro (escala de grises)?
2. ¿Se distingue en el simulador con el tipo 1 y el tipo 2 al 100%?
3. Además del color, ¿hay pistas de forma, etiqueta o patrón?
4. ¿Se pueden poner etiquetas directamente sobre el gráfico, sin leyenda?

Si supera estos cuatro puntos, su material será más fácil de leer no solo para las personas daltónicas, sino también para quien lo vea en una pantalla poco nítida, impreso en blanco y negro o a plena luz en exteriores.

Ver en el simulador →