En este simulador puedes ver cómo se transforma una misma imagen según distintos tipos de daltonismo (protanopía, deuteranopía, tritanopía, acromatopsia...). Es una forma rápida y visual de comprobar si tus diseños funcionan bien también para las personas que no perciben los colores igual que tú.
Solo tienes que subir una imagen, elegir el tipo de daltonismo que quieres simular y hacer clic en «Simular». Podrás detectar combinaciones de colores problemáticas, elementos que se confunden entre sí o mensajes que se apoyan únicamente en el color. Así podrás ajustar tu paleta, los contrastes o los iconos antes de publicar tu web, app o pieza gráfica.
El daltonismo es una alteración en la forma en que el ojo percibe los colores. No suele significar “ver en blanco y negro”, sino confundir ciertos tonos (por ejemplo, rojos y verdes) o percibirlos con menos intensidad. Afecta a un porcentaje importante de la población, especialmente a hombres, y tiene impacto directo en cómo usan una web o una aplicación.
Existen varios tipos de daltonismo. Los más frecuentes son los que afectan a la percepción de los tonos rojizos (protanopía) y verdosos (deuteranopía), pero también hay alteraciones en la percepción de azules y amarillos (tritanopía) o casos más extremos en los que prácticamente se pierde la visión del color (acromatopsia). Cada tipo modifica de manera distinta la forma en que se ve tu diseño.
Al simular estos tipos con una imagen real de tu proyecto, puedes descubrir problemas que a simple vista pasan desapercibidos: botones que se confunden con el fondo, gráficos imposibles de interpretar o avisos que solo cambian de color sin ningún otro indicador.
Diseñar solo con tu propia percepción del color es arriesgado: lo que para ti es un botón muy visible o un gráfico clarísimo puede ser casi indistinguible para una parte de tus usuarios. Un simulador de daltonismo te permite ver tu diseño “con otros ojos” y comprobar si los mensajes importantes siguen siendo claros cuando los colores se confunden.
Al visualizar tu web, app o material gráfico con distintos tipos de daltonismo, es más fácil detectar dónde dependes exclusivamente del color para transmitir información. Esto te ayuda a tomar mejores decisiones: reforzar el contraste, añadir iconos o patrones, cambiar la paleta o reorganizar elementos para que nadie se quede fuera.
Además, usar un simulador forma parte de un proceso de diseño más inclusivo y profesional. No solo mejoras la accesibilidad, también reduces errores costosos a última hora y haces que tu marca sea más usable y coherente para un público más amplio.
Estas son algunas situaciones en las que un simulador de daltonismo resulta especialmente útil:
No. Este simulador no sirve para diagnosticar daltonismo ni sustituye a una revisión profesional. Su objetivo es mostrar cómo podría ver una persona con distintos tipos de daltonismo tu diseño, para ayudarte a tomar mejores decisiones de diseño.
Puedes simular los tipos más habituales, como protanopía, deuteranopía, tritanopía y acromatopsia, entre otros. Cada modo modifica la imagen de una forma distinta para aproximarse a la percepción de color de esos usuarios.
Es un muy buen punto de partida, pero no lo es todo. Además de comprobar cómo se ve tu diseño con daltonismo, conviene revisar el contraste de color, el tamaño de las fuentes, la estructura de encabezados, los textos alternativos y otros criterios de accesibilidad.
Lo ideal es incorporar este tipo de comprobaciones en tu proceso habitual: al definir la paleta, al crear componentes clave (botones, formularios, gráficos) y antes de lanzar una nueva versión importante de tu web o app.
El daltonismo es solo una de las muchas realidades que la accesibilidad digital tiene en cuenta. Combinar un simulador de daltonismo con herramientas de contraste de color te permite detectar tanto problemas de percepción del color como de falta de legibilidad en tus textos y componentes de interfaz.
Incluir estas comprobaciones en tu proceso de diseño no solo te acerca a las pautas de accesibilidad como WCAG, también mejora la experiencia de uso para todo el mundo. Un diseño que se entiende bien, incluso cuando los colores se perciben de forma distinta, es un diseño más claro, más usable y más profesional.
Sube una imagen y haz clic en «Simular» para ver cómo cambia con cada tipo de daltonismo.
Después de revisar cómo ven tu diseño distintos tipos de daltonismo, puedes comprobar también el contraste de tus colores con nuestro Test de contraste y asegurarte de que el texto sigue siendo legible.
Una vez hayas visto cómo cambia tu diseño con distintos tipos de daltonismo, puedes seguir ajustando y validando tus colores con otras herramientas de Color;Code.