Escribe o elige dos colores y ve la relación de contraste WCAG al instante, con insignias de aprobado AA/AAA para texto normal y grande.
Esta herramienta calcula el ratio de contraste WCAG entre dos colores e indica si la pareja cumple el nivel AA o AAA para texto normal, texto grande y componentes de interfaz no textuales. Todo se calcula localmente en tu navegador; los colores introducidos nunca se suben.
No, el cálculo se realiza por completo en tu navegador con JavaScript; nada de lo que introduces se sube.
WCAG 2.x exige 4,5:1 para AA en texto normal, 7:1 para AAA en texto normal, 3:1 para AA en texto grande y 4,5:1 para AAA en texto grande.
Al menos 24px (18pt) en peso normal, o unos 18,7px (14pt) en negrita; cualquier texto más pequeño usa los umbrales de texto normal.
La fórmula del ratio es simétrica: solo compara la luminancia más clara y la más oscura, no qué color se usa para el texto. Intercambiarlos sigue siendo útil porque indica si la pareja también funciona con los roles invertidos, por ejemplo texto oscuro sobre una etiqueta clara frente a texto claro sobre una etiqueta oscura.
No. El contraste es solo uno de los muchos criterios de éxito de WCAG. La elección de color para personas con deficiencias de visión cromática, la visibilidad del foco, el reescalado del texto y la navegación con teclado son comprobaciones aparte; el simulador de daltonismo de este sitio cubre una de ellas.
No. Implementa de forma independiente la fórmula pública de contraste de WCAG 2.x y no está afiliada al W3C ni a ninguna otra organización de accesibilidad.