Comprobador de contraste de color - WCAG AA y AAA

Cargando herramienta…

Comprueba el contraste de color según WCAG

El texto con poco contraste es uno de los problemas de accesibilidad más comunes en la web. El comprobador de contraste de QodeCat calcula la relación de contraste exacta de WCAG 2.1 entre dos colores y te muestra qué criterios de conformidad cumplen.

AA texto normal: al menos 4,5:1.
AA texto grande (24px o 18,66px en negrita): al menos 3:1.
AAA texto normal: al menos 7:1; AAA texto grande: al menos 4,5:1.
Componentes de interfaz y gráficos (iconos, bordes de campos, anillos de foco): al menos 3:1.

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

La fórmula oficial

Cada color se convierte a su luminancia relativa con la curva sRGB que define WCAG. La relación es (color más claro + 0,05) dividido entre (color más oscuro + 0,05) y va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Nunca se redondea hacia arriba, así que 4,48:1 no aprueba AA.

Corrige rápido los colores que no aprueban

Si una combinación de colores no aprueba AA, la herramienta busca el color de texto más claro u oscuro más cercano que sí lo hace, manteniendo el tono y la saturación. Aplícalo con un clic y ajústalo después como quieras.

Preguntas frecuentes

P. ¿Qué formatos de color puedo introducir?

Códigos HEX como #333 o #1a2b3c y valores rgb() como rgb(26, 43, 60). También puedes usar el selector de color junto a cada campo.

P. ¿Qué se considera texto grande?

WCAG define el texto grande como al menos 18pt (24px) normal o 14pt (unos 18,66px) en negrita. El texto grande solo necesita una relación de 3:1 para AA.

P. ¿Es suficiente con AA?

AA es el nivel que exigen la mayoría de leyes y normativas. AAA es más estricto y se recomienda para textos largos y para personas con baja visión.