El verificador de contraste de color comprueba si la relación de contraste entre el color de primer plano (texto, iconos) y el color de fondo cumple los estándares de accesibilidad WCAG, mostrando el valor del ratio y el estado de aprobación o fallo para los niveles AA y AAA. Es una herramienta habitual en revisiones de diseño de interfaces y auditorías de accesibilidad.
Los umbrales WCAG que importan en la práctica
Las relaciones de contraste WCAG van de 1:1 (sin contraste, como blanco sobre blanco) a 21:1 (negro sobre blanco). Los umbrales que comprobarás con más frecuencia:
- AA texto normal — ≥ 4,5:1: cubre la mayoría de requisitos de cumplimiento de sitios web y apps
- AA texto grande — ≥ 3:1: se aplica a texto de 18 pt (≈ 24 px) o mayor, o 14 pt (≈ 18,5 px) en negrita
- AAA texto normal — ≥ 7:1: para cuerpo de texto y contextos de alta accesibilidad
- AAA texto grande — ≥ 4,5:1
La herramienta comprueba las tres categorías de contenido de forma independiente: texto normal, texto grande y componentes de UI (iconos, bordes de botones, elementos de gráficos).
Usar el deslizador de brillo para corregir ratios que fallan
El deslizador de brillo junto a cada selector de color ajusta el canal de luminosidad (L en HSL) manteniendo el tono y la saturación sin cambios. Cuando un ratio no alcanza el umbral, subir el deslizador del color de texto (más claro) o bajar el del color de fondo (más oscuro) es el camino más rápido hacia el cumplimiento sin elegir un color completamente nuevo.
Por ejemplo, el azul corporativo #3B82F6 sobre fondo blanco da un ratio de aproximadamente 3,0:1, que no supera AA para texto normal. Oscureciéndolo a #1D4ED8 el ratio sube a unos 5,3:1 y ya pasa AA.
Nivel AA (mayoría de contextos)
- Texto normal: ≥ 4,5:1
- Texto grande (≥ 24 px o ≥ 18,5 px en negrita): ≥ 3:1
- Componentes de UI e iconos: ≥ 3:1
- Cubre los criterios de éxito WCAG 2.1 1.4.3 y 1.4.11
Nivel AAA (requisitos elevados)
- Texto normal: ≥ 7:1
- Texto grande: ≥ 4,5:1
- Adecuado para contextos médicos, gubernamentales y educativos
- No es un objetivo universal — limita la flexibilidad de diseño
Cuando pasar el contraste no significa visualmente claro
El cálculo del contraste usa luminancia relativa. Algunos pares — como el rojo puro #FF0000 sobre negro — alcanzan el umbral del ratio pero son difíciles de leer para personas con deficiencia en la visión del color, porque la diferencia de tono es insuficiente. Revisa siempre la previsualización en vivo junto al número, no solo la insignia de aprobado o fallado.
Objetivos recomendados según el tipo de contenido
El cuerpo del texto se beneficia de alcanzar AAA (7:1) para una lectura extendida cómoda. Los enlaces de navegación y las etiquetas de botones a AA (4,5:1) son suficientes. Los títulos grandes pueden usar el estándar AA para texto grande (3:1). Los elementos puramente decorativos están completamente exentos de los requisitos de contraste WCAG. Un contraste extremadamente alto — como 21:1 negro puro sobre blanco — puede causar fatiga visual en áreas grandes; elige el ratio más bajo que satisfaga el estándar y sea visualmente cómodo.