Una explicación completa de la fórmula de luminancia relativa, los umbrales AA/AAA, y consejos prácticos para elegir colores accesibles.
El contraste de color es una medida numérica de lo «distinguible» que es un texto (primer plano) respecto a su fondo. Las Web Content Accessibility Guidelines (WCAG) 2.x estandarizan esta medida para que el texto siga siendo legible incluso para personas con discapacidad visual, pérdida de visión relacionada con la edad, o malas condiciones de iluminación. El resultado es un único número entre 1:1 (colores idénticos, sin contraste) y 21:1 (negro/blanco puro, contraste máximo).
¿Cómo se calcula el contraste de color? (la fórmula de luminancia relativa)
Respuesta rápidaPrimero, los canales R, G, B de cada color se normalizan entre 0 y 1 y se convierten a valor lineal con corrección gamma. Estos tres valores lineales se suman con los pesos 0,2126×R + 0,7152×G + 0,0722×B para obtener la luminancia relativa (L). El ratio de contraste se calcula con (L_más_clara + 0,05) / (L_más_oscura + 0,05).
- Paso 1 — normalización sRGB: para cada canal c, c' = c/255.
- Paso 2 — corrección gamma: si c' ≤ 0,03928, c_lin = c'/12,92; si no, c_lin = ((c'+0,055)/1,055)^2,4.
- Paso 3 — luminancia relativa: L = 0,2126·R_lin + 0,7152·G_lin + 0,0722·B_lin.
- Paso 4 — ratio: suma 0,05 a la L más alta y a la más baja, y luego divide: (L1+0,05)/(L2+0,05), con L1>L2.
El canal verde tiene el peso más alto (0,7152) porque el ojo humano es más sensible al verde; el canal azul (0,0722) tiene el peso más bajo. Por eso el rojo, el verde y el azul puros con el mismo «brillo» producen ratios de contraste diferentes.
¿Cuál es la diferencia entre accesibilidad AA y AAA?
Respuesta rápidaAA es el nivel mínimo (y más comúnmente exigido) de WCAG: el texto normal necesita 4,5:1, el texto grande y los componentes de interfaz necesitan 3:1. AAA es el nivel reforzado: el texto normal necesita 7:1, el texto grande necesita 4,5:1. AAA no siempre resulta práctico para todos los diseños, pero se prefiere para contenido crítico (p. ej. información sanitaria, formularios oficiales).
Resumen de umbrales de contraste WCAG 2.x
| Tipo de contenido | AA (mínimo) | AAA (reforzado) |
|---|
| Texto normal (menos de 14pt/18,66px, salvo negrita) | 4,5:1 | 7:1 |
| Texto grande (18pt/24px+ o 14pt/18,66px+ negrita) | 3:1 | 4,5:1 |
| Componente de interfaz / límite de elemento gráfico | 3:1 | no definido |
| Elementos decorativos / desactivados | no requerido | no requerido |
¿Qué significa un ratio de contraste de 4,5:1?
Respuesta rápida4,5:1 es el ratio mínimo que WCAG AA exige para el texto de tamaño normal. Por ejemplo, el gris medio #767676 sobre blanco (#FFFFFF) supera justo esta barrera con aproximadamente 4,54:1 — un ejemplo clásico «límite» citado con frecuencia en la documentación WCAG. Un gris ligeramente más claro (p. ej. #999) suele caer por debajo de 4,5:1 y no supera AA.
¿Cómo elegir colores accesibles?
Respuesta rápidaApunta como mínimo a AA (4,5:1 texto normal / 3:1 texto grande) en cada par texto/fondo; no cuentes únicamente con el color para el significado (p. ej. añade un icono o texto en negrita junto al rojo para un mensaje de error); oscurece o aclara la luminosidad de tu color de marca para aumentar el contraste; y comprueba los pares de colores que puedan confundirse, como rojo-verde, con una simulación de daltonismo.
Consejo práctico: el color principal de una marca (p. ej. morado #7c3aed) normalmente no tiene suficiente contraste como texto sobre blanco, pero puede funcionar bien como fondo con texto blanco — por eso es útil probar el mismo color tanto como texto como como fondo.
¿Cómo comprobar el contraste de un sitio web?
Respuesta rápidaIntroduce cada par texto/fondo y botón/icono de tu sitio en la herramienta de arriba y comprueba el resultado AA/AAA; para comparar varios colores de marca a la vez, usa la pestaña Verificación de paleta — muestra cada combinación por pares de 4 colores en una sola tabla.