Texto principal sobre superficie
CorrectaoOriginal
Aa
Simulado
Aa
Contraste original13.98:1
Contraste simulado14.62:1
Accesibilidad del color
Simulador de daltonismo + paleta segura
Simula protanopia, deuteranopia y tritanopia para encontrar pares de color problematicos, mejorar la legibilidad y generar una paleta mas segura para interfaces reales.
Configuracion de simulacion
Elige un perfil visual y ejecuta la generacion automatica de una paleta segura para los pares riesgosos.
0Pares problematicos
4Pares correctos
ProtanopiaPerfil actual
Texto secundario sobre panel
CorrectaoOriginal
Aa
Simulado
Aa
Contraste original4.34:1
Contraste simulado4.67:1
Boton de accion principal
CorrectaoOriginal
Aa
Simulado
Aa
Contraste original5.17:1
Contraste simulado7.49:1
Badge de advertencia
CorrectaoOriginal
Aa
Simulado
Aa
Contraste original8.15:1
Contraste simulado6.68:1
Informe de problemas
Los pares por debajo de 4.5:1 en la simulacion seleccionada se marcan como riesgosos para la legibilidad del texto.
No hay pares problematicos para el perfil actual.
:root {
--safe-primary-text-foreground: #1e293b;
--safe-primary-text-background: #f8fafc;
--safe-muted-text-foreground: #64748b;
--safe-muted-text-background: #f1f5f9;
--safe-action-foreground: #ffffff;
--safe-action-background: #2563eb;
--safe-warning-foreground: #78350f;
--safe-warning-background: #fef3c7;
}Simulador de daltonismo: que comprueba y como usarlo
Una paleta puede parecer correcta para el equipo y fallar para usuarios con deficiencias en la vision del color. La simulacion revela combinaciones problematicas en etapas tempranas.
Como usarlo: 1) elige el perfil visual, 2) inspecciona los pares simulados, 3) genera una paleta segura, 4) exporta tokens CSS/JSON y aplicalos en tu sistema.
FAQ de simulacion de daltonismo
Por que revisar varios perfiles visuales?
Cada deficiencia afecta canales de color distintos. Un par puede funcionar en un perfil y fallar en otro.
Que hace la generacion de paleta segura?
Ajusta los colores de foreground para cumplir contraste legible bajo la simulacion elegida manteniendo, en lo posible, la misma direccion visual.
Esto sustituye las comprobaciones WCAG de contraste?
No. La mejor practica es combinar la simulacion con comprobaciones WCAG AA/AAA de contraste.
Que debo hacer despues de generar una paleta segura?
Exporta los tokens, actualiza los estilos de componentes y vuelve a ejecutar las comprobaciones de contraste y flujo de teclado antes del lanzamiento.