Un contraste de color suficiente determina si el texto sigue siendo legible para todas las personas: también con baja visión, bajo luz solar intensa o en pantallas de baja calidad. Con la Comprobar contraste de color (WCAG) puede comprobar dos colores frente a las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1) en segundos. Esta guía explica la fórmula, los umbrales y un caso límite habitual en proyectos reales.
Cómo se calcula la relación de contraste
La relación de contraste describe la diferencia de luminosidad entre el color de primer plano y el de fondo. Se obtiene a partir de la luminancia relativa L de ambos colores:
Relación de contraste = (L_claro + 0,05) / (L_oscuro + 0,05)
Aquí L_claro es la luminancia relativa del color más claro y L_oscuro la del más oscuro (WCAG 2.1). La luminancia relativa pondera los componentes rojo, verde y azul según la percepción humana. Los valores van de 1:1 (sin contraste, colores idénticos) hasta 21:1, el máximo para negro puro sobre blanco puro.
Los umbrales WCAG para AA y AAA
WCAG define dos niveles de conformidad (AA, AAA) y dos tamaños de texto. "Texto grande" significa a partir de 18 pt o a partir de 14 pt en negrita. El texto más pequeño y de grosor normal se considera texto normal.
| Requisito | Texto normal | Texto grande |
|---|---|---|
| WCAG AA | ≥ 4,5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4,5:1 |
AA es el nivel mínimo exigido por la mayoría de leyes y concursos, mientras que AAA es la recomendación más exigente. El texto grande puede tener menos contraste porque las formas de letra más gruesas siguen siendo legibles con una diferencia menor.
Ejemplo: un caso límite ajustado
Un error frecuente es usar gris medio para el texto corrido. El gris puro #777777 sobre fondo blanco da una relación de contraste de aproximadamente 4,48:1. Queda justo por debajo del umbral AA de 4,5:1, por lo que no es accesible para texto corrido, aunque a primera vista parezca suficiente. Solo un gris algo más oscuro alcanza los 4,5:1 requeridos. Son precisamente estos casos límite los que la calculadora revela de forma fiable.
Cómo realizar la comprobación
Introduzca el color de primer plano y el de fondo como valores hexadecimales, por ejemplo #333333 sobre #FFFFFF. La calculadora devuelve la relación y muestra, para cada combinación de nivel y tamaño de texto, si se supera. Compruebe siempre los colores de texto frente al fondo real, incluidos botones, enlaces en estado hover y texto sobre imágenes. Así garantiza que su diseño no solo sea atractivo, sino demostrablemente accesible.
