Verificador de Contraste de Color (WCAG)

Verifica si un par de colores de primer plano y fondo cumple con los estándares de accesibilidad WCAG AA y AAA.

Estudio · entorno neutro

Relación de contraste

— : 1

AA · texto normal ≥ 4.5

AA · texto grande ≥ 3.0

AAA · texto normal ≥ 7.0

AAA · texto grande ≥ 4.5

Corrección en un clic · conserva el tono

Color del texto

Fondo

Muestra

Características

Muestra la relación de contraste

Estado WCAG AA y AAA

Vista previa del texto en directo

Texto normal y texto grande

Cómo Usar

1. Define los colores de texto y fondo — la muestra y el veredicto WCAG se actualizan al instante.

2. Cambia de muestra (tipografía / artículo / interfaz) para juzgar el par en un uso realista; pulsa S para intercambiar los dos colores.

3. Si algún nivel falla, usa la corrección en un clic — solo ajusta la luminosidad y conserva el tono — o copia el informe WCAG.

Sobre esta herramienta

Un texto con un brillo demasiado parecido al de su fondo cuesta leerlo a todo el mundo y resulta imposible para algunas personas. Las Pautas de Accesibilidad para el Contenido Web (WCAG) lo miden con una relación de contraste de 1:1 a 21:1, basada en la luminancia relativa de los dos colores. El nivel AA exige al menos 4,5:1 para el texto normal y 3:1 para el texto grande (24 px, o unos 18,66 px en negrita); el nivel AAA lo eleva a 7:1 y 4,5:1. Este comprobador calcula la relación en directo, muestra si se cumple cada uno de los cuatro umbrales y presenta una muestra tipográfica, un artículo y una interfaz reales para que juzgues la combinación en contexto. Si un nivel no se cumple, sugiere el color de texto más cercano que sí lo cumple cambiando solo la luminosidad.

Preguntas Frecuentes

¿Cómo se calcula la relación de contraste?

Cada color se convierte en luminancia relativa con la fórmula sRGB de WCAG 2 y la relación es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es el color más claro. Negro sobre blanco da el máximo de 21:1; dos colores idénticos dan 1:1.

¿Qué se considera texto grande?

WCAG define como texto grande el de al menos 18 puntos (24 píxeles CSS) en peso normal, o 14 puntos (unos 18,66 píxeles CSS) en negrita. El texto grande solo necesita 3:1 para AA y 4,5:1 para AAA, porque las letras más grandes se leen con más facilidad.

¿Cumplir AA significa que mi diseño es accesible?

El contraste es un requisito entre muchos. Las fuentes finas, el texto sobre fotos, los tamaños pequeños y el color como única señal pueden seguir causando problemas, así que prueba pantallas reales y combina el contraste con otras comprobaciones de accesibilidad.

¿Cómo funciona la corrección sugerida?

Mantiene el tono de tu color de texto y busca versiones más claras u oscuras hasta alcanzar la relación objetivo. Si ningún valor de luminosidad lo consigue con tu fondo, la herramienta lo indica y tendrás que cambiar el fondo.

¿Las reglas de contraste se aplican a iconos y botones?

Sí. WCAG 2.1 pide al menos 3:1 para los elementos no textuales con significado, como iconos, bordes de campos e indicadores de foco. Los gráficos puramente decorativos y los controles desactivados están exentos.