Simulador de Daltonismo
Mirá cómo se ve una paleta de colores con protanopia, deuteranopia, tritanopia y acromatopsia, y encontrá los colores que se vuelven difíciles de distinguir. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
Un color por línea, en cualquier formato. Hasta 12 colores.
¿Qué es un simulador de daltonismo?
Alrededor del 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de deficiencia en la visión del color, casi siempre una menor capacidad de distinguir el rojo del verde. Un simulador muestra cómo ven ellos un conjunto de colores, para que puedas comprobar si la leyenda de un gráfico, un badge de estado o un mapa siguen funcionando. Esta herramienta transforma cada color con el modelo de Machado, Oliveira y Fernandes (2009) para protanopia, deuteranopia y tritanopia, lo pasa a escala de grises para la acromatopsia, y marca los pares de colores cuya diferencia baja de un ΔE de 10, el punto en que se vuelven difíciles de distinguir.
Ejemplos
La misma simulación en código, como filtro SVG reutilizable y dentro del navegador:
// Machado et al. 2009, deuteranopia, on linear RGB
const M = [[0.367322, 0.860646, -0.227968],
[0.280085, 0.672501, 0.047413],
[-0.01182, 0.04294, 0.968881]];
const sim = M.map((row) => row[0] * r + row[1] * g + row[2] * b);import numpy as np
M = np.array([[0.367322, 0.860646, -0.227968],
[0.280085, 0.672501, 0.047413],
[-0.01182, 0.04294, 0.968881]])
simulated = linear_rgb @ M.T<filter id="deuteranopia">
<feColorMatrix type="matrix" values="0.367 0.861 -0.228 0 0
0.280 0.673 0.047 0 0 -0.012 0.043 0.969 0 0 0 0 0 1 0" />
</filter>/* preview a whole page through the SVG filter above */
html { filter: url(#deuteranopia); }Casos de uso
Verificar paletas de gráficos y mapas
Asegurate de que cada serie de un gráfico o categoría de un mapa se siga distinguiendo, sobre todo los pares de rojo y verde, que son los que más fallan.
Colores de estado en interfaces
Los estados de éxito, advertencia y error muchas veces dependen solo del verde, el amarillo y el rojo. Mirá si se confunden y agregá íconos o etiquetas donde pase.
Revisar una paleta de marca
Probá un conjunto de colores de marca antes de usarlos en todo un producto, así los problemas de accesibilidad se detectan una vez y no en cada pantalla.
Explicarle accesibilidad a un equipo
Mostrales a diseñadores y stakeholders cómo ve realmente una paleta un usuario daltónico, que convence más que una guía.