Comprobador de contraste de color WCAG (AA y AAA)
Comprueba la relación de contraste de color según la WCAG 2.1 para verificar el cumplimiento de los niveles AA y AAA. Funciona al instante y enteramente en tu navegador, sin subir nada a ningún servidor.
Cómo usar esta herramienta
- Enter a foreground (text) colour and a background colour as hex values, or pick them with the swatches.
- The tool computes the relative luminance of each colour and divides them to get the contrast ratio.
- Read the ratio and the pass/fail badges for WCAG AA and AAA at normal and large text sizes.
Sample text — Aa Bb Cc
The quick brown fox jumps over the lazy dog
21.00:1
WCAG 2.1 — Large text is 18pt+ or 14pt+ bold. All calculations run in your browser.
Acerca de Comprobador de contraste de color
El comprobador de contraste de color calcula la relación de contraste entre un color de texto y su fondo, y te dice si cumple los criterios de la WCAG 2.1 en los niveles AA y AAA. La accesibilidad web exige un contraste suficiente para que el texto sea legible para personas con baja visión o daltonismo, y esta herramienta te muestra de inmediato si tu combinación de colores supera el umbral o necesita ajustarse.
Introduces el color de texto y el de fondo y obtienes la relación de contraste expresada como una proporción (por ejemplo, 4,5:1), junto con el resultado de cada nivel. La WCAG 2.1 fija un mínimo de 4,5:1 para texto normal en nivel AA y de 3:1 para texto grande, mientras que el nivel AAA, más estricto, exige 7:1 para texto normal y 4,5:1 para texto grande. Así sabes con exactitud qué nivel de conformidad alcanza tu diseño.
Todo el cálculo es instantáneo y se ejecuta enteramente en tu navegador, sin subir nada a ningún servidor: tus valores de color nunca abandonan tu dispositivo. Es una herramienta de apoyo para diseñadores y desarrolladores que quieren validar paletas accesibles; para una auditoría completa de accesibilidad conviene combinarla con pruebas con usuarios reales y otras comprobaciones de la WCAG.
Preguntas frecuentes
- ¿Qué es la relación de contraste?
- Es una medida de la diferencia de luminancia entre un color de texto y su fondo, expresada como una proporción que va desde 1:1 (sin contraste) hasta 21:1 (negro sobre blanco). Cuanto mayor es la proporción, más legible resulta el texto.
- ¿Qué relación de contraste exige el nivel AA?
- La WCAG 2.1 exige al menos 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA. El texto grande se considera, en general, a partir de 18 pt (o 14 pt en negrita).
- ¿En qué se diferencia el nivel AAA del AA?
- El nivel AAA es más exigente: requiere una relación de 7:1 para texto normal y de 4,5:1 para texto grande. Es el estándar de máxima accesibilidad y no siempre es alcanzable en todos los elementos de un diseño.
- ¿Se suben mis colores o mi diseño a un servidor?
- No. La comprobación se ejecuta enteramente en tu navegador y no se sube nada, así que tus valores de color nunca abandonan tu dispositivo.
- ¿Basta con pasar esta comprobación para tener una web accesible?
- El contraste de color es un criterio importante de la WCAG, pero no el único. Garantiza la legibilidad del texto, aunque una accesibilidad completa requiere atender también la navegación por teclado, los textos alternativos, la estructura semántica y otros criterios de la norma.