¿Algo va mal con esta herramienta?
Sobre «Color Blindness CSS Reference Online»
Esta herramienta genera una referencia CSS para diseñar paletas accesibles que funcionen con personas con deficiencias de visión cromática. Muestra cómo aparecen los colores bajo distintos tipos de daltonismo (protanopía, deuteranopía, tritanopía, monocromacia) y sugiere alternativas más seguras.
Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen alguna forma de deficiencia de visión cromática. Diseñar solo para visión completa de color los excluye — usar pares de colores seguros y no depender solo del color (añadiendo forma, texto o patrón) hace que tus diseños funcionen para todos.
Útil para probar paletas de marca, auditar diseños existentes por accesibilidad, o aprender qué pares de colores son problemáticos para evitarlos en futuros diseños.
Cómo usar esta herramienta
Cómo obtener un snippet CSS de filtros para simular daltonismo
Ejecutar sin entrada
La herramienta no tiene campos de entrada — simplemente pulsa Run. Devuelve un snippet CSS listo para pegar en tu hoja de estilos (sin configuración adicional).
Lo que obtienes
Resultado: un único campo `css` con tres clases de filtro: `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Cada una usa una matriz SVG `feColorMatrix` que aproxima un tipo de deficiencia de visión del color.
Cómo usarlo
Añade la clase correspondiente al `body` (o a un wrapper) para previsualizar tu diseño tal como lo ven ~8% de los hombres con daltonismo rojo-verde, o un porcentaje mucho menor con azul-amarillo. Conmuta la clase desde devtools — sin rebuild.
Caveats
Son aproximaciones lineales; la visión real es más matizada. Herramientas como Sim Daltonism (macOS) o Coblis usan mejores modelos. Combina siempre esta vista previa con controles de contraste WCAG (wcag-contrast-checker-online) — el color no debe portar información por sí solo.