Cuando hablamos de diseño gráfico, UI o diseño web, casi siempre damos por hecho que todo el mundo ve los colores igual que nosotros. Pero la realidad es que un porcentaje nada despreciable de usuarios percibe la interfaz de una forma muy distinta por culpa del daltonismo. Ignorar cómo ven los colores estas personas puede hacer que nuestros diseños sean confusos, poco usables o directamente inaccesibles, aunque a primera vista nos parezcan impecables.
Además, el tema no es solo técnico o de accesibilidad, también es profundamente humano. Detrás de cada pantalla hay usuarios reales que pueden sentirse excluidos si un formulario, un mapa o un sistema de alertas se basa únicamente en el color. Por suerte, hoy en día tenemos herramientas, buenas prácticas y criterios claros para diseñar pensando en el daltonismo sin renunciar a la creatividad.
Qué es el daltonismo y por qué debe importarte en el diseño
El daltonismo, o deficiencia en la percepción del color, es un trastorno visual de origen genético que afecta al funcionamiento de los conos de la retina. Estos conos son las células responsables de interpretar las longitudes de onda asociadas a los colores rojo, verde y azul, y cuando alguno de estos tipos falla o está ausente, aparecen diferentes formas de daltonismo.
A nivel estadístico, se calcula que alrededor de un 8 % de la población masculina y cerca de un 1 % de la femenina presenta algún tipo de daltonismo en su forma más común. La diferencia entre hombres y mujeres se explica porque muchas de estas mutaciones se encuentran en el cromosoma X y suelen ser recesivas, de modo que los hombres, al tener un único cromosoma X, son más propensos a manifestarlas.
En diseño, esto significa que, de cada 100 personas que visitan tu web, usan tu app o revisan tu cartel, hasta 8 podrían percibir una parte clave de tu mensaje de forma diferente o no entenderla bien. Puede parecer un porcentaje pequeño, pero en términos de experiencia de usuario y responsabilidad profesional, es un colectivo demasiado grande como para ignorarlo.
El problema más habitual en el daltonismo es la dificultad para distinguir entre tonos de rojo y verde, seguido por alteraciones en la percepción de azules y amarillos. En los casos más extremos, la persona puede llegar a ver el mundo casi en escala de grises, con todos los colores reducidos a variaciones de luminosidad.
Si no tienes esto en cuenta, puedes diseñar un sistema de iconos en el que lo correcto sea verde y lo incorrecto rojo y que, para una persona daltónica, ambos estados sean prácticamente idénticos. Lo que para ti es clarísimo, para otros puede ser un galimatías, con impactos directos en usabilidad, comprensión y, en muchos casos, en la propia seguridad (pensemos en mapas de metro, señales, mensajes de error críticos, etc.).
Principales tipos de daltonismo que afectan al diseño
En diseño no hace falta convertirse en oftalmólogo, pero sí conviene tener claro qué tipos de daltonismo son más frecuentes y cómo influyen en lo que el usuario ve en pantalla. Comprender estas variantes te ayuda a anticipar problemas de contraste, combinaciones conflictivas y elecciones de color arriesgadas.
La clasificación básica más conocida suele hablar de protanopia, deuteranopia y tritanopia, pero en realidad el espectro es más amplio, con formas totales y parciales de alteración del color. A continuación se resumen los tipos más relevantes desde el punto de vista del diseño.
Protanopia: es la ausencia de sensibilidad al color rojo. Las personas con protanopia tienen grandes dificultades para percibir las longitudes de onda largas, de modo que los rojos tienden a verse más oscuros, apagados o incluso confundirse con marrones o verdes. Esto afecta directamente a cualquier interfaz que use el rojo como color principal o como indicador de error.
Deuteranopía: en este caso el problema está en los conos responsables del verde. Los usuarios deuteranopes tienen una clara alteración en la discriminación entre tonos rojos y verdes, que pueden verse muy similares. Desde el punto de vista práctico, ambas variantes (protanopia y deuteranopía) se agrupan a menudo como “ceguera rojo-verde” y representan alrededor del 99 % de los casos de daltonismo.
Tritanopia: es mucho menos frecuente y está relacionada con una carencia de sensibilidad al azul. Se la conoce también como dicromacia azul. Las personas con tritanopia pueden confundir azules con verdes y tener problemas con amarillos, lo que puede afectar a paletas que se basan en estos contrastes.
Protanomalía: aquí no falta completamente el cono del rojo, pero sí funciona de forma anómala. La persona sigue percibiendo el rojo, pero con menor intensidad o desplazado hacia otras tonalidades, de modo que los colores que dependen mucho de este canal pueden resultar menos distinguibles. Es una forma de discromatopsia más leve que la protanopia, pero igualmente importante para el diseño.
Deuteranomalía: algo similar ocurre con el cono verde en la deuteranomalía. El cono no está ausente pero su respuesta es anómala, lo que desplaza la percepción de los verdes. A diferencia de la deuteranopía, los rojos no se ven tan oscuros, pero la diferenciación entre ciertos verdes y rojos sigue siendo problemática. Muchos de estos usuarios pueden distinguir matices con relativa precisión, pero no del mismo modo que una persona con visión cromática “normal”.
Tritanomalía: es una variante extraña en la que la capacidad para distinguir algunos tonos de azul y amarillo está reducida. Aunque afecta a un porcentaje muy pequeño de la población (en torno al 0,01 %), conviene conocerla si se basa el sistema de jerarquía visual casi exclusivamente en estos colores.
Acromatopsia: es un caso extremo en el que la persona prácticamente solo percibe blanco, negro y toda la gama de grises intermedios. El color deja de ser una herramienta útil, así que el diseño debe basarse en contraste, tipografía, iconografía y composición.
Monocromía de cono azul (BCM): es una enfermedad hereditaria en la que los conos rojo y verde no funcionan. Esto provoca una discriminación muy pobre del color, baja agudeza visual, nistagmo y fotofobia. A nivel de diseño, obliga a trabajar de forma especialmente cuidadosa el contraste, el tamaño tipográfico y la legibilidad general.
El impacto real del daltonismo en proyectos gráficos y digitales
Puede parecer que todo esto es teoría, pero el impacto del daltonismo en el día a día del diseño es muy concreto. Una mala elección de paleta o depender únicamente del color puede romper por completo la experiencia de una parte de los usuarios, incluso cuando el resto percibe la interfaz como perfectamente funcional.
Pensemos en un mapa de metro clásico: cada línea se identifica por un color diferente y, en muchos casos, la única pista visual es ese color, como ocurre en la señalética y paletas de color. Para alguien con visión normal, la lectura de rutas es inmediata; para una persona daltónica, dos líneas cercanas en el espectro pueden ser prácticamente indistinguibles, justo cuando más falta hace diferenciarlas para planificar un trayecto.
Otro ejemplo son los mensajes de error en formularios o sistemas de validación. Es muy habitual que se marque un campo incorrecto únicamente con un borde rojo. Si no se añade nada más, un usuario con ceguera rojo-verde puede no notar ninguna diferencia respecto al estado “correcto”. Plataformas como Facebook incorporan un icono de exclamación, por ejemplo, para reforzar el mensaje de error con una pista visual no cromática.
En interfaces web o móviles, también es muy común distinguir estados (activo/inactivo, seleccionado/no seleccionado) únicamente mediante cambios de color. Si el contraste entre esos estados es bajo o se basa en combinaciones problemáticas, los usuarios daltónicos tendrán que esforzarse mucho más para entender qué está ocurriendo, lo que se traduce en frustración, errores y abandono.
En resumen, desde un punto de vista profesional, un buen diseño no es solo estético: tiene que comunicar con claridad a toda la audiencia, incluidas las personas con deficiencia de color y formar parte de una web inclusiva. No adaptarse implica no solo un problema ético, sino también una pérdida de eficacia, conversión e incluso reputación de marca.
Herramientas para simular daltonismo en Photoshop, Illustrator y otros entornos
La buena noticia es que hoy no hace falta imaginar cómo ve un daltónico tu trabajo: se puede simular directamente desde las herramientas habituales de diseño. Photoshop e Illustrator incluyen desde hace años opciones de previsualización de daltonismo que permiten comprobar el resultado con un solo clic.
El flujo de trabajo recomendado es sencillo. Primero, asegúrate de que el documento está en modo RGB, ya que la simulación de la visión daltónica se hace sobre la visualización en pantalla. Después, en Photoshop o Illustrator, puedes ir al menú “Ver > Ajustes de prueba > Daltonismo” y elegir entre los modos correspondientes a protanopia o deuteranopía según lo que quieras comprobar.
Al activar estas vistas previas, la imagen que ves en pantalla cambia como si estuviera siendo observada por una persona con ese tipo concreto de deficiencia visual. No modifica el archivo original, solo la forma en que se muestra en tu monitor. Esto te permite detectar problemas de contraste, pares de colores que se confunden o elementos que pierden protagonismo.
Un proceso de trabajo típico puede ser: diseño original, vista simulada para daltonismo, ajustes de color y contraste, y nueva comprobación. La idea es iterar hasta lograr una versión en la que tanto una persona con visión cromática “normal” como un usuario daltónico entiendan el diseño sin dificultad.
En la documentación de Adobe encontrarás más detalles sobre estos modos de prueba y recomendaciones específicas para ajustes de color. Además, estas herramientas no solo se aplican a gráficos estáticos: son igualmente útiles para interfaces, botones, iconos y cualquier recurso que vayas a exportar a web o app.
Plugins y extensiones para diseñar interfaces accesibles (Sketch, Figma, Adobe XD, navegador)
Si trabajas con herramientas de diseño de interfaces como Sketch, Figma o Adobe XD, también tienes aliados muy potentes. Uno de los más conocidos es el plugin Stark, disponible para las principales aplicaciones de diseño de UI. Stark permite simular los principales tipos de daltonismo (protanopia, deuteranopía, tritanopia, etc.) directamente sobre tus maquetas.
En su versión gratuita, Stark te deja previsualizar las tres formas básicas de daltonismo (protanopia, deuteranopía, tritanopia). Si necesitas simular más variantes o acceder a funciones avanzadas, la versión de pago amplía el abanico de opciones. Además, Stark incluye una funcionalidad muy práctica para comprobar el contraste entre dos colores y verificar el nivel de accesibilidad según las pautas WCAG, y puedes consultar guías sobre plugins de accesibilidad.
Otra opción muy versátil para el navegador Chrome es la extensión Colorblinding. Esta herramienta es gratuita y permite simular todos los tipos de daltonismo más habituales sobre cualquier página web que tengas abierta. Es especialmente útil si trabajas con Figma u otras herramientas en el navegador, porque puedes evaluar el resultado real en el contexto de la propia interfaz de la web.
Con Colorblinding puedes cambiar entre distintas simulaciones (protanopia, deuteranopía, tritanopia, anomalías parciales, acromatopsia, etc.) y ver en tiempo real cómo se transforma tu diseño. Esto ayuda a detectar rápidamente elementos problemáticos y a justificar decisiones de color frente a clientes o equipos que no están familiarizados con el tema.
Si prefieres mantenerte en el ecosistema Adobe, recuerda que Photoshop e Illustrator ya incorporan sus propios modos de prueba. En todos los casos, el objetivo es el mismo: validar tus decisiones no solo desde la teoría, sino desde la experiencia real de usuarios con diferentes tipos de visión del color.
Buenas prácticas cromáticas para diseños accesibles a daltónicos
Más allá de las herramientas, hay una serie de prácticas muy concretas que puedes incorporar de forma sistemática para hacer tus diseños más inclusivos. No se trata de renunciar al color, sino de usarlo de forma inteligente y combinada con otros recursos.
En primer lugar, una recomendación clave: evita depender exclusivamente del color para transmitir información importante. Si un estado, un error, una categoría o un nivel de prioridad solo se distingue por un cambio de color, estás poniendo una barrera directa a una parte de tu audiencia. Acompaña siempre esos cambios con texto, iconos, variaciones de forma o patrones.
Otra idea fundamental es revisar la paleta con criterios de claridad (consulta tendencias de paletas de colores). Por ejemplo, el rojo puro tiende a verse más oscuro y turbio para muchas personas con protanopia, mientras que un rojo con un toque anaranjado suele percibirse mejor. El verde azulado acostumbra a ser menos problemático que el verde amarillento, que puede confundirse con otros tonos.
También conviene recordar que el gris puede confundirse con magentas, rosas pálidos o ciertos verdes suaves, por lo que no siempre es tan neutro como parece. Y existen combinaciones especialmente delicadas que es mejor evitar siempre que sea posible: rojo con verde, amarillo con verde brillante, azul claro con rosa y azul oscuro con violeta son algunas de las más conflictivas.
En cuanto a las superposiciones, no es buena idea usar elementos rojos sobre fondos muy oscuros, ni elementos blancos sobre fondos amarillos o rojo anaranjado, porque la lectura se complica mucho para gran parte de los usuarios con deficiencia de color.
Para reforzar la diferenciación entre bloques de color, una solución sencilla y efectiva es añadir bordes bien definidos (blancos, negros o de tonos oscuros) entre áreas contiguas. Estos contornos ayudan a separar visualmente elementos que, por color, podrían confundirse.
Más allá del color: formas, texturas y tipografía al servicio de la accesibilidad
Los diseñadores estamos acostumbrados a usar el color como código universal: verde para “bien”, rojo para “mal”, amarillo para “advertencia”, etc. Pero cuando el color deja de ser fiable, es necesario ampliar el repertorio. Las formas, las texturas, los iconos y la tipografía se convierten en aliados fundamentales.
En formularios o sistemas de validación, por ejemplo, puedes acompañar el color rojo de error con un símbolo claro (una cruz, un triángulo de alerta, un signo de exclamación) y un texto explicativo. De este modo, aunque el color no se perciba correctamente, el mensaje llega sin ambigüedad.
En gráficos, mapas o infografías con muchas categorías, apoyarse únicamente en el color es casi garantía de problemas. Introducir patrones, rayados, puntos o variaciones de textura en zonas con colores similares permite que sean distinguibles incluso por quienes no perciben bien las diferencias cromáticas.
La tipografía también puede trabajar a tu favor (guía de tipografías). No hace falta abusar de mil familias distintas, pero sí puedes jugar con cambios de grosor, estilos (regular, bold, italic), tamaños o familias claramente diferenciadas para marcar jerarquías y estados. Así, un botón “activo” no solo cambia de color, sino que puede ganar peso tipográfico o un icono añadido.
En interfaces complejas, incorporar iconografía consistente y fácilmente reconocible para acciones recurrentes (guardar, borrar, confirmar, cancelar) reduce la dependencia del color. Incluso aunque el usuario no pueda ver bien el tono del botón, identificará la acción por el símbolo y la etiqueta textual.
En definitiva, cuanto más redundante sea el sistema de señales (color + forma + texto + icono), más robusto será el diseño frente a distintas formas de daltonismo u otros problemas de visión.
Contraste de color y estándares de accesibilidad (WCAG)
Además de la elección de colores y el uso de formas alternativas, el contraste entre texto y fondo es un pilar básico de accesibilidad. Una combinación de colores puede ser preciosa en un dribbble, pero si el contraste es bajo, será un dolor de cabeza para cualquier usuario con baja visión o daltonismo.
Las directrices de accesibilidad para contenidos web (WCAG), definidas por el W3C, establecen ratios mínimos de contraste que deberías tomar como referencia. Un ratio de contraste es una medida numérica que compara la luminosidad relativa de dos colores. Cuanto más alto es el ratio, mayor es la diferencia y, por tanto, más legible resulta el texto.
Para cumplir el nivel de conformidad AA (el más habitual en proyectos serios), el texto normal debe tener un contraste mínimo de 4,5:1 respecto al fondo. En el caso de textos grandes o titulares (por encima de cierto tamaño o peso tipográfico), se permite un contraste algo menor, de 3:1.
Si quieres apuntar al máximo nivel de accesibilidad AAA, el contraste exigido para el texto normal sube a 7:1, mientras que para textos grandes o titulares el mínimo queda en 4,5:1. No siempre es necesario llegar a AAA en todo, pero conviene saber dónde están los límites y cuándo tiene sentido subir el listón.
Para calcular estos ratios no hace falta hacerlo a mano. Existen múltiples herramientas sencillas que te permiten introducir dos colores (por ejemplo, en formato hexadecimal) y te devuelven el contraste y si cumple AA o AAA. Stark, por ejemplo, integra un comprobador de contraste directamente en el flujo de Figma, Sketch o XD: solo tienes que seleccionar dos capas y usar la opción de comprobar contraste.
También hay utilidades independientes, como la app de escritorio Contrast para macOS, o webs como Contrast-ratio, donde introduces los colores y obtienes al momento el ratio y el nivel de accesibilidad alcanzado. Son herramientas ligeras, pero tremendamente útiles para convertir la accesibilidad en parte del proceso y no en un remiendo de última hora.
El papel del diseñador: responsabilidad, experiencia y oportunidades
Más allá de cumplir normas y usar plugins, es importante asumir el papel que tenemos como diseñadores en la construcción de entornos más inclusivos. Vivimos en un mundo que, en general, se ha creado pensando en una visión “perfecta”, cuando una parte relevante de la población no encaja en ese estándar.
Hay testimonios de estudiantes de diseño que, al descubrir que son daltónicos tras pasar un test de colores, se plantean dejar la carrera. El miedo a equivocarse con las paletas, a no “ver” lo que ven los demás o a fallar en proyectos para clientes es muy fuerte. Sin embargo, el hecho de ser daltónico no te invalida como profesional del diseño, igual que usar gafas no te impide ser un buen fotógrafo.
De hecho, conocer de primera mano las dificultades de percepción puede convertirse en una ventaja: te vuelve más consciente de la importancia del contraste, de las formas, de la tipografía y de la redundancia de señales. Muchos profesionales daltónicos trabajan perfectamente apoyándose en herramientas de simulación, sistemas de referencia de color, feedback de compañeros y buenas prácticas.
Desde el punto de vista de negocio, incorporar la accesibilidad cromática a tus proyectos no solo es “lo correcto”, también es una ventaja competitiva. Productos digitales mejor adaptados a personas con daltonismo tienden a tener una mejor experiencia de usuario global, mejores tasas de éxito en tareas críticas y, en muchos casos, mejor posicionamiento orgánico, ya que la accesibilidad es un factor cada vez más valorado.
Al final, no se trata de hacer un “diseño especial” solo cuando el proyecto se etiqueta como inclusivo, sino de integrar estos criterios en el día a día. Revisar contrastes, evitar combinaciones conflictivas, usar iconos y textos de apoyo o probar el diseño con simuladores de daltonismo son pasos que no consumen demasiado tiempo y multiplican la calidad del resultado final.
Adaptar el diseño al daltonismo no es una moda ni una carga añadida, es parte de hacer bien nuestro trabajo. Trabajar con paletas más inteligentes, contrastes adecuados, símbolos claros y herramientas de simulación permite que tus proyectos funcionen para mucha más gente. Cuando el color deja de ser una única muleta y pasa a ser un recurso más dentro de un sistema rico y redundante de señales visuales, el diseño gana en claridad, en usabilidad y en humanidad, y eso se nota tanto en la satisfacción del usuario como en el rendimiento de cualquier producto digital.
