Verificador de Contraste WCAG
Comprueba el ratio de contraste entre texto y fondo según WCAG AA y AAA — con vista previa en vivo en tamaño normal y grande.
799 visitas
El rápido zorro marrón salta sobre el perro perezoso
Ejemplo de texto grande 24px
Qué significa el ratio
El ratio de contraste compara la luminancia relativa de dos colores, de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG exige 4,5:1 para texto normal (AA) y 3:1 para texto grande (≥24 px, o ≥18,7 px en negrita); el nivel AAA, más estricto, pide 7:1 y 4,5:1. Los componentes de interfaz y los gráficos necesitan 3:1 frente a los colores adyacentes.
El cálculo linealiza cada canal sRGB, los pondera (L = 0,2126R + 0,7152G + 0,0722B) y calcula (L₁+0,05)/(L₂+0,05). La intuición suele fallar aquí — un gris medio #777 sobre blanco parece perfectamente legible a simple vista, pero obtiene 4,48:1, justo por debajo de AA. Los márgenes existen para usuarios con baja visión, la luz solar y pantallas de baja calidad.
Preguntas Frecuentes
¿Cambia el ratio si intercambio el texto y el fondo?
No — la fórmula siempre coloca el color más claro en el numerador, así que el ratio es simétrico. La legibilidad puede sentirse distinta de forma subjetiva (halo de texto claro sobre fondo oscuro), pero la puntuación WCAG es idéntica.
¿Qué se considera texto grande?
24 px (18 pt) en regular, o unos 18,7 px (14 pt) en negrita en adelante. El texto grande solo necesita 3:1 en AA porque los glifos más grandes siguen siendo legibles con menos contraste.
Mi color de marca no pasa la prueba, ¿qué hago?
Consérvalo para elementos decorativos y oscurece o aclara su uso en texto hasta que apruebe; una escala de tintes/sombras ayuda. El texto de marcador de posición y los estados deshabilitados están exentos del requisito, pero conviene mantenerlos razonables.
Herramientas Similares
Reportar un Problema
Verificador de Contraste WCAG