Qué es el contraste de color
El contraste de color mide cuánta diferencia de luminosidad hay entre el texto y el fondo sobre el que se muestra. Se expresa como un ratio que va desde 1:1 (dos colores idénticos, texto invisible) hasta 21:1 (negro puro sobre blanco puro, el máximo posible). Cuanto mayor es el número, más fácil resulta leer el texto, sobre todo para personas con baja visión, daltonismo o cuando se lee bajo el sol en la pantalla del móvil.
Las Pautas de Accesibilidad para el Contenido Web (WCAG) fijan valores mínimos que un sitio debe cumplir para considerarse accesible. Este verificador calcula el ratio exacto entre dos colores y te dice al instante si aprueba los niveles AA y AAA, tanto para texto normal como grande. Todo el cálculo ocurre en tu navegador: no se envía ningún dato a un servidor.
Cómo usar el verificador
- Elige el color de texto con el selector o escribiendo su código HEX (por ejemplo
#333333o el atajo de tres dígitos#333). - Elige el color de fondo de la misma forma.
- Lee el ratio de contraste y consulta la tabla de resultados: verde significa que pasa, rojo que falla.
- Usa Invertir colores si quieres comprobar la combinación al revés, y revisa la vista previa para ver el texto real sobre el fondo.
Cómo se calcula (WCAG)
El método tiene tres pasos. Primero se convierte cada canal (R, G, B) de 0–255 a la escala 0–1 y se linealiza:
c = canal / 255 y luego c/12.92 si c ≤ 0,03928; en caso contrario ((c + 0,055) / 1,055) ^ 2,4.
Después se calcula la luminancia relativa de cada color:
L = 0,2126·R + 0,7152·G + 0,0722·B
Y por último el ratio, siendo L1 el color más claro y L2 el más oscuro:
ratio = (L1 + 0,05) / (L2 + 0,05)
Ejemplo resuelto
Tomemos un gris #777777 sobre fondo blanco #ffffff. La luminancia del blanco es 1,0. Para el gris, cada canal vale 119, así que 119 / 255 = 0,4667 y ((0,4667 + 0,055) / 1,055) ^ 2,4 ≈ 0,1845. El ratio queda:
ratio = (1,0 + 0,05) / (0,1845 + 0,05) = 1,05 / 0,2345 ≈ 4,48:1
Ese 4,48:1 se queda justo por debajo del mínimo AA para texto normal (4,5:1), aunque sí aprueba AA para texto grande. Es el ejemplo perfecto de por qué conviene medir y no fiarse del ojo. Como referencia, negro sobre blanco da el máximo de 21:1.
Texto normal frente a texto grande
WCAG exige menos contraste al texto grande porque sus trazos más gruesos ya son más legibles.
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Se considera texto grande a partir de 18 pt (24 px), o 14 pt (18,66 px) si está en negrita.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
Para la mayoría de sitios, el objetivo práctico es AA: al menos 4,5:1 en texto normal y 3:1 en texto grande. AAA (7:1) es más estricto y se reserva para contenidos donde la legibilidad es crítica. Si apuntas a AA en todo, cumples con la mayoría de leyes de accesibilidad.
¿Por qué el texto grande necesita menos contraste?
Porque las letras grandes o en negrita tienen trazos más anchos y se distinguen mejor del fondo aunque la diferencia de luminosidad sea menor. Por eso WCAG rebaja el umbral de 4,5:1 a 3:1 para AA cuando el texto es grande.
¿Cómo mejoro un contraste que falla?
Oscurece el texto o aclara el fondo (o al revés): mueve uno de los dos colores hacia el negro o el blanco puro. Basta con ajustar la luminosidad manteniendo el tono para no perder tu identidad de marca. Cada paso hacia los extremos sube el ratio; comprueba el número aquí hasta que la fila que te interesa se ponga verde.
¿El contraste sirve para los iconos y bordes?
Sí. WCAG pide al menos 3:1 para componentes de interfaz y gráficos esenciales (bordes de campos, iconos, indicadores de foco). Puedes usar este verificador poniendo el color del elemento como “texto” y su fondo adyacente como “fondo”.