Diseñar para el daltonismo: guía completa

Aproximadamente 300 millones de personas en el mundo tienen alguna forma de deficiencia en la visión del color (DVC). Si tu web, tu aplicación o tu visualización de datos depende únicamente del color para comunicar información, una parte importante de tu público tendrá dificultades para usarla.

La buena noticia: diseñar pensando en el daltonismo beneficia a todo el mundo. Unas decisiones cromáticas accesibles mejoran la claridad, la legibilidad y la usabilidad para cualquier persona, tenga DVC o no.

Por qué importa el diseño accesible para el daltonismo

La deficiencia en la visión del color afecta a alrededor del 8 % de los hombres y el 0,5 % de las mujeres. En la práctica, esto significa que:

En un equipo de 20 hombres, aproximadamente 1 o 2 tendrán DVC
En un público de un millón de personas, unos 80 000 hombres tendrán alguna forma de DVC rojo-verde
La confusión rojo-verde es la más frecuente y representa cerca del 98 % de los casos de DVC

Diseñar para el daltonismo es además, cada vez más, un requisito legal. Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 exigen expresamente que la información transmitida mediante color esté también disponible por otros medios.

La regla de oro: nunca dependas solo del color

El principio más importante del diseño accesible para la DVC es sencillo:

Nunca uses el color como único medio para transmitir información.

Acompaña siempre el color con al menos otra señal visual:

Etiquetas de texto: nombra explícitamente la categoría o el estado
Iconos o símbolos: usa formas independientes del color
Tramas o texturas: especialmente útiles en gráficos y mapas
Posición: usa la disposición espacial para comunicar jerarquía
Forma: emplea formas distintas para categorías de datos distintas

Evita las combinaciones problemáticas

Ciertos pares de colores resultan especialmente difíciles de distinguir para las personas con DVC rojo-verde:

Combinaciones de alto riesgo que conviene evitar

Evita	Motivo	Alternativa
Rojo sobre verde	Totalmente invisible para las personas deuteranopes	Usa azul sobre naranja
Verde sobre rojo	El mismo problema	Usa amarillo sobre azul
Botones rojo y verde	No se distingue aprobado/fallido	Añade iconos (✓/✗) y texto
Texto rojo y negro	El rojo puede verse gris oscuro	Usa negrita o subrayado para enfatizar
Rosa y gris	Parecen idénticos a las personas protánopes	Usa azul y gris

Combinaciones más seguras

Para quienes tienen DVC rojo-verde, azul y naranja es el par accesible más fiable: estos tonos siguen siendo distinguibles en prácticamente todos los tipos de DVC.

Otros pares seguros:

Azul + amarillo (excelente tanto para DVC rojo-verde como azul-amarillo)
Azul + blanco
Negro + amarillo (contraste máximo)
Morado + amarillo

Gráficos y diagramas accesibles

La visualización de datos es donde el daltonismo tiene mayor impacto. Errores frecuentes:

Usar rojo/verde para valores positivos/negativos
Usar mapas de calor con degradados rojo-amarillo-verde
Diferenciar varias series de datos solo por el color

Soluciones para los gráficos

1. Usa rellenos con trama además del color Añade rayado, puntos o cuadrículas a las áreas del gráfico para que sigan distinguiéndose aunque los colores parezcan similares.

2. Etiqueta los datos directamente En lugar de depender de una leyenda de colores, etiqueta las series directamente sobre el gráfico. Esto ayuda a todas las personas, no solo a las daltónicas.

3. Usa una paleta apta para DVC Paletas accesibles recomendadas:

Paleta Okabe-Ito: diseñada específicamente para la accesibilidad DVC en figuras científicas
Paletas ColorBrewer: paletas respaldadas por investigación para mapas y gráficos
Usa nuestro simulador de daltonismo para verificar que tus gráficos siguen siendo distinguibles bajo simulación de DVC

4. Ofrece formatos alternativos Acompaña cada gráfico con una vista de tabla o una descarga de datos, para que quien tenga dificultades con la representación visual pueda acceder a la información subyacente.

Diseño de formularios y estados de interfaz

Los formularios son un área de riesgo especialmente alto para usuarios con DVC, porque los indicadores de estado suelen basarse en el color:

Problemas habituales

Borde rojo en campos no válidos y verde en los válidos
«Estado: activo» mostrado solo en texto verde
Mensajes de error mostrados solo en rojo

Alternativas accesibles

Estados de validación:

❌ Evita: borde rojo = error, borde verde = correcto
✅ Haz:   icono de error (⚠) + borde rojo + texto descriptivo del error
          icono de éxito (✓) + borde verde + texto «¡Todo correcto!»

Indicadores de estado:

❌ Evita: • (punto verde) = En línea, • (punto rojo) = Desconectado
✅ Haz:   ✓ En línea, ✗ Desconectado (o usa formas distintas: ●/○)

Botones y llamadas a la acción:

❌ Evita: «Confirmar» verde / «Cancelar» rojo: idénticos para las personas protánopes
✅ Haz:   etiqueta los botones con claridad + asegura un contraste suficiente + añade iconos

Requisitos de contraste de color (WCAG)

Más allá de la elección del color, una relación de contraste suficiente es esencial para la legibilidad. Usa nuestro comprobador de contraste para verificar tus combinaciones.

Requisito	Relación mínima	Contexto
WCAG AA	4,5:1	Texto normal (menos de 18 pt)
WCAG AA	3,0:1	Texto grande (18 pt o más, o 14 pt en negrita)
WCAG AAA	7,0:1	Reforzado: texto normal
WCAG AAA	4,5:1	Reforzado: texto grande

Importante: estas relaciones se miden entre la luminancia del texto y la del fondo, y deben cumplirse para todo tipo de usuarios, incluida la simulación de DVC.

Cómo probar tus diseños

Prueba siempre tus diseños con varios métodos:

1. Usa un simulador de DVC

Sube capturas de pantalla al simulador de ColorVision para ver cómo se perciben tus diseños con cada tipo de DVC. Prueba los cuatro: protanopia, deuteranopia, tritanopia y acromatopsia.

2. Usa las herramientas del navegador

Chrome y Firefox incorporan simulación de DVC:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Comprueba las relaciones de contraste

Pasa cada combinación de texto y fondo por un comprobador de contraste que también muestre simulación de DVC.

4. Busca opiniones reales

Si puedes, prueba con personas daltónicas reales. Suelen detectar problemas que las simulaciones no revelan.

Consejos por plataforma

Diseño web

Usa CSS y añade atributos aria-label y title a los elementos codificados por color
No definas los estados :focus solo mediante color
Asegura que los errores de formulario incluyan icono y texto, no solo un cambio de color

Ciencia de datos e investigación

Usa la paleta Okabe-Ito como opción por defecto en R, Python (matplotlib) o cualquier librería de gráficos
Incluye siempre una leyenda con etiquetas de texto, aunque los colores parezcan evidentes

Aplicaciones móviles

iOS y Android admiten simulación de DVC en sus ajustes de accesibilidad
Prueba tu app con esos ajustes activados antes de cada versión importante

Diseño impreso

No dependas de metáforas de semáforo rojo/verde para indicar estados
Asegúrate de que las infografías sigan siendo comprensibles al fotocopiarse en blanco y negro

Herramientas recomendadas

Herramienta	Para qué sirve
Simulador de ColorVision	Simular cómo se ve cualquier imagen con DVC
Comprobador de contraste	Comprobar el cumplimiento WCAG con vista previa de DVC
Colour Oracle (app de escritorio)	Superposición de simulación DVC para todo el sistema
Who Can Use	Simula relaciones de contraste en distintas discapacidades
Plugin de accesibilidad de Figma	Comprobaciones de DVC en tiempo real dentro de Figma

Preguntas frecuentes

¿Diseñar de forma accesible para el daltonismo obliga a eliminar el color? No. El color se puede seguir usando ampliamente: simplemente no puede ser la única forma de transmitir información. Añade señales secundarias (texto, iconos, tramas) junto al color.

¿Solo hay que diseñar pensando en el daltonismo rojo-verde? La DVC rojo-verde abarca cerca del 98 % de los casos, pero diseñar para ella suele beneficiar también a otros tipos. Lo más inclusivo es probar con todos los tipos de DVC usando un simulador.

¿Las personas daltónicas usan lectores de pantalla? No necesariamente. La DVC es distinta de la ceguera. Quienes tienen DVC suelen conservar una agudeza visual completa y no usan lectores de pantalla; necesitan señales visuales independientes del color, no texto alternativo.

¿Cuál es la mejor herramienta gratuita para comprobar la accesibilidad para el daltonismo? El simulador y el comprobador de contraste de este sitio son totalmente gratuitos. Para Figma, el plugin gratuito «Able» ofrece comprobación de contraste en tiempo real.

Respuesta rápida