Comprobador de Contraste de Color (WCAG)
Comprueba si tu texto es legible: elige un color de texto y otro de fondo y obtén el ratio de contraste WCAG 2.1 al instante, con apto/no apto para AA y AAA en tamaño normal, grande y componentes de interfaz. Una vista previa en vivo muestra exactamente cómo se ve la combinación.
🔒 100% privado — tus archivos nunca salen de tu navegador
Ratio de contraste
—
Texto normal — el veloz murciélago hindú comía feliz cardillo y kiwi.
Muestra de texto grande 24px
AA: 4.5:1 normal · 3:1 grande (≥18 pt o ≥14 pt en negrita) · AAA: 7:1 normal · 4.5:1 grande.
Cómo usar Comprobador de contraste WCAG
- 1 Elige el color de texto y el de fondo (o pega códigos HEX).
- 2 Lee el ratio de contraste y los veredictos AA / AAA para texto normal, texto grande y componentes de interfaz.
- 3 Ajusta hasta que la combinación pase — la vista previa en vivo muestra la combinación a tamaños reales.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
WCAG 2.1 exige 4.5:1 para texto normal (AA), 3:1 para texto grande (18 pt / 14 pt en negrita, AA) y 7:1 para el nivel estricto AAA. Los componentes de interfaz y los objetos gráficos necesitan 3:1.
¿Cómo se calcula el ratio?
La luminancia relativa de cada color se calcula con la fórmula WCAG (linealización sRGB y suma ponderada) y se compara como (L1 + 0.05) / (L2 + 0.05). El cálculo se ejecuta localmente mientras escribes.
Mi combinación no pasa — ¿qué puedo cambiar?
Las soluciones más rápidas: oscurecer el color del texto, aclarar el fondo (o al revés) o aumentar el tamaño de la fuente para que se aplique el umbral de 3:1 de texto grande. Los tintes y sombras de la herramienta Convertidor de color te ayudan a encontrar un vecino que pase rápidamente.