¿Qué es la relación de contraste?
La relación de contraste compara la luminancia relativa de dos colores, de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG la define como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. La luminancia relativa pondera el rojo, el verde y el azul tal como los percibe el ojo humano.
Requisitos de contraste de WCAG 2.2
| Contenido | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (24 px, o 18,66 px en negrita) | 3:1 | 4,5:1 |
| Componentes de interfaz y gráficos | 3:1 | — |
«Texto grande» significa al menos 18 pt (24 px CSS) en peso normal, o 14 pt (unos 18,66 px CSS) en negrita. Los logotipos y el texto puramente decorativo están exentos.
Consejos para un contraste de color accesible
- Comprueba el texto sobre cada fondo en el que aparece, incluidas imágenes, degradados y estados hover.
- Las superficies translúcidas tipo «cristal» cambian el contraste según lo que tienen detrás: prueba el caso más oscuro y el más claro.
- Los textos de ejemplo de los campos y los botones desactivados suelen quedar demasiado tenues; mantén las indicaciones importantes en 4,5:1.
- No uses solo el color para transmitir significado: añade iconos o texto a los errores y a los estados de éxito.
Esta herramienta comprueba una pareja de colores. Lensux comprueba cada texto de tus páginas tal como se renderiza —incluidas las capas translúcidas— y lista cada fallo con su relación de contraste.
Preguntas frecuentes
¿Qué relación de contraste necesito para WCAG AA?
4,5:1 para texto normal, 3:1 para texto grande (24 px, o 18,66 px en negrita) y 3:1 para componentes de interfaz como bordes de botones e iconos.
¿Basta 4,5:1 para los botones?
La etiqueta del botón es texto, así que necesita 4,5:1 respecto al color del botón. La forma del botón necesita 3:1 respecto al fondo de la página si es lo único que lo identifica.
¿WCAG 3 cambia las reglas de contraste?
WCAG 3 sigue siendo un borrador y explora otro modelo de contraste (APCA). WCAG 2.x sigue siendo la referencia de la normativa de accesibilidad, incluida la norma europea EN 301 549.