Alrededor del 8% de los hombres y el 0,5% de las mujeres conviven con algún tipo de daltonismo, así que si tu web depende del color para transmitir información, hay bastantes visitantes que se quedan sin entenderla del todo. La buena noticia es que adaptar un sitio a estas necesidades no exige rediseñarlo desde cero, sino aplicar unas cuantas decisiones concretas de contraste, jerarquía y redundancia visual.
Qué tipos de daltonismo condicionan el diseño
El daltonismo no es una condición única, sino un grupo de variantes que afectan a colores distintos y en distinto grado. Las tres más habituales son estas:
- Deuteranopia: cuesta distinguir el verde, la variante más frecuente.
- Protanopia: dificultad para percibir el rojo, que suele confundirse con tonos verdosos u ocres.
- Tritanopia: la menos común, afecta a la percepción del azul y del amarillo.
En la práctica, quien tiene alguna de estas condiciones ve los colores más apagados o directamente no distingue tonos que a otra persona le parecen obvios. Por eso un botón verde de «confirmar» junto a uno rojo de «cancelar» puede resultar indistinguible si el único diferenciador es el color.
Contraste: la primera barrera a resolver
Un contraste suficiente entre texto y fondo ayuda a cualquier persona con dificultades de visión, no solo a quien tiene daltonismo. Las pautas WCAG 2.1 piden una ratio mínima de 4.5:1 para texto normal y 3:1 para texto grande, y combinaciones como negro sobre blanco o blanco sobre azul oscuro suelen cumplirlas sin esfuerzo. Herramientas como el WCAG Contrast Checker permiten comprobar cualquier par de colores antes de llevarlos a producción.
Este trabajo de contraste va de la mano de la usabilidad general del sitio: un buscador, un menú o un formulario poco legibles penalizan a todos los usuarios, con o sin daltonismo.
No uses el color como único mensajero
El error más repetido en el diseño web es cargar todo el peso comunicativo en el color. Un campo de formulario que marca error solo con el borde en rojo, o un gráfico que distingue categorías únicamente por su tono, deja fuera a quien no percibe esa diferencia.
La solución pasa por acompañar el color con un segundo indicador: un icono, un texto o un patrón. Un error de formulario funciona mejor con un icono de aviso y el texto «Este campo es obligatorio» que con un simple cambio de color. En gráficos y tablas conviene añadir etiquetas de datos o texturas diferenciadas, y en imágenes y recursos gráficos el texto alternativo describe lo que el color por sí solo no puede transmitir.
Herramientas de personalización para el usuario
Algunos sitios incorporan un panel de accesibilidad que permite ajustar contraste, paleta y tamaño de texto desde el propio frontend. No hace falta un desarrollo complejo: con un widget de accesibilidad bien configurado, cada visitante adapta la interfaz a lo que necesita en lugar de depender de que el diseño por defecto le sirva.
Cómo comprobar que funciona de verdad
Seguir las pautas no garantiza que el resultado funcione en la práctica, así que conviene simular la experiencia antes de publicar. Extensiones como Color Oracle o Sim Daltonism muestran cómo se ve una página bajo cada tipo de daltonismo, y ese repaso rápido suele sacar a la luz botones o alertas que pasaban desapercibidos en el diseño original.
El feedback de usuarios daltónicos reales, aunque sea de dos o tres personas, aporta matices que ningún simulador capta del todo, sobre todo en interfaces con muchos estados (hover, activo, deshabilitado) donde el contraste puede fallar solo en algunos casos.
Diseñar para daltónicos no complica el proyecto ni le resta personalidad a la marca. Con un contraste bien medido y sin depender del color en solitario para comunicar, el sitio gana en claridad para todos los visitantes, vean los colores como los vean.
Preguntas frecuentes
¿Qué ratio de contraste exige la accesibilidad web?
Las pautas WCAG 2.1 nivel AA piden una ratio mínima de 4.5:1 entre texto y fondo para texto normal, y de 3:1 para texto grande o elementos gráficos.
¿Es obligatorio adaptar una web al daltonismo por ley?
Depende del tipo de organización: administraciones públicas y determinados servicios digitales están obligados por normativa de accesibilidad, mientras que para el resto es una buena práctica que amplía la audiencia real del sitio.
¿Qué herramientas sirven para simular daltonismo en una web?
Color Oracle y Sim Daltonism son las más usadas para revisar cómo se ve una página bajo distintos tipos de daltonismo, y el propio WCAG Contrast Checker permite validar combinaciones de color concretas.
¿Basta con cambiar la paleta de colores para ser accesible?
No. El contraste ayuda, pero la clave está en no depender solo del color para transmitir información: iconos, etiquetas de texto y patrones visuales complementan cualquier paleta, por accesible que sea.
