Daltonismo y diseño inclusivo: cómo adaptar colores
Para adaptar los colores a personas con daltonismo, la regla central es sencilla: nunca uses el color como único medio para transmitir información. Combina el color con texto, iconos, patrones o posición, asegúrate de que los elementos que deben distinguirse tengan una luminosidad diferente y evita depender de pares como rojo y verde. Así, la interfaz sigue siendo clara tanto para quien ve todos los colores como para quien no.
Esta guía explica los tipos de daltonismo, las combinaciones que más confusión generan, las técnicas que funcionan en interfaces, gráficos y mapas, y cómo probar el resultado antes de publicarlo.
Qué es el daltonismo y a cuántas personas afecta
La retina tiene tres tipos de conos, sensibles a longitudes de onda largas (L, asociadas al rojo), medias (M, al verde) y cortas (S, al azul). El daltonismo, o deficiencia de la visión del color, se produce cuando uno de esos tipos falta o tiene la sensibilidad desplazada. En la mayoría de los casos es hereditario y está ligado al cromosoma X, por eso es mucho más frecuente en hombres.
Las cifras consolidadas: alrededor del 8% de los hombres y el 0,5% de las mujeres de ascendencia europea tienen alguna deficiencia rojo-verde. La forma más común es la deuteranomalía. Las deficiencias azul-amarillo y la acromatopsia son raras. En la práctica, un producto con miles de usuarios casi seguro atiende a personas daltónicas todos los días.
Un punto importante: el daltonismo rara vez significa ver en blanco y negro. La mayoría de las personas daltónicas ven colores, pero confunden ciertos pares.
Tipos de daltonismo
Los sufijos indican la gravedad: -anopía cuando el tipo de cono está ausente y -anomalía cuando existe, pero con la sensibilidad alterada (la forma más leve y más frecuente).
| Tipo | Cono afectado | Confusiones típicas | Frecuencia |
|---|---|---|---|
| Protanopía / protanomalía | L (rojo) | Rojo con verde y marrón; los rojos se ven más oscuros, casi negros; azul con morado | Parte de los casos rojo-verde |
| Deuteranopía / deuteranomalía | M (verde) | Rojo con verde, verde con marrón, verde claro con gris o beige | La más común (deuteranomalía) |
| Tritanopía / tritanomalía | S (azul) | Azul con verde, amarillo con rosa o violeta, azul claro con gris | Rara |
| Acromatopsia | Todos los conos (ausentes o sin función) | Solo distingue claro y oscuro; suele ir acompañada de sensibilidad a la luz y baja agudeza visual | Muy rara |
Combinaciones de colores problemáticas
Estos son los pares que más problemas causan en interfaces y gráficos, sobre todo cuando tienen una luminosidad parecida:
- Rojo y verde: el caso clásico. rojo y verde en indicadores de «error» y «correcto» pueden verse casi iguales para personas con deficiencias protán y deután.
- Verde y marrón:
#008000y marrón#8B4513se confunden con facilidad, algo habitual en mapas de relieve y temas «naturales». - Azul y morado: el morado es azul con un componente rojo; si el rojo se percibe mal, queda el azul. azul y morado acaban pareciendo el mismo color.
- Verde y gris: los verdes poco saturados se acercan al gris, un problema cuando «activo» es verde e «inactivo» es gris.
- Azul claro y gris: un azul cielo junto a un gris claro puede perder la diferencia, sobre todo en deficiencias tritán y en pantallas con poco brillo.
El problema no es usar estos colores, sino usarlos como única diferencia entre dos datos.
No dependas solo del color (WCAG 1.4.1)
El criterio de conformidad 1.4.1 Uso del color de las WCAG, de nivel A, exige que el color no sea el único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento. Cómo aplicarlo:
- Formularios: además del borde rojo, muestra un icono y un mensaje como «Introduce un correo electrónico válido».
- Estados de éxito y error: usa iconos con formas distintas (un círculo con ✓, un triángulo con !) y texto, no solo verde y rojo.
- Enlaces dentro del texto: mantén el subrayado o garantiza un contraste de 3:1 con el texto circundante y una señal adicional en foco y hover.
- Campos obligatorios: escribe «obligatorio» o usa un asterisco explicado, en lugar de solo colorear la etiqueta.
- Estados en tablas: «Aprobado», «Pendiente» y «Rechazado» como texto, con el color como refuerzo.
Ejemplo práctico: un panel de estado
Imagina un panel de servidores en el que cada fila tiene un punto verde (en línea) o rojo (caído). Para muchas personas daltónicas, los dos puntos se ven iguales, y la información más importante de la pantalla desaparece. La solución no exige cambiar la identidad visual:
- Sustituye el punto por un icono con forma propia para cada estado, como ✓ para «en línea» y ✕ para «caído».
- Añade el texto del estado junto al icono.
- Ordena o agrupa las filas con problemas arriba, para que la posición también comunique.
- Mantén los colores como refuerzo, eligiendo tonos con una luminosidad claramente distinta.
Gráficos, datos y mapas
La visualización de datos es donde el daltonismo más estorba, porque las leyendas por colores obligan a comparar tonos.
Etiquetas directas
Escribe el nombre de la serie junto a la línea o la barra en lugar de obligar al lector a ir y volver a la leyenda. Ayuda a todo el mundo, no solo a quien tiene daltonismo.
Patrones, texturas y formas
En barras y áreas, usa tramas, punteados o rayas; en líneas, combina trazo continuo, discontinuo y punteado; en gráficos de dispersión, varía la forma del marcador (círculo, cuadrado, triángulo).
Paletas aptas para daltonismo
El par azul × naranja es distinguible para los tipos de daltonismo más comunes y es un buen sustituto del rojo × verde. Para gráficos con varias categorías, la paleta Okabe-Ito es una referencia consolidada:
| Color | HEX |
|---|---|
| Naranja | #E69F00 |
| Azul cielo | #56B4E9 |
| Verde azulado | #009E73 |
| Amarillo | #F0E442 |
| Azul | #0072B2 |
| Bermellón | #D55E00 |
| Púrpura rojizo | #CC79A7 |
| Negro | #000000 |
Incluso con una paleta segura, más de cinco o seis categorías en un mismo gráfico resultan difíciles para cualquier lector. En esos casos, agrupa los datos o divídelos en gráficos más pequeños.
Mapas
En mapas de calor y coropléticos, prefiere escalas secuenciales que varíen sobre todo en luminosidad (de claro a oscuro en un mismo tono) o escalas divergentes azul–naranja. Evita el «arcoíris» y la escala rojo–amarillo–verde, que tiene tramos indistinguibles para personas deután y protán. En mapas de transporte o de rutas, añade números, nombres o patrones de línea a los colores.
Contraste de luminosidad
Las personas con daltonismo siguen percibiendo bien la diferencia entre claro y oscuro. Por eso la luminosidad es tu mejor aliada: dos colores con luminosidad muy distinta siguen siendo distinguibles aunque se pierda el tono.
Los números explican por qué el par rojo y verde falla tanto. El rojo puro #FF0000 y el verde #008000 tienen entre sí una relación de contraste de apenas 1,28:1, es decir, una luminosidad casi igual. Cuando el tono deja de percibirse, queda prácticamente la misma mancha. En cambio, el azul #0072B2 y el naranja #E69F00 de la paleta Okabe-Ito llegan a 2,3:1, y además difieren en un eje de color (azul–amarillo) que las deficiencias rojo-verde conservan.
Una prueba rápida es pasar el diseño a escala de grises. Si dos elementos que deben verse distintos se convierten en el mismo gris, ajusta la luminosidad de uno de ellos. Para el texto, sigue los mínimos de WCAG (4,5:1 para texto normal y 3:1 para texto grande) y, para componentes de interfaz y partes de gráficos, 3:1 según el criterio 1.4.11. Mídelo en el verificador de contraste y consulta los detalles en la guía de contraste de color y accesibilidad.
Cómo probar tus colores
- Simulador de daltonismo: sube una captura de pantalla, un gráfico o una foto al simulador de daltonismo y compara la imagen en los distintos tipos de deficiencia.
- DevTools de Chrome y Edge: abre el panel Rendering (desde el menú «More tools» de las DevTools) y usa la opción Emulate vision deficiencies, que simula protanopía, deuteranopía, tritanopía y acromatopsia en toda la página, además de visión borrosa.
- Firefox: el Inspector de accesibilidad de las DevTools también ofrece simulación de deficiencias de la visión del color.
- Personas reales: las simulaciones son aproximaciones. Siempre que puedas, pide la opinión de usuarios daltónicos.
Haz estas pruebas pronto, en la fase de paleta y prototipo, cuando cambiar un color todavía es barato. El generador de paletas te ayuda a explorar alternativas antes de cerrar el sistema de colores.
Checklist de diseño inclusivo para daltonismo
- Ninguna información depende solo del color: hay texto, icono, patrón o posición de apoyo.
- Los estados de error, aviso y éxito tienen iconos de formas distintas y mensajes escritos.
- Los enlaces dentro del texto tienen subrayado u otra señal además del color.
- Los gráficos usan etiquetas directas y, si hace falta, patrones o formas de marcador.
- La paleta de datos evita el rojo × verde y usa pares como azul × naranja o la Okabe-Ito.
- Los mapas usan escalas secuenciales de luminosidad o divergentes seguras, nunca arcoíris.
- Los elementos siguen siendo distinguibles en escala de grises.
- El contraste cumple WCAG: 4,5:1 para texto, 3:1 para texto grande y componentes.
- El diseño se ha revisado en el simulador y con la emulación de las DevTools.
Para seguir, prueba tus pantallas en el simulador de daltonismo, mide tus pares en el verificador de contraste y crea una nueva base en el generador de paletas. La guía sobre cómo elegir la paleta de colores de una web muestra cómo aplicar todo esto a un sistema de colores completo.