El Verificador de contraste WCAG es una herramienta de dos cajas. La página tiene un campo de color de primer plano y un campo de color de fondo, cada uno con un selector de color y una caja de texto, y debajo los resultados: una vista previa en vivo, la relación de contraste y una cuadrícula de cuatro tarjetas de superado o no superado. No hay botón de ejecutar y nada que configurar; cambia cualquiera de los dos colores y todos los números se actualizan con la misma tecla. Nada se envía a ningún sitio: la matemática de luminancia corre en el navegador del dispositivo.
Los dos colores de entrada y la vista previa en vivo
El primer plano es el color del texto y el fondo es lo que hay detrás, y los valores por defecto son negro sobre blanco, #000000 sobre #FFFFFF. Cada campo acepta un hexadecimal de tres dígitos como #F00 o de seis como #767676, y el carácter inicial # es opcional, así que 000000 se interpreta igual que #000000. Junto a cada caja hay un selector de color que la rellena por ti. En cuanto ambos colores son válidos aparece el área de resultados: una vista previa que pinta texto de muestra en la pareja elegida a tres tamaños, la relación y las cuatro tarjetas WCAG. Si un campo contiene algo que no es un hexadecimal de tres o seis dígitos, el área de resultados entera desaparece en vez de mostrar una suposición.
Cómo se calcula la relación de contraste
La herramienta sigue la fórmula estándar de WCAG. Cada color hexadecimal se convierte en valores rojo, verde y azul de 0 a 255, cada canal se linealiza de la curva sRGB y los tres canales se ponderan en una luminancia relativa con los coeficientes 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul. La relación es la luminancia más clara más 0.05 dividida entre la luminancia más oscura más 0.05, por lo que siempre es al menos 1 y nunca supera 21, la distancia entre el negro puro y el blanco puro. El número se muestra con dos decimales, seguido de dos puntos y un uno, así que el negro sobre blanco se lee 21.00:1 y un color sobre sí mismo 1.00:1. La relación no depende de qué color se llame primer plano: intercambiar las dos cajas da el mismo número.
Los cuatro umbrales fijos y sus valores límite
Cuatro tarjetas juzgan la relación contra cuatro mínimos fijos: AA para texto normal a 4.5:1, AA para texto grande a 3:1, AAA para texto normal a 7:1 y AAA para texto grande a 4.5:1, y cada tarjeta muestra su mínimo bajo el veredicto. Los límites son inclusivos: una relación que cae justo en el mínimo pasa. Los valores que encontrarás en la práctica: #767676 sobre blanco es 4.54:1 y pasa AA normal, mientras que #777777 sobre blanco es 4.48:1 y no pasa, a un paso hexadecimal de la línea. #808080 sobre blanco es 3.95:1, solo texto grande, y #595959 sobre blanco es 7.00:1, que pasa las cuatro tarjetas, incluida AAA normal.
Qué significa texto grande para las tarjetas de 3:1 y 4.5:1
El texto grande en el sentido de WCAG es al menos 18 puntos en regular o 14 puntos en negrita, lo que equivale a unos 24px en regular o 19px en negrita. La herramienta no mide tamaños de letra ni tiene un campo para ellos; siempre calcula los cuatro veredictos, así que leer el resultado es una acción de dos pasos. Primero mira las cuatro tarjetas y luego decide cuál de los dos tamaños reales de tu diseño se usa: si el texto es grande, aplican las tarjetas grandes de 3:1 y 4.5:1; si es de tamaño normal, aplican las tarjetas normales de 4.5:1 y 7:1. Una relación de 4:1, por ejemplo, pasa la tarjeta AA de texto grande, no pasa la AA de texto normal y no pasa las dos tarjetas AAA.
Casos límite: hexadecimal inválido y colores iguales
El analizador solo acepta un hexadecimal de tres o seis dígitos tras quitar un # inicial, así que todo lo demás oculta los resultados: cinco dígitos, ocho dígitos con canal alfa y letras que no son hexadecimales dejan la página con solo las dos cajas de entrada. Un primer plano y un fondo idénticos dan 1.00:1 y no pasan las cuatro tarjetas, que es el veredicto honesto para un texto del mismo color que su fondo. Las mayúsculas y minúsculas hexadecimales se tratan igual y la abreviatura de tres dígitos se expande dígito a dígito, así que #F00 es #FF0000. No hay mensaje de validación en el área de resultados; el ocultamiento es la única señal, y conviene saberlo cuando te preguntes adónde fueron las tarjetas.
Solo en el cliente, nada se guarda
Los dos valores hexadecimales nunca salen del navegador. No hay envío, ni historial, ni pares guardados ni botón de copiar; el cálculo es una función pura de las dos entradas actuales y recargar la página devuelve los valores por defecto de negro sobre blanco. Tampoco hay un control de intercambio entre los dos campos, así que para invertir un par hay que volver a teclear los dos valores, y no hay ningún motor de sugerencias que te diga el color más cercano que pasa: la herramienta informa la relación y los cuatro veredictos, y el ajuste te toca a ti.
Qué guarda la herramienta y a dónde ir a continuación
No guarda nada: no se hace ninguna petición de red, no se almacena nada y recargar la página devuelve los campos a #000000 y #FFFFFF. Para el resto del flujo de trabajo de color y CSS, el Convertidor de colores mueve un valor hexadecimal entre HEX, RGB y HSL, el Convertidor de unidades CSS convierte entre px, rem, em y pt para que puedas comprobar tus tamaños de letra contra la línea de texto grande, y el Formatador CSS ordena la hoja de estilos que lleva estos colores. Para una mirada más amplia al lado de marcado de la misma página, consulta la guía de formateado de HTML.