Cómo calcular la relación de contraste de color (WCAG AA/AAA)
La relación de contraste de color mide cuánto destaca un color de texto frente a su fondo, con un valor que va de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro). El WCAG 2.1 fija relaciones mínimas para que un texto se considere legible: 4,5:1 para texto normal en el nivel AA, el umbral que usan la mayoría de las auditorías de accesibilidad y los requisitos legales.
La fórmula
La relación sale de la luminancia relativa de cada color, no de cómo “se ve” el color en pantalla. Cuatro pasos convierten un código hex en un valor de luminancia:
- Separa el hex en R, G, B y divide cada valor entre 255, para que cada canal quede entre 0 y 1.
- Lineariza cada canal. Las pantallas no traducen los valores de color en brillo de forma lineal, así que cada canal recibe corrección gamma: si el valor es ≤ 0,03928, se divide entre 12,92; si no, se aplica
((valor + 0,055) / 1,055) ^ 2,4. - Pondera y suma los canales para obtener la luminancia relativa:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B. El verde recibe el peso mayor porque el ojo humano es más sensible a él; el azul recibe el menor. - Divide la luminancia más clara entre la más oscura, ambas sumadas a 0,05:
(L_clara + 0,05) / (L_oscura + 0,05).
Ese + 0,05 final cumple una función: evita que la relación se dispare hacia el infinito cuando uno de los colores se acerca al negro, y es la razón de que negro puro sobre blanco puro cierre exactamente en 21:1, y no en un número mucho mayor.
Ejemplo resuelto: #767676 sobre blanco
Este par de gris sobre blanco aparece constantemente en la documentación del WCAG porque cae justo en un umbral, lo que lo hace útil para resolver paso a paso.
Paso 1. #767676 en RGB es 118, 118, 118. Al dividir entre 255 da 0,4627 en cada canal.
Paso 2. 0,4627 está por encima de 0,03928, así que se lineariza con la fórmula gamma: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Los tres canales son iguales aquí, así que este valor aplica a R, G y B por igual.
Paso 3. Luminancia: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. La luminancia del blanco es 1,0 (cada canal lineariza a exactamente 1).
Paso 4. Relación: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, redondeado a 4,54:1.
Ese valor queda justo por encima de la línea de 4,5:1 para AA en texto normal, y también justo por encima de la línea de 4,5:1 para AAA en texto grande, pero bastante por debajo del 7:1 que exige AAA para texto normal. Un solo hex, tres veredictos distintos según el tamaño del texto y el nivel que se busque.
Cómo se comportan en la práctica algunos pares de colores comunes
| Par | Relación | AA normal (4,5:1) | AAA normal (7:1) | AA grande (3:1) | AAA grande (4,5:1) |
|---|---|---|---|---|---|
#AAAAAA sobre #FFFFFF | 2,32:1 | No pasa | No pasa | No pasa | No pasa |
#767676 sobre #FFFFFF | 4,54:1 | Pasa | No pasa | Pasa | Pasa |
#2563EB sobre #FFFFFF | 5,17:1 | Pasa | No pasa | Pasa | Pasa |
#333333 sobre #FFFFFF | 12,63:1 | Pasa | Pasa | Pasa | Pasa |
Dos cosas destacan en esta tabla. Primero, un azul de saturación media como #2563EB (un color habitual en botones y enlaces) supera AA en texto de cuerpo, pero no pasa AAA en absoluto, así que un sitio que apunte a AAA en sus enlaces necesita un tono más oscuro. Segundo, el gris claro popular alrededor de #AAAAAA no pasa ninguno de los umbrales, ni siquiera el mínimo de 3:1 para texto grande, lo que explica por qué el texto gris “discreto” sobre fondo blanco es uno de los hallazgos más comunes en auditorías de accesibilidad.
Comprueba tus propios colores
Introduce dos valores hex abajo para obtener la relación exacta y ver qué niveles del WCAG superan, en vivo, sin subir nada ni pasar por un servidor.
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
Errores comunes
Olvidar que el texto grande tiene un umbral más bajo. El WCAG define “texto grande” como 18pt (24px) de peso normal o 14pt (18,66px) en negrita en adelante. Un título de 24px solo necesita 3:1, no 4,5:1, así que un sistema de diseño que aplica la misma regla de contraste a todos los tamaños de texto termina rechazando títulos que ya cumplen.
Probar el contraste del texto pero no el de los componentes de interfaz. El WCAG 1.4.11 fija un mínimo aparte de 3:1 para elementos que no son texto, como bordes de botones, contornos de campos de formulario e iconos que transmiten significado por sí solos. Un botón con un contraste de texto perfecto de 7:1 puede seguir fallando una auditoría si su borde se funde con el fondo.
Comprobar el contraste contra el fondo equivocado. Un texto sobre una foto, un degradado o una capa semitransparente no tiene un único color de fondo, tiene varios. La relación solo vale para el punto exacto que se midió; un degradado claro arriba y oscuro abajo necesita que se revise el punto más desfavorable, no el promedio.
Suponer que los colores de marca están exentos. El logotipo en sí está exento de los requisitos de contraste, pero el texto de cuerpo y de interfaz en un color de marca no lo está. Muchos azules y rojos corporativos que funcionan bien como detalle del logo no pasan el 4,5:1 cuando se usan como texto de párrafo de 16px sobre blanco.
Preguntas frecuentes
¿Cuál es la diferencia entre AA y AAA? AA es el estándar que citan la mayoría de los requisitos legales de accesibilidad (ADA en EE. UU., EN 301 549 en la UE), y es lo que verifica la mayoría de las auditorías. AAA es más estricto y está pensado sobre todo para contenido dirigido específicamente a usuarios con baja visión; el propio WCAG reconoce que AAA no es alcanzable para todo tipo de contenido, así que la mayoría de las organizaciones apuntan a AA de forma general en lugar de AAA en todo.
¿La relación de contraste tiene en cuenta el daltonismo? No. La relación de contraste mide luminancia (brillo), no tono, así que de forma incidental ayuda a muchas formas de daltonismo al no depender de distinguir colores concretos. Pero no sustituye una comprobación de daltonismo: dos colores pueden tener un contraste excelente y aun así ser difíciles de diferenciar para alguien con daltonismo rojo-verde si se distinguen sobre todo por el tono y no por la claridad.
¿Por qué negro puro sobre blanco da exactamente 21:1 y no un número más redondo?
La luminancia del negro es 0 y la del blanco es 1. Al introducir esos valores en la fórmula, el resultado es (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Cierra en exactamente 21:1 por cómo se eligió la constante +0,05, no por casualidad ni por un redondeo.
¿Un tema en modo oscuro necesita comprobaciones de contraste aparte? Sí. Cambiar un fondo claro por uno oscuro no conserva la relación: texto blanco sobre el azul de tu marca y texto azul de marca sobre un fondo casi negro son dos pares de luminancia distintos, con dos relaciones distintas, así que cada tema necesita pasar por el verificador en lugar de asumir que el resultado del modo claro sigue siendo válido.