Comparación visual y técnica lado a lado
Simulación de daltonismo y vista previa de interfaz
Funciones explicadas
Matriz de contraste WCAG 2.1
Calcula relaciones de contraste exactas (de 1:1 a 21:1) y asigna insignias oficiales de aprobación o fallo AA y AAA para la legibilidad del texto.
Diferencia perceptual Delta E
Mide la distancia matemática del color para informarte si el ojo humano percibe dos tonos como claramente diferentes.
Simulador de visión para daltónicos
Simula los modos de percepción de protanopía, deuteranopía y tritanopía en tiempo real.
Corrector automático de accesibilidad inteligente
Ajuste con un solo clic que altera automáticamente los niveles de luminosidad para cumplir con el estándar WCAG AA.
¿Para qué puedes usarla?
Auditoría de accesibilidad web
Garantiza que el texto de los botones y los colores de fondo cumplan con las pautas WCAG requeridas antes de la publicación.
Evaluación de paletas de marca
Compara los colores principales de la marca con las opciones secundarias de acento para asegurar legibilidad y equilibrio visual.
Información de la herramienta
| Formatos compatibles | Hex, RGB, HSL |
|---|---|
| Cumplimiento de estándares | WCAG 2.1 (AA & AAA) |
| Motor de distancia de color | CIE76 / Perceptual Delta E |
| Procesamiento | Motor 100% en el navegador |
Beneficios
- Resultados instantáneos sobre el cumplimiento de WCAG.
- Modos de vista previa de daltonismo para un diseño UX accesible.
- Generación de variables CSS y Tailwind con un solo clic.
Limitaciones
- Los cálculos se basan en la representación del espacio de color sRGB estándar.
Procesamiento local y privado
Todos los cálculos de contraste y transformaciones del espacio de color se ejecutan localmente dentro de tu navegador web sin cargar datos a ningún servidor.
Política de privacidad
No registramos, rastreamos ni guardamos los valores de color comparados ni tus configuraciones de vista previa.
Consejos
- Busca una relación de contraste de al menos 4.5:1 para el texto normal con el fin de cumplir con los estándares WCAG AA.
- Utiliza el botón Intercambiar para invertir rápidamente las combinaciones de primer plano y fondo.
Preguntas frecuentes
¿Cuál es una buena relación de contraste WCAG para el texto principal?
Se requiere una relación mínima de 4.5:1 para que el texto normal cumpla con los estándares WCAG AA. Para el cumplimiento AAA, se requiere una relación de 7:1.
¿Qué significa el valor Delta E?
Delta E mide la diferencia perceptual del color. Un Delta E inferior a 1.0 es imperceptible para el ojo humano, mientras que valores superiores a 5.0 indican colores claramente distintos.
¿Esta herramienta de comparación es gratuita?
Sí, es completamente gratuita, sin límites de uso ni necesidad de registrarse.