Verificador de Contraste WCAG
Comprueba el ratio de contraste entre texto y fondo según WCAG AA y AAA — con vista previa en vivo en tamaño normal y grande.
1.144 visitas
El rápido zorro marrón salta sobre el perro perezoso
Ejemplo de texto grande 24px
Cómo Se Calcula el Ratio
La fórmula de WCAG es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro — así que el resultado siempre queda entre 1:1 (colores idénticos) y 21:1 (negro puro sobre blanco puro). La luminancia relativa no es un simple promedio de los canales RGB; es una suma ponderada perceptualmente, L = 0,2126R + 0,7152G + 0,0722B, aplicada después de linealizar cada canal invirtiendo la curva gamma sRGB (los valores por debajo de 0,03928 se dividen entre 12,92, el resto pasa por ((c+0,055)/1,055)^2,4). El verde contribuye aproximadamente diez veces más al brillo percibido que el azul, así que intercambiar los canales verde y azul de un color puede cambiar drásticamente su peso visible mientras el brillo bruto permanece igual.
Un ejemplo concreto: el gris medio puro #767676 sobre un fondo blanco da exactamente 4,54:1 — justo por encima del umbral AA de WCAG de 4,5:1 para texto normal. Oscurécelo un paso a #757575 y cae a 4,48:1, sin pasar AA. Por eso tantos diseños de gris sobre blanco fallan silenciosamente una auditoría: la diferencia visual entre un gris que pasa y uno que no es un único paso de RGB, invisible para la mayoría de los ojos pero muy visible para un escáner automático o para un usuario con baja visión a plena luz del día.
Lo Que Debes Saber
WCAG 2.1 establece dos umbrales AA según el tamaño del texto: 4,5:1 para texto normal, y un 3:1 más relajado para texto grande — definido como 18pt (24px) de peso regular o 14pt (18,7px) en negrita y superior, ya que los trazos más gruesos siguen siendo legibles con menor contraste. El nivel AAA, más estricto, exige 7:1 en texto normal y 4,5:1 en texto grande. Los elementos de interfaz sin texto, como iconos, bordes de campos de entrada e indicadores de foco, tienen su propio requisito de 3:1 según WCAG 2.1 SC 1.4.11, medido contra el color de fondo adyacente.
Estas cifras no son arbitrarias — provienen de investigaciones sobre legibilidad para usuarios con baja visión, daltonismo y pérdida de sensibilidad al contraste relacionada con la edad, y también sirven como referencia legal en normativas de accesibilidad como la ADA y la EN 301 549, el estándar de la UE detrás de la Ley Europea de Accesibilidad. Un fallo de contraste es uno de los problemas más citados en las auditorías automáticas de accesibilidad web, por lo que muchos sistemas de diseño integran directamente un mínimo de 4,5:1 en sus tokens de color en lugar de dejar la comprobación a cada diseñador.
Preguntas Frecuentes
¿Cambia el ratio si se intercambian el texto y el fondo?
No — la fórmula siempre coloca el color más claro arriba, así que el ratio es simétrico. La legibilidad aún puede diferir de forma subjetiva (halo de texto claro sobre fondo oscuro), pero la puntuación WCAG es idéntica.
¿Qué se considera texto grande?
24 px (18 pt) en regular o unos 18,7 px (14 pt) en negrita y superior. El texto grande solo necesita 3:1 en AA porque los glifos más grandes siguen siendo legibles con menor contraste.
Mi color de marca no pasa — ¿ahora qué?
Consérvalo para la decoración y oscurece o aclara su uso en texto hasta que pase; una escala de tintes/sombras ayuda. El texto de marcador de posición y los estados deshabilitados están exentos del requisito, pero conviene mantenerlos razonables.
¿Por qué usar luminancia corregida por gamma en lugar de un simple promedio RGB?
Porque el brillo percibido no es lineal ni igual entre canales — promediar el RGB bruto trataría el amarillo brillante (#ffff00) y el azul medio (#0000ff) como si tuvieran aproximadamente el mismo brillo, cuando el amarillo se percibe mucho más brillante al ojo. El paso de decodificación gamma corrige cómo sRGB comprime los valores en lugar de almacenar luz lineal, y los pesos 0,2126/0,7152/0,0722 reflejan la mayor sensibilidad del ojo al verde, luego al rojo, luego al azul. Si se omite cualquiera de los dos pasos, las cifras dejan de coincidir con el contraste tal como realmente se percibe.
¿Un ratio aprobado garantiza que los colores funcionen para usuarios daltónicos?
No del todo — el ratio mide solo la diferencia de luminancia, no la de matiz, así que dos colores pueden pasar 4,5:1 y aun así ser difíciles de distinguir para alguien con deuteranopía si su principal diferencia es el matiz y no la claridad, como ocurre con algunos pares rojo/verde de brillo similar. Un ratio de contraste alto es necesario pero no suficiente para la accesibilidad ante el daltonismo; combinarlo con una diferencia de claridad o con una señal no cromática, como un icono o un subrayado, cubre ambos casos.
Herramientas Similares
Reportar un Problema
Verificador de Contraste WCAG
Comentarios
Aún no hay comentarios — ¡sé el primero en escribir uno!