Verificador de contraste WCAG online: AA 4.5:1, AAA 7:1, texto grande 3:1
Las reglas de contraste WCAG parecen un solo número, pero el umbral depende del tamaño del texto y no apruebas con un degradado a la ligera. Dos ratios cubren casi toda la norma.
AA, AAA y qué significa cada uno
WCAG 2.1 AA es el nivel que la mayoría de jurisdicciones exigen por ley. Pide un ratio de contraste de 4.5:1 entre el texto y su fondo para texto de tamaño normal, y 3:1 para texto grande. Texto grande significa 18 puntos o más, o 14 puntos o más si es negrita. En píxeles CSS son aproximadamente 24 px o 18.66 px en negrita.
WCAG AAA es el escalón estricto, frecuente en proyectos de administración pública y accesibilidad como prioridad. Sube el ratio a 7:1 para texto normal y 4.5:1 para texto grande. AAA es más difícil de respetar en diseño porque la mayoría de paletas de marca no sobreviven un corte a 7:1 contra blanco.
Componentes UI no textuales y elementos gráficos necesitan 3:1 contra los colores adyacentes a cualquier tamaño. Eso cubre bordes de formulario, focus rings, trazos de iconos y elementos de gráficas.
La fórmula en palabras simples
El ratio de contraste se calcula a partir de la luminancia relativa. Coge el RGB lineal de cada color, pondera los canales (rojo 0.2126, verde 0.7152, azul 0.0722, tras la linearización sRGB), y obtienes un número de luminancia entre 0 y 1. El ratio es (L1 + 0.05) / (L2 + 0.05), donde L1 es el color claro y L2 el oscuro.
El offset de 0.05 es lo que hace que negro puro sobre blanco caiga en 21:1 en lugar de infinito, y también lo que hace que un casi-negro contra negro produzca un ratio medible. El tope es 21:1, el suelo 1:1.
No tienes que calcularlo a mano. Cada herramienta moderna de accesibilidad expone la función, y un checker en navegador queda a un copia-pega de distancia.
Fallos comunes
El fallo más frecuente es el placeholder gris claro sobre fondo blanco. Los diseñadores tiran de #999 o #aaa pensando que queda sutil. #999 sobre blanco es 2.85:1, muy por debajo de AA. Usa #767676 (4.54:1) o más oscuro.
El segundo más común son botones con color de marca sobre blanco. Un naranja o amarillo de marca puro puede quedarse en 1.5:1 contra blanco, vale para un logo pero falla para una etiqueta de botón. O oscureces el foreground o cambias a texto blanco sobre fondo más oscuro.
El tercero es texto sobre foto de fondo. Los hero suelen poner tipografía blanca sobre una foto real sin overlay. El contraste varía píxel a píxel y partes del titular caen por debajo de 4.5:1. La solución es un overlay oscuro semitransparente o una sombra de texto, no una fuente más grande.
Cómo arreglarlo sin rediseñar
Tres jugadas cubren casi todo. Oscurece el foreground hasta que el ratio pase. Una etiqueta que ahora es #444 en lugar de #777 mantiene el layout idéntico y aprueba AA. Añade una sombra suave al texto sobre imágenes, que sube el contraste efectivo a ojo aunque la fórmula no lo puntúe.
Simplifica los degradados. Si tu fondo es un gradient, el contraste contra el stop más claro es el que cuenta. Cambia a color sólido o acorta el rango del degradado para que cada píxel bajo el texto apruebe.
Comprueba con un checker real, no con la vista en una captura. El ojo es mal medidor, sobre todo para azul y rojo, que la luminancia pondera muy distinto de cómo se ven.
Ejemplo completo
javascript// Ratio de contraste WCAG 2.1 entre dos colores hex CSS
function luminancia(hex) {
const c = hex.replace("#", "");
const [r, g, b] = [0, 2, 4].map(i => parseInt(c.slice(i, i + 2), 16) / 255);
const lin = v => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}
function ratioContraste(fg, bg) {
const L1 = luminancia(fg);
const L2 = luminancia(bg);
const [claro, oscuro] = L1 > L2 ? [L1, L2] : [L2, L1];
return (claro + 0.05) / (oscuro + 0.05);
}
console.log(ratioContraste("#767676", "#ffffff").toFixed(2)); // "4.54"
console.log(ratioContraste("#999999", "#ffffff").toFixed(2)); // "2.85"¿Solo necesitas el resultado?
Cuando estás revisando una paleta antes de publicar un diseño, el verificador de contraste WCAG en aldeacode.com calcula el ratio en tiempo real mientras tocas los hex, marca los aprobados AA y AAA para texto normal y grande, y corre entero en tu navegador. Sin subir nada, sin esperar, feedback inmediato.
Abrir Verificador de Contraste WCAG →Preguntas frecuentes
¿El contraste AA aplica a controles de formulario deshabilitados?
No, los controles deshabilitados están exentos explícitamente bajo WCAG 2.1. Igual benefician de 3:1 por claridad, pero la spec no lo exige. Los focus rings de controles habilitados sí tienen que llegar a 3:1 contra los colores adyacentes.
¿De verdad 14 puntos en negrita cuentan como texto grande?
Sí, esa es la definición WCAG. 14 puntos negrita o 18 puntos regular cualifican, que en píxeles CSS es alrededor de 18.66 px negrita o 24 px regular. El umbral más bajo de 3:1 solo aplica cuando estás claramente por encima de esa línea.
¿Tengo que comprobar cada combinación de colores de la página?
Cada par texto-sobre-fondo, más cualquier componente no textual que comunique información por color (bordes de formulario, focus rings, slices de gráfica). Los gráficos decorativos sin valor informativo están exentos. La mayoría de páginas se reducen a menos de 10 combinaciones distintas cuando las listas.