Guía del Verificador de Contraste WCAG: Requisitos AA/AAA y Cómo Corregir Fallos
Aprende los requisitos de contraste WCAG 2.1, cómo calcular ratios de contraste, fallos comunes y soluciones prácticas para texto, componentes UI y paletas de colores completas.
El contraste de colores es el fallo de accesibilidad más común en la web. Según el análisis anual de accesibilidad de WebAIM, el contraste bajo afecta a más del 80% de las páginas de inicio. Sin embargo, también es uno de los problemas más fáciles de solucionar — si conoces las reglas y tienes las herramientas adecuadas. Esta guía explica los requisitos de contraste WCAG, cómo funcionan los ratios de contraste y cómo corregir fallos sin rediseñar toda tu paleta.
¿Qué es el contraste de color y por qué importa?
El contraste de color es la diferencia de luminancia (brillo percibido) entre el texto y su fondo. El alto contraste hace que el texto sea legible para todos — incluyendo usuarios con visión reducida, daltonismo o que ven pantallas a plena luz solar.
Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 definen ratios mínimos de contraste para asegurar la legibilidad. Cumplir estos estándares no es solo una buena práctica — es legalmente requerido bajo la Ley de Estadounidenses con Discapacidades (ADA), la Sección 508 y leyes similares en todo el mundo.
Requisitos de contraste WCAG
WCAG define dos niveles de conformidad para el contraste:
Nivel AA (estándar mínimo)
Texto normal (menor a 18pt o menor a 14pt en negrita):
- Ratio de contraste mínimo: 4.5:1
Texto grande (18pt+ o 14pt+ en negrita):
- Ratio de contraste mínimo: 3:1
Componentes UI y objetos gráficos:
- Ratio de contraste mínimo: 3:1 (adición WCAG 2.1)
Nivel AAA (estándar mejorado)
Texto normal: 7:1 mínimo
Texto grande: 4.5:1 mínimo
La mayoría de organizaciones apuntan a Nivel AA como base. AAA se recomienda para aplicaciones con mucho texto y productos que sirven a usuarios con discapacidad visual.
Cómo se calculan los ratios de contraste
El ratio de contraste es la luminancia relativa del color más claro dividida por la luminancia del color más oscuro, expresado como ratio de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
No necesitas calcularlo manualmente. Usa nuestro Verificador de Contraste WCAG para probar múltiples pares de colores instantáneamente.
Ejemplos
| Texto | Fondo | Ratio | AA Normal | AA Grande | AAA Normal |
|---|---|---|---|---|---|
#000000 |
#FFFFFF |
21:1 | ✅ Pasa | ✅ Pasa | ✅ Pasa |
#767676 |
#FFFFFF |
4.54:1 | ✅ Pasa | ✅ Pasa | ❌ Falla |
#3B82F6 |
#FFFFFF |
3.15:1 | ❌ Falla | ✅ Pasa | ❌ Falla |
#1E40AF |
#FFFFFF |
7.04:1 | ✅ Pasa | ✅ Pasa | ✅ Pasa |
Fallos comunes y soluciones
Texto gris claro sobre blanco
Fallo: color: #999999 sobre blanco = 2.85:1 — Falla AA.
Solución: Oscurecer a #767676 (4.54:1) para AA o #595959 (7.0:1) para AAA.
Colores de marca sobre blanco
Fallo: color: #3B82F6 (Tailwind blue-500) sobre blanco = 3.15:1 — Falla AA texto normal.
Solución: Usar para texto grande solamente, o oscurecer a #1E40AF (blue-700, 7.04:1) para texto del cuerpo.
Usa el Verificador de Contraste por Lotes para probar toda tu paleta en segundos.