Verificador de contraste de color WCAG
Introduce un color de primer plano (texto) y de fondo y obtén el ratio de contraste WCAG 2.1 exacto, con resultados de aprobado/fallido para AA y AAA, texto normal y grande, además de una vista previa en vivo. Los colores pueden introducirse en hex o rgb(), o elegirse con el selector de color junto a cada campo.
El veloz murciélago hindú comía feliz cardillo y kiwi
Muestra de texto de tamaño normal, para comparación.
Preguntas frecuentes
¿Cómo se calcula el ratio de contraste?
Usando la fórmula real de luminancia relativa WCAG 2.1 en los canales sRGB de cada color, y comparando luego la luminancia más clara y más oscura como (L1 + 0,05) / (L2 + 0,05). El resultado va de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro).
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel de conformidad WCAG estándar en el que se basan la mayoría de los requisitos de accesibilidad (incluidas muchas normas legales): 4,5:1 para texto normal, 3:1 para texto grande. AAA es un nivel más estricto y opcional: 7:1 para texto normal, 4,5:1 para texto grande.
¿Qué cuenta como «texto grande»?
WCAG define el texto grande como 18pt (24px) en peso normal o mayor, o 14pt (unos 18,66px) en negrita o mayor. El texto grande tiene un requisito de contraste más bajo porque los trazos más grandes y gruesos siguen siendo legibles con menor contraste.
¿Puedo introducir colores en RGB en lugar de hex?
Sí, tanto el campo de primer plano como el de fondo aceptan formatos hex (#3b82f6) o rgb(59, 130, 246), o puedes usar el selector de color junto a cada campo.