Cuando diseñas una interfaz, estás decidiendo quién podrá usarla y quién no. Si distingues dos estados solo con verde y rojo, estás dejando fuera a aproximadamente el 8% de los hombres y al 0,5% de las mujeres que ven tu producto cada día. No es un detalle académico: en el mundo hablamos de más de 300 millones de personas con alguna forma de ceguera al color, según Colour Blind Awareness.
Sin embargo, el daltonismo es uno de los temas de accesibilidad más subestimados en el diseño digital hispano. Este artículo te da una guía operativa: qué pasa realmente en el ojo de una persona daltónica, por qué el problema va mucho más allá del "rojo vs verde", qué principios aplicar en el diseño y cómo testear si una interfaz funciona de verdad para todos.
Lo que aprenderás:
- Los tipos de daltonismo y cuán habituales son
- Por qué el daltonismo es un problema de diseño, no médico
- Los 5 principios para diseñar interfaces inclusivas en cuanto al color
- Las herramientas de simulación y testing
- Una checklist práctica para tu próximo proyecto
Qué es el daltonismo (explicado para diseñadores)
El daltonismo — técnicamente discromatopsia o color vision deficiency — es una condición de la retina que reduce o elimina la capacidad de distinguir ciertas combinaciones de colores. No es una enfermedad: es una variante de la visión humana, normalmente hereditaria, permanente, no corregible con gafas.
En el ojo humano sano, la percepción del color depende de tres tipos de conos sensibles respectivamente al rojo (L), verde (M) y azul (S). Cuando uno de estos conos funciona de manera anómala o falta, el cerebro recibe información cromática incompleta.
Las formas principales son cuatro:
- Deuteranomalía y deuteranopia (conos verdes alterados o ausentes): la forma más común, afecta al 6% de los hombres. Dificulta distinguir rojo, verde, marrón y gris.
- Protanomalía y protanopia (conos rojos): alrededor del 1% de los hombres. El rojo se ve apagado y cercano al gris.
- Tritanomalía y tritanopia (conos azules): muy rara, afecta a menos del 0,01% de la población. Dificultad entre azul y amarillo.
- Acromatopsia (ceguera total al color): rarísima, 1 caso cada 30.000. La visión es totalmente en escala de grises.
En síntesis: aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tiene alguna forma de daltonismo. En tu próximo usability test con 10 participantes masculinos, estadísticamente uno de ellos está viendo tu interfaz de forma distinta a como la diseñaste.
Por qué es un problema de diseño, no del usuario
La tentación de despachar el daltonismo como "caso límite" es común y errónea. Tres razones concretas por las que un diseñador profesional lo tiene en cuenta:
Es un requisito de cumplimiento legal. Las directrices WCAG 2.2 en el criterio 1.4.1 ("Use of Color") establecen que el color no debe ser el único medio para transmitir información. Es nivel A, el umbral mínimo de conformidad. En España se aplica la norma UNE-EN 301 549 alineada con el estándar europeo, y el European Accessibility Act (en vigor desde el 28 de junio de 2025) hace obligatorios estos criterios para la mayoría de servicios digitales privados en la UE. En LATAM, países como México (NOM-190-SSA1-2022), Colombia (Ley 1618) y Argentina están regulando progresivamente la accesibilidad digital en el sector público y privado.
Es económicamente relevante. 300 millones de usuarios son un mercado que pesa. Una interfaz de e-commerce que no distingue claramente los productos "disponibles" de los "agotados" pierde ventas concretas. Un dashboard donde un valor rojo hundido en un mar de verdes señala un problema crítico que pasará desapercibido la mitad de las veces no es solo inaccesible: está roto.
Mejora la experiencia para todos. Un diseño que funciona para un daltónico funciona también para quien mira la pantalla al sol, para quien tiene un monitor mal calibrado, para quien está cansado, para quien usa el modo oscuro. La accesibilidad no es un subconjunto: es un acelerador de calidad general.
Los 5 principios para diseñar interfaces inclusivas
1. Nunca confíes el significado solo al color
Es la regla de oro. Cada vez que el color transmite una información (error, éxito, advertencia, estado activo, categoría), debe ir acompañado de una segunda señal redundante: un icono, una etiqueta textual, un patrón, una forma distinta.
Ejemplos prácticos:
- Formularios de validación: en lugar de "borde rojo = error, borde verde = ok", añade un icono ✕ y ✓ más un mensaje textual debajo del campo.
- Gráficos: en lugar de dos líneas una roja y una verde, usa trazos distintos, markers de forma distinta (círculo vs cuadrado), o etiquetas directas sobre las líneas.
- Mapas: en lugar de colorear regiones por categoría, añade patrones (diagonales, puntos, rejillas) o etiquetas.
GOV.UK y el design system Material de Google aplican este principio de forma ejemplar: cada estado de error tiene icono + color + texto, siempre.
2. Garantiza el contraste mínimo WCAG AA
El contraste entre texto y fondo debe respetar al menos el criterio WCAG 2.2 AA:
- 4,5:1 para texto normal (menos de 18pt)
- 3:1 para texto grande (18pt+ o 14pt+ en negrita)
- 3:1 para elementos UI no textuales (iconos, bordes de botones, inputs)
El contraste ayuda a todos, pero para quien tiene una forma severa de daltonismo o baja visión es la diferencia entre poder leer y no poder leer. Usa herramientas como WebAIM Contrast Checker o Stark en Figma para medir antes de aprobar la paleta.
3. Evita las combinaciones problemáticas
Hay parejas cromáticas que se vuelven indistinguibles para los tipos de daltonismo más habituales:
- Verde y rojo (el clásico)
- Verde y marrón
- Azul y morado
- Verde claro y amarillo
- Azul y gris
- Verde y gris
- Verde y negro
Si tu paleta de marca impone una de estas parejas, compensa con diferencias de luminosidad y saturación marcadas. Un verde muy claro y un rojo muy oscuro siguen siendo distinguibles en escala de grises, por lo que también funcionan para quien no percibe el matiz.
4. Diseña primero en escala de grises
Un método que enseñamos en nuestros cursos: cuando desarrollas una nueva interfaz, dibújala primero en escala de grises y verifica que todo el significado sigue pasando igual. Solo después añades el color, que debe reforzar la jerarquía existente, no crearla.
Este hábito, además de producir diseños accesibles, obliga a pensar en términos de jerarquía visual y peso de la información, no de decoración.
5. Testea con simuladores, siempre
No confíes en la intuición. Usa las herramientas de simulación que replican la visión de una persona daltónica sobre tu diseño. Las cubrimos en el siguiente párrafo.
Herramientas para testear y diseñar
La toolbox recomendada, toda gratis o con versión free generosa:
- Stark (plugin de Figma, Sketch, VS Code): simula 8 tipos de daltonismo directamente sobre tu diseño, mide el contraste, muestra violaciones WCAG en tiempo real. Es el estándar de facto en 2026.
- Sim Daltonism (macOS, gratis open source): abre una ventana que muestra en tiempo real cómo se ve cualquier cosa de la pantalla a un daltónico. Potente para testear interfaces reales, no solo mockups.
- Coblis Color Blindness Simulator (web): subes una imagen y la ves a través de los distintos filtros de daltonismo. Útil para tests puntuales.
- WebAIM Contrast Checker: calcula la ratio de contraste entre dos colores y te dice de inmediato si cumples WCAG AA y AAA.
- Colour Contrast Analyser (TPGi): app de escritorio, más precisa que el contrast checker de Chrome DevTools para contenidos complejos.
- Chrome DevTools: en el panel Rendering puedes emular deficiencias visuales en cualquier sitio en vivo. Útil para verificar el producto terminado, no solo los mockups.
El workflow que recomendamos a nuestros estudiantes: Stark durante el diseño, Chrome DevTools durante la review final, un test real con usuarios daltónicos antes del lanzamiento si el producto tiene un público lo bastante amplio para justificarlo.
Errores comunes en los proyectos de estudiantes
De los cursos de Visual Design e Interaction Design de CorsoUX, los patrones erróneos que vemos más a menudo:
- "Pongo un icono rojo y uno verde, ya está": ¿el icono rojo es un ✕ y el verde un ✓? Bien. ¿Son dos círculos llenos de color distinto? No basta. La forma debe cambiar, no solo el color.
- Enlaces azules sobre texto azul más claro: error típico cuando se busca una marca "tono sobre tono". El enlace debe tener otra diferencia además del color — normalmente el subrayado — precisamente por esto.
- Gráficos con leyenda de colores alejada: si la leyenda está arriba a la izquierda y los datos a la derecha, el usuario tiene que memorizar la asociación color-etiqueta. Para un daltónico es un reto. Pon las etiquetas directamente sobre las series cuando sea posible.
- Tags coloreados sin icono: las interfaces tipo Kanban donde los estados son solo chips de colores están entre las peores para los daltónicos. Añade siempre un icono o una letra.
- Mapas con escala de color continua: elige escalas perceptualmente uniformes y "colorblind-safe" como Viridis, Cividis o las paletas de ColorBrewer.
Checklist práctica para aplicar hoy
Un check rápido antes de entregar cualquier diseño:
- Ninguna información crítica se transmite solo por color
- Contraste texto/fondo ≥ 4,5:1 (AA) para texto normal
- Contraste de elementos UI ≥ 3:1
- Los estados de error / éxito tienen icono + texto, no solo color
- El diseño sigue siendo comprensible en escala de grises
- Simulado con Stark en al menos 3 tipos de daltonismo
- Enlaces distinguibles del texto también sin color (subrayado, peso, icono)
- Gráficos usan formas/patrones distintos además del color
- Ninguna pareja prohibida (verde+rojo, azul+morado, etc.) usada para distinguir elementos
Preguntas frecuentes
¿Debo evitar totalmente el verde y el rojo en mis interfaces?
No. Puedes usarlos libremente, con la condición de que el significado no dependa solo de su diferencia. El rojo + icono de error + texto "Email no válido" es perfecto. El borde rojo solo no.
¿Los usuarios daltónicos ya usan herramientas para compensar?
Algunos sí. Existen filtros del sistema (iOS y Android tienen opciones nativas para el daltonismo en Ajustes → Accesibilidad) y apps dedicadas como Color Blind Pal. Pero no debes diseñar asumiendo que los usen: muchísimas personas con daltonismo leve ni siquiera tienen un diagnóstico y no saben que tienen una condición particular. Diseña como si no tuvieran ninguna ayuda.
¿El dark mode es un problema para los daltónicos?
No en sí mismo. Pero el dark mode a menudo reduce los contrastes cromáticos, y una paleta que funciona bien en claro puede volverse problemática en oscuro. Cuando soportas ambos modos, verifica ambos con Stark.
¿Cuál es la forma más grave de daltonismo?
La acromatopsia completa: la persona ve el mundo en escala de grises. Es rarísima (1 de cada 30.000). Si diseñas para esta condición — es decir, en escala de grises — estás diseñando automáticamente para todas las demás formas de daltonismo a la vez.
¿Existe una paleta universalmente «colorblind-safe»?
No exactamente universal, pero hay paletas pensadas a propósito. Las más usadas en data visualization son Viridis, Cividis, Magma y las escalas de ColorBrewer. Para UI genéricas no existe una paleta universal: lo que importa es el método (redundancia, contraste, testing), no un único set de colores.
Próximos pasos
El daltonismo es una puerta de entrada al mundo más amplio de la accesibilidad digital. Si quieres continuar:
- Lee la guía a las heurísticas de usabilidad — muchas tienen implicaciones directas sobre la accesibilidad
- Profundiza en el visual design y la tipografía para entender cómo se relacionan legibilidad y jerarquía visual
- Estudia el visual design en nuestro curso dedicado
Diseñar para la accesibilidad no es una checklist para marcar al final: es una manera de pensar el diseño desde el principio. Y una vez que lo interiorizas, no se vuelve atrás.
