El contraste de color decide si las personas reales pueden realmente leer tu texto. El Verificador de Contraste de Color mide la razón de contraste WCAG entre dos colores cualesquiera y te indica si el par es seguro para texto normal, texto grande y elementos de interfaz. Esta guía explica de dónde vienen los números, qué significan los umbrales y cómo corregir una combinación que no cumple.
Cómo se calcula la razón de contraste
El contraste no es una simple diferencia de valores de color — se basa en la luminancia relativa, un modelo del brillo percibido. Los canales rojo, verde y azul de cada color se normalizan a 0–1, se convierten de sRGB codificado con gamma a luz lineal, luego se ponderan (0.2126 rojo, 0.7152 verde, 0.0722 azul) y se suman. El verde lleva el mayor peso porque el ojo humano es más sensible a él.
Los dos valores de luminancia alimentan la razón (L_lighter + 0.05) / (L_darker + 0.05). La constante 0.05 toma en cuenta la luz ambiental que se refleja en la pantalla. El resultado va de 1:1 (el mismo color) a 21:1 (negro puro sobre blanco puro). Cuando un color de primer plano es semitransparente, esta herramienta lo compone primero sobre el fondo, porque eso es lo que realmente ve un espectador.
Qué significan los umbrales
WCAG define niveles. Para el texto normal de cuerpo, AA requiere 4.5:1 y AAA requiere 7:1. Para el texto grande — al menos 24px regular o 18.66px en negrita — las barras se relajan a 3:1 (AA) y 4.5:1 (AAA), porque los glifos más grandes son inherentemente más fáciles de leer. Una regla separada, WCAG 1.4.11, establece un mínimo de 3:1 para elementos no textuales: íconos, bordes de campos, indicadores de foco y las partes significativas de gráficos y diagramas.
AA es la línea base práctica. La mayoría de las leyes de accesibilidad — la ADA en EE. UU., la Ley Europea de Accesibilidad, la Sección 508 — apuntan a WCAG AA. Alcanzar AAA en todas partes es admirable pero no siempre alcanzable para los colores de marca; AA para el texto de cuerpo más 3:1 para la interfaz es el objetivo realista para la mayoría de los productos.
Corrigiendo un par que no cumple
Cuando una combinación no cumple, el culpable habitual es un color de primer plano demasiado cercano en claridad al fondo. La corrección más limpia es ajustar la claridad del color de texto conservando su tono, para que el diseño siga sintiéndose fiel a la marca. La pestaña Sugerencias de Corrección de esta herramienta hace exactamente eso — va oscureciendo y aclarando el color de texto hasta cruzar 4.5:1, y reporta el cambio más pequeño que aprueba.
Dos advertencias. Primero, el contraste es necesario pero no suficiente: el color nunca debería ser la única forma de señalar el significado, ya que los usuarios con daltonismo pueden no percibir la diferencia. Segundo, las imágenes de fondo grandes y los degradados burlan una verificación de razón única — prueba el punto más desfavorable donde el texto se superpone con la parte más clara o más oscura de la imagen.