Contraste de color según WCAG

La relación de contraste entre dos colores y si basta para texto corrido, texto grande y elementos de interfaz.

Los dos colores están en una relación de 4,54 a 1.

Relación de contraste
4,54 : 1
Texto corrido
AA superado, AAA no (4,5:1)
Texto grande
AAA superado (4,5:1)
Elementos de interfaz y gráficos
superado (3:1)
Luminancia relativa
0,1812 frente a 1

La relación de contraste compara la luminancia relativa de dos colores. Va de 1 a 1 —dos colores idénticos— hasta 21 a 1 para negro sobre blanco, y las pautas de accesibilidad fijan umbrales concretos.

La cuenta no es la diferencia ingenua entre los valores de color: tiene en cuenta que el ojo percibe el verde más claro que el rojo y el rojo más que el azul, y que las pantallas no emiten sus valores de forma lineal.

Los umbrales y para qué valen

Para texto corrido el nivel AA exige una relación de 4,5 a 1 y el nivel AAA, más estricto, de 7 a 1. Para texto grande —a partir de 18 puntos, o de 14 en negrita, es decir unos 24 y 18,66 píxeles— bastan 3 a 1 para AA y 4,5 a 1 para AAA.

Los elementos de interfaz, los iconos y el borde de un campo de formulario necesitan al menos 3 a 1. Se pasa por alto a menudo: un marco gris claro alrededor de un campo de texto rara vez cumple, aunque sea lo que marca el límite del campo.

Por qué la fórmula lleva potencias

Un valor de color de 128 no se ve en pantalla con la mitad de claridad que 255, porque la salida sigue una curva gamma. Antes de ponderar se deshace por tanto esa curva en cada canal: por debajo de un umbral pequeño de forma lineal y por encima con el exponente 2,4.

Después se ponderan los canales: el verde con 0,7152, el rojo con 0,2126 y el azul con 0,0722. Esas tres cifras explican que un texto azul sobre fondo negro sea casi ilegible mientras que uno verde se lee bien.

Preguntas frecuentes

¿Vale también para texto sobre una foto?
La exigencia vale; lo que se complica es medirla. Cuenta la zona más desfavorable que quede detrás del texto. En la práctica se resuelve con una capa semitransparente o un degradado bajo la letra, y se mide contra el color resultante.
¿Y los colores de estado, como el rojo de error?
El color nunca puede ser el único portador de una información: eso es una exigencia aparte de las pautas. Un error necesita además texto o un icono; si no, se pierde con las alteraciones de la visión del color, que afectan a cerca del ocho por ciento de los hombres.
¿Por qué otras herramientas dan otro veredicto?
Porque hay en marcha un método más reciente llamado APCA que refleja mejor la legibilidad percibida que la relación de WCAG 2. Lo vinculante hoy es el cálculo que se usa aquí; APCA está previsto para una versión futura de las pautas.

Fuentes

Cifras vigentes en 2026. Los resultados son orientativos y no sustituyen a una asesoría laboral o fiscal.

También te puede servir