Verificador de contraste

Un verificador de contraste compara dos colores, uno de primer plano y otro de fondo, y te dice si un texto escrito con ellos es legible. Calcula la relación de contraste WCAG y la compara con los cuatro umbrales estándar: AA para texto normal, AA para texto grande, AAA para texto normal y AAA para texto grande. Elige los colores con los selectores o escribe los códigos HEX directamente, y observa cómo se actualiza la vista previa al momento.

¿Cómo se calcula la relación?

La herramienta sigue al pie de la letra la fórmula de WCAG 2. Los canales sRGB de cada color se linealizan (deshaciendo la curva gamma que aplican los monitores) y se combinan en una luminancia relativa usando los pesos estándar de 21,26% para el rojo, 71,52% para el verde y 7,22% para el azul, que reflejan la distinta sensibilidad del ojo humano a cada canal. Luego se compara la luminancia más clara de las dos con la más oscura, sumando una pequeña constante a ambas para tener en cuenta la luz ambiental, lo que da una relación entre 1:1 (colores idénticos) y 21:1 (negro puro sobre blanco). Esa relación se compara con cuatro límites: 4,5:1 para AA en texto normal, 3:1 para AA en texto grande, 7:1 para AAA en texto normal y 4,5:1 para AAA en texto grande. Solo se aceptan colores HEX de 3 y 6 dígitos; el cálculo no necesita alfa ni otras notaciones porque siempre compara dos colores completamente opacos.

¿Se sube mi color a algún sitio?

No. Todo el cálculo se ejecuta en tu navegador con unas pocas líneas de matemáticas, sin enviar nada a un servidor. Los colores que compruebas nunca salen de tu equipo, así que puedes verificar colores de marca de un sistema de diseño interno o la paleta de un cliente sin enviarlos a ningún sitio.

¿Qué cuenta como texto grande según WCAG?

WCAG define el texto grande como 18pt (24px) en peso regular, o 14pt (18,66px) en negrita hacia arriba, y por eso tiene un umbral más permisivo que el texto de cuerpo: los trazos más gruesos y grandes siguen siendo legibles con menos contraste. Úsalo para confirmar que el texto de un diseño cumple con AA antes de publicarlo, comprobar si la etiqueta de un botón es legible sobre su fondo, o auditar la accesibilidad de la paleta de colores de un sitio existente. Consulta la guía Understanding Contrast Minimum del W3C para ver la fórmula exacta y el razonamiento detrás de los umbrales, o el artículo de WebAIM sobre contraste para una explicación en lenguaje llano.