¿Qué es la calculadora de relación de contraste?
Esta herramienta calcula la relación de contraste de color entre un color de primer plano y un color de fondo aplicando la fórmula oficial de las WCAG 2.x (las pautas de accesibilidad para el contenido web). La relación de contraste es una métrica clave de accesibilidad: indica si un texto resultará legible para personas con baja visión o con deficiencias en la percepción del color. Los valores van desde 1:1 (colores idénticos, texto invisible) hasta 21:1 (negro puro sobre blanco puro).
Cómo usarla
Introduce los componentes rojo, verde y azul (0–255) del color de tu texto (primer plano) y del color de fondo. La calculadora linealiza cada canal, calcula la luminancia relativa de ambos colores y divide el más claro entre el más oscuro tras sumar la constante de luz ambiental de 0,05. A continuación te indica si la combinación supera los niveles AA y AAA de las WCAG para texto normal y texto grande.
La fórmula explicada
La relación de contraste es $$\text{Contraste} = \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. La luminancia relativa se obtiene escalando primero cada canal al rango 0–1 y aplicando después una transformación gamma: si el valor escalado es \(\le 0{,}03928\) se divide entre 12,92; en caso contrario se eleva mediante \(\left(\frac{c+0{,}055}{1{,}055}\right)^{2{,}4}\). Los canales ya linealizados se combinan como $$L = 0{,}2126 \cdot R + 0{,}7152 \cdot G + 0{,}0722 \cdot B,$$ una ponderación que refleja la mayor sensibilidad del ojo humano al verde.
Ejemplo práctico
Texto negro (0,0,0) sobre fondo blanco (255,255,255): la luminancia del negro \(= 0\) y la del blanco \(= 1\). Relación = $$\frac{1 + 0{,}05}{0 + 0{,}05} = \frac{1{,}05}{0{,}05} = 21{:}1,$$ el contraste máximo posible, que supera con holgura todos los niveles de las WCAG.
Preguntas frecuentes
¿Qué relación necesito? El nivel AA de las WCAG exige 4,5:1 para texto normal y 3:1 para texto grande (≥18 pt o 14 pt en negrita). El nivel AAA requiere 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 resultado.
¿Por qué se suma 0,05? Esta constante modela el reflejo de luz ambiental de la pantalla, de modo que incluso el negro puro sobre negro puro produzca un valor definido y no infinito.
