¿Qué es el ratio de contraste de color WCAG?
El ratio de contraste mide hasta qué punto dos colores se distinguen entre sí, normalmente un texto frente a su fondo. Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.x) utilizan este ratio para fijar umbrales mínimos que garanticen que el contenido siga siendo legible para personas con baja visión o deficiencias en la percepción del color. Los valores van desde 1:1 (los dos colores son idénticos) hasta 21:1 (negro puro sobre blanco puro).
Cómo usar esta calculadora
Introduce el color de primer plano (el texto) y el color de fondo como valores hexadecimales, por ejemplo #1a73e8 o la versión abreviada #fff. La calculadora linealiza cada color, calcula su luminancia relativa y devuelve el ratio de contraste junto con una verificación de cumplimiento (apto/no apto) para cada umbral de las WCAG.
La fórmula explicada
El ratio es \(\frac{L_1 + 0{,}05}{L_2 + 0{,}05}\), donde \(L_1\) es la luminancia relativa del color más claro y \(L_2\) la del más oscuro.
$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \end{aligned} \right.$$La luminancia relativa se obtiene convirtiendo cada canal sRGB a un valor entre 0 y 1, linealizándolo (los canales con valor igual o inferior a \(0{,}03928\) se dividen entre \(12{,}92\); los canales más claros usan \(\left(\frac{c+0{,}055}{1{,}055}\right)^{2{,}4}\)) y combinándolos como \(0{,}2126\cdot R + 0{,}7152\cdot G + 0{,}0722\cdot B\). Los incrementos de \(0{,}05\) evitan la división por cero y modelan el reflejo ambiental de la pantalla.
$$L = 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin}$$$$c_{lin} = \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases}$$
Ejemplo práctico
Texto negro (#000000) sobre fondo blanco (#FFFFFF): el negro tiene una luminancia de 0 y el blanco de 1. El ratio es
$$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = \mathbf{21{:}1}$$el máximo posible, que supera holgadamente todos los niveles.
Preguntas frecuentes
¿Qué contraste necesito? El nivel AA de las WCAG exige 4,5:1 para texto normal y 3:1 para texto grande (≥18pt o 14pt en negrita). El nivel AAA exige 7:1 y 4,5:1 respectivamente.
¿Importa el orden de los colores? No. La fórmula siempre divide la luminancia más clara entre la más oscura, así que intercambiar el primer plano y el fondo da el mismo ratio.
¿Por qué no sirve un simple cálculo de brillo? La percepción humana del color no es lineal y da más peso al verde, por eso la luminancia recurre a la corrección gamma y a coeficientes específicos para cada canal en lugar de una media simple.
