Color Contrast
Verifica ratios de contraste WCAG AA y AAA entre dos colores
Acerca de Color Contrast
Compara un color de primer plano y uno de fondo y muestra su ratio de contraste según WCAG 2.1, con indicadores de aprobado o no aprobado para AA y AAA en texto normal y grande, además de una muestra de texto en vivo. Los colores son opacos y se ingresan como códigos HEX de 6 dígitos o con un selector de color. Útil para revisar texto, botones y enlaces antes de una revisión de diseño o una auditoría de accesibilidad.
Categoría: Color.
Preguntas frecuentes
¿Cómo se calcula el ratio de contraste?
▾
Se calcula la luminancia relativa de cada color a partir de sus canales sRGB linealizados (0.2126 R + 0.7152 G + 0.0722 B), y el ratio es (L1 + 0.05) / (L2 + 0.05), donde L1 corresponde al color más claro. Va de 1:1 para colores idénticos a 21:1 para negro sobre blanco, y no cambia si intercambias el primer plano y el fondo.
¿Cuál es la diferencia entre el cumplimiento AA y AAA?
▾
AA (mínimo): 4.5:1 para texto normal, 3:1 para texto grande (18pt+ o 14pt+ en negrita). AAA (mejorado): 7:1 para texto normal, 4.5:1 para texto grande. La mayoría de las organizaciones apuntan a AA; AAA es ideal pero a menudo poco práctico para todo el texto.
¿Qué cuenta como 'texto grande' en WCAG?
▾
Texto de 18pt (24px) o más grande, o 14pt (aproximadamente 18.67px) o más grande cuando está en negrita. El texto grande tiene un requisito de contraste más bajo porque es más fácil de leer con menor contraste.
¿Por qué un ratio de 4.50:1 puede no cumplir AA?
▾
El ratio se muestra con dos decimales, pero la evaluación usa el valor exacto, porque WCAG no permite redondear hacia arriba. Por ejemplo, #6363F8 sobre blanco muestra 4.50:1, pero su ratio real es de aproximadamente 4.496, así que no alcanza el mínimo AA de 4.5:1 para texto normal.