Calculadora de contraste WCAG: revisa si tu texto cumple AA y AAA
Comprueba el contraste entre el color del texto y el fondo según WCAG: obtén la relación exacta y si cumple AA y AAA para texto normal y texto grande.
Cómo funciona
relación = (L_clara + 0.05) ÷ (L_oscura + 0.05), donde L es la luminancia relativa de WCAG: 0.2126 R + 0.7152 G + 0.0722 B sobre los canales linealizados
El contraste WCAG compara la luminancia relativa de dos colores, no su brillo a simple vista: cada canal se linealiza desde sRGB, se pondera según cómo lo percibe el ojo (el verde pesa mucho más que el azul) y luego las luminancias clara y oscura entran en la relación con un término de 0.05. La escala va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). El nivel AA pide 4.5:1 para texto normal y 3:1 para texto grande; el AAA sube esos mínimos a 7:1 y 4.5:1. Se considera texto grande el de 18 pt (24 px) normal o 14 pt (unos 18.66 px) en negritas.
Ejemplo resuelto
Sofía quiere usar texto gris #767676 sobre fondo blanco #ffffff. Las luminancias son 0.181 y 1.000, así que la relación es (1.000 + 0.05) ÷ (0.181 + 0.05) = 1.05 ÷ 0.231 ≈ 4.54:1. Cumple AA para todo el texto y AAA solo para texto grande; por eso #767676 es el famoso «gris más claro que aún pasa» sobre blanco.
Fuentes: WCAG 2.1 — Contrast Minimum
Preguntas frecuentes
¿Qué se considera texto grande en WCAG?
Al menos 18 pt (unos 24 px) con peso normal, o 14 pt (unos 18.66 px) en negritas. El texto grande tiene mínimos más fáciles, 3:1 en AA y 4.5:1 en AAA, porque las letras grandes se leen bien con menos contraste.
¿El contraste también aplica a íconos y botones?
Sí. WCAG 2.1 pide 3:1 para gráficos con significado y para los bordes visibles de controles activos (botones, campos de formulario, indicadores de foco); solo las imágenes decorativas quedan exentas.
¿Por qué la luminancia le da tanto peso al verde?
La vista humana es más sensible a la luz verde, así que su coeficiente de 0.7152 supera por mucho al rojo (0.2126) y al azul (0.0722). Dos colores pueden parecer igual de brillantes con un promedio simple y tener un contraste percibido muy distinto.
¿Qué contraste mínimo necesito para cumplir con la accesibilidad?
Para el nivel AA, que es el que exige la mayoría de las normas, 4.5:1 en texto normal y 3:1 en texto grande. Si buscas AAA, apunta a 7:1 en texto normal.
Calculadoras relacionadas
Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.