Simulador de Daltonismo

Se estima que 300 millones de personas en todo el mundo tienen alguna forma de daltonismo — aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres. Es un grupo más grande que la población de la mayoría de los países, y si tu producto depende del color para comunicar estado, dirección o significado, una parte importante de tus usuarios está viendo algo distinto de lo que diseñaste.

El Simulador de Daltonismo de Tooladex te permite subir cualquier imagen —una captura de pantalla, un gráfico, una maqueta— y verla como la vería alguien con protanopía, deuteranopía, tritanopía u otra deficiencia de visión del color. Todo se ejecuta localmente en tu navegador; nada se sube nunca a un servidor.

¿Qué es el daltonismo?

La visión del color comienza con tres tipos de conos en la retina, cada uno sintonizado a un rango de longitudes de onda que corresponde aproximadamente a la luz roja, verde y azul. Tu cerebro combina sus señales para producir el espectro de color completo que percibes.

El daltonismo ocurre cuando falta por completo uno de esos tipos de conos (dicromacia) o cuando está desplazado y responde a longitudes de onda incorrectas (tricromacia anómala). El resultado no suele ser ver en blanco y negro — es que ciertos colores que se ven claramente distintos para la visión típica se vuelven difíciles, o imposibles, de diferenciar.

La mayoría de los casos de daltonismo son hereditarios y están ligados al cromosoma X, por lo que es mucho más común en hombres (que tienen un solo cromosoma X) que en mujeres (que tienen dos, y necesitarían que ambas copias estuvieran afectadas).

Tipos de daltonismo que simula esta herramienta

Protanopía (ceguera al rojo) — sin conos rojos. ~1% de los hombres.
Protanomalía (debilidad al rojo) — conos rojos desplazados. ~1% de los hombres.
Deuteranopía (ceguera al verde) — sin conos verdes. ~1% de los hombres.
Deuteranomalía (debilidad al verde) — conos verdes desplazados. ~5% de los hombres — la forma más común.
Tritanopía (ceguera al azul) — sin conos azules. ~1 de cada 10.000 personas.
Tritanomalía (debilidad al azul) — conos azules desplazados. Extremadamente raro.
Acromatopsia (monocromacia) — ningún cono funcional. ~1 de cada 30.000 personas.
Acromatomalía (monocromacia parcial) — conos severamente reducidos. Extremadamente raro.

Las deficiencias rojo-verde (protanopía, protanomalía, deuteranopía y especialmente deuteranomalía) representan la gran mayoría de los casos de daltonismo. Si solo puedes diseñar y probar para un caso, que sea ese.

Cómo usar el simulador

Sube una imagen —una captura de pantalla, un gráfico, un logotipo o una maqueta de interfaz— o empieza con la imagen de demostración incluida, deliberadamente llena de las trampas clásicas de accesibilidad (un par de estado rojo/verde, un semáforo, un degradado arcoíris).
Elige un tipo de visión en el selector, o revisa la cuadrícula comparativa para ver todos los tipos a la vez.
Compara original vs. simulado — la herramienta transforma los valores de rojo, verde y azul de cada píxel usando matrices de color que aproximan cómo los percibe ese tipo de visión.
Prueba colores individuales — elige cualquier valor hexadecimal y ve al instante cómo se ve bajo cada tipo de visión, útil para revisar una paleta antes de confirmarla.
Descarga el resultado para incluirlo en una revisión de diseño, una presentación para un cliente o una auditoría de accesibilidad.

Diseñar sin depender solo del color

El error de accesibilidad más común en el diseño de interfaces es usar el color como única señal para algo importante. Un borde rojo significa "error". Un punto verde significa "en línea". Una línea roja frente a una verde en un gráfico significa "baja" frente a "sube". Para alguien con deuteranomalía, esos pares pueden verse casi idénticos.

Algunas soluciones prácticas:

Combina el color con una forma o un icono. Una marca de verificación y una "x" comunican éxito/error incluso si los colores se ven iguales.
Usa etiquetas de texto, no solo puntos codificados por color. "Activo" / "Inactivo" es mejor que un punto verde / un punto gris.
Añade patrones o texturas a los gráficos, no solo tonos distintos, para las series de datos que deben seguir siendo distinguibles.
Prueba tu paleta primero contra la deuteranomalía — al ser, con diferencia, la deficiencia más común, corregirla cubre la mayor parte de los usuarios reales.
Verifica la luminosidad, no solo el tono. Dos colores pueden tener tonos muy distintos pero un brillo percibido casi idéntico, lo que hace que se confundan aún más bajo el daltonismo.

Combinaciones de color más seguras para estados y gráficos

Rojo / Verde → Azul / Naranja
Puntos de estado rojo / verde → Icono + etiqueta (✓ Éxito / ✕ Error)
Gráfico de líneas rojo / verde → Estilos de línea sólida / discontinua, más una leyenda
Mapa de calor "bueno" en verde / "malo" en rojo → Escala divergente azul a naranja

Herramientas relacionadas

Color Contrast Checker — Valida los ratios de contraste WCAG para texto y fondos
Accessible Color Palette Checker — Prueba una paleta completa para cumplimiento WCAG
Relative Luminance Calculator — Comprende el brillo percibido de cualquier color
Color Palette Generator — Crea nuevas paletas pensando en la accesibilidad