Comprueba el contraste entre dos colores con veredicto WCAG AA y AAA para texto normal y grande, y una vista previa en vivo.
Todos los cálculos se hacen en tu propio navegador. Nada sale de tu dispositivo.
La relación de contraste es la diferencia entre la claridad de un color y la claridad de su fondo, expresada como un número del tipo 7,2:1. Es el indicador más importante para la legibilidad del texto: si los valores están muy próximos, el texto se confunde con el fondo; si están muy separados, resalta. WCAG (las directrices de accesibilidad del contenido web) convierte ese número en reglas concretas de aprobación o rechazo para dos tamaños de texto y dos niveles de conformidad, exactamente lo que la tabla de arriba comprueba en tiempo real.
La relación de contraste mide cuánto difieren dos colores en luminosidad percibida, expresado como un número de 1:1 (idénticos) a 21:1 (negro sobre blanco). Si el texto y su fondo son demasiado parecidos, resulta difícil de leer — sobre todo para personas con baja visión o daltonismo, o en pantallas muy iluminadas. WCAG define las relaciones mínimas que el texto debe cumplir para considerarse accesible.
Cada color se convierte en un valor de luminancia relativa con la fórmula de WCAG: los canales R, G y B se linealizan desde sRGB y luego se ponderan (0,2126R + 0,7152G + 0,0722B). La relación es (Lclaro + 0,05) / (Loscuro + 0,05). Esta herramienta hace exactamente ese cálculo en tu navegador.
WCAG considera texto grande el de al menos 18 pt (24 px) en peso normal, o el de al menos 14 pt (unos 18,7 px) en negrita. El texto grande admite una relación mínima más baja (3:1 para AA, 4,5:1 para AAA) porque los glifos grandes se distinguen mejor que los pequeños.
AA (4,5:1 para texto normal) es el mínimo legal en muchas regiones y cubre a la inmensa mayoría de usuarios. AAA (7:1) es el estándar de oro para productos nuevos, documentación y todo aquello donde la legibilidad sea crítica — resulta cómodo para usuarios mayores y personas con discapacidad visual. Ante la duda, apunta a AAA.
No. Los selectores de color solo producen colores totalmente opacos, así que la relación siempre es entre dos colores sólidos. Si tu diseño usa canal alfa, aplánalo primero sobre el fondo real y luego comprueba aquí el par de colores resultante.
Si acabas de usar Verificador de contraste de color, los siguientes pasos naturales son Generador de paletas de color, Convertidor de colores, Generador de gradientes CSS, o explora todas las herramientas de Herramientas de archivos.