Verificador de contraste WCAG
Verifica el contraste de colores según normas WCAG.
Texto de ejemplo grande
Este es un texto de ejemplo normal para verificar el contraste según WCAG 2.1.
Texto pequeño para comprobar la legibilidad en tamaños reducidos.
Ratio de contraste
7.00:1
AA Texto normal
Pasa
mínimo 4.5:1
AAA Texto normal
Pasa
mínimo 7:1
AA Texto grande
Pasa
mínimo 3:1
AAA Texto grande
Pasa
mínimo 4.5:1
Verificador de accesibilidad de contraste de colores WCAG
Las pautas de accesibilidad para contenido web (WCAG, por sus siglas en inglés) establecen requisitos mínimos de contraste entre el texto y el fondo para garantizar que el contenido sea legible para todas las personas, incluyendo aquellas con discapacidades visuales como daltonismo o baja visión. Cumplir con estos requisitos no solo mejora la accesibilidad, sino que también es un requisito legal en muchos países y un factor positivo para el SEO.
WCAG define dos niveles de conformidad para el contraste: AA (el estándar recomendado) requiere un ratio mínimo de 4.5:1 para texto normal y 3:1 para texto grande (18px o superior, o 14px en negrita). AAA (el nivel más alto) exige 7:1 para texto normal y 4.5:1 para texto grande. El ratio de contraste se calcula comparando la luminancia relativa de ambos colores utilizando una fórmula estándar definida por el W3C.
Nuestra herramienta calcula el ratio de contraste en tiempo real, muestra una vista previa con texto de diferentes tamaños, y si la combinación no cumple con el nivel AA, sugiere automáticamente el color más cercano al original que sí cumpliría con el requisito. Es una herramienta esencial para diseñadores web, desarrolladores frontend y cualquier persona que quiera asegurarse de que su contenido sea accesible para todos los usuarios.
Preguntas frecuentes
¿Qué es el ratio de contraste WCAG?
Es una medida numérica de la diferencia de luminosidad entre dos colores, expresada como X:1. Un ratio de 1:1 significa que los colores son idénticos (sin contraste), mientras que 21:1 es el máximo posible (negro sobre blanco). Se calcula usando la luminancia relativa de cada color según la fórmula del W3C.
¿Debo cumplir AA o AAA?
El nivel AA es el estándar recomendado y requerido legalmente en muchos contextos. AAA es el nivel ideal pero más difícil de alcanzar en todos los casos. Para la mayoría de sitios web, cumplir AA es suficiente y obligatorio. AAA es recomendable especialmente para contenido gubernamental y de salud.
¿Qué se considera "texto grande"?
Según WCAG, texto grande es aquel con un tamaño de al menos 18pt (24px) o 14pt (18.66px) en negrita. El texto grande tiene requisitos de contraste menos estrictos porque es inherentemente más fácil de leer.
¿Quieres saber más? Lee nuestra guía completa →