Accesibilidad y contraste de colores web — guía WCAG 2.1
La accesibilidad de color no es solo una obligación legal en muchos países: es un principio de diseño inclusivo que mejora la experiencia de todos los usuarios, especialmente en condiciones de poca luz, en pantallas de bajo contraste o para usuarios con baja visión. Las pautas WCAG 2.1 del W3C definen ratios de contraste mínimos entre texto y fondo que toda web accesible debe cumplir. Esta guía explica cómo calcular y verificar estos ratios usando WikiPlus Selector de Color como herramienta de apoyo.
Qué es el ratio de contraste y cómo se calcula
El ratio de contraste es una medida de la diferencia de luminosidad relativa entre dos colores. Se calcula como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminosidad relativa del color más claro y L2 la del más oscuro, y los valores L se calculan a partir de los valores RGB de cada color mediante una fórmula que tiene en cuenta la percepción no lineal del ojo humano. El ratio mínimo posible es 1:1 (dos colores idénticos, sin contraste) y el máximo es 21:1 (blanco puro sobre negro puro). WikiPlus muestra el valor de luminosidad (L en HSL) de cada color, que es la base para estimar visualmente el contraste antes de calcularlo con una herramienta específica.
Niveles WCAG AA y AAA en detalle
WCAG 2.1 define cuatro criterios de contraste principales. El nivel AA para texto normal (menos de 18pt o menos de 14pt en negrita) requiere un ratio mínimo de 4.5:1. El nivel AA para texto grande (18pt o más, o 14pt en negrita) requiere 3:1. El nivel AAA para texto normal requiere 7:1. El nivel AAA para texto grande requiere 4.5:1. Los componentes de interfaz como botones, campos de formulario, iconos con significado semántico, y bordes de foco también deben cumplir el ratio de 3:1 bajo el criterio 1.4.11 de WCAG 2.1. Los textos decorativos, logotipos y texto en imágenes están exentos de estos criterios.
Colores problemáticos habituales en diseño web
Algunos patrones de color que parecen estéticamente agradables pero fallan en accesibilidad son muy comunes. Texto gris claro sobre fondo blanco: #999999 sobre #FFFFFF tiene un ratio de solo 2.85:1, muy por debajo del 4.5:1 requerido. Texto amarillo sobre fondo blanco: el amarillo luminoso tiene alta claridad y contrasta poco con el blanco. Texto de color de marca sobre fondo de ese mismo color en un tono más claro: habitual en botones donde el fondo es el azul claro y el texto es el azul oscuro de la misma familia, que a menudo no alcanza el 4.5:1. Verde sobre rojo: alto contraste en el espectro visual normal, pero virtualmente invisible para usuarios con deuteranopia (el tipo más habitual de daltonismo).
Flujo de trabajo para diseño accesible de colores
El flujo de trabajo recomendado para diseñadores que crean una nueva paleta es: define el color de marca y sus tonos con WikiPlus Selector de Color en formato HSL. Identifica los pares de color más habituales de tu interfaz (texto sobre fondo, texto de botón sobre botón, icono sobre fondo). Para cada par, copia los valores HEX en WebAIM Contrast Checker o en el Accessibility Inspector de macOS para verificar el ratio. Ajusta los valores de lightness hasta que cada par crítico supere el 4.5:1 (texto normal) o el 3:1 (texto grande, componentes de UI). Documenta los colores aprobados en tu sistema de diseño para que todos los miembros del equipo usen los tonos correctos.
Preguntas frecuentes
- ¿La accesibilidad de color es obligatoria legalmente?
- En muchos países sí. En la Unión Europea, la Directiva de Accesibilidad Web (2016/2102/UE) obliga a los sitios web del sector público a cumplir WCAG 2.1 nivel AA. En España, el Real Decreto 1112/2018 implementa esta directiva. Para el sector privado, la nueva Directiva de Accesibilidad de Productos y Servicios (2019/882/UE) se transpone progresivamente a los sistemas legales nacionales. Además, incumplir los estándares de accesibilidad puede conllevar riesgo legal por discriminación en EEUU bajo la Americans with Disabilities Act.
- ¿El color de foco de los elementos interactivos también debe cumplir el ratio de contraste?
- Sí. WCAG 2.1 criterio 1.4.11 requiere que los componentes de interfaz como botones, campos de formulario y bordes de foco tengan un contraste de al menos 3:1 contra el color adyacente. WCAG 2.2 (criterio 2.4.11) fortalece esto aún más para el indicador de foco visible. El contorno de foco azul por defecto de los navegadores en fondos blancos generalmente cumple el ratio, pero si el override el foco con CSS debes verificar que tu estilo personalizado mantiene el contraste mínimo.
- ¿Un ratio de 3:1 es suficiente para texto grande en un blog?
- El criterio AA permite 3:1 para texto de 18pt (24px) o más a peso normal, o 14pt (18.67px) o más en negrita. Sin embargo, para la mejor experiencia de lectura y para cumplir el nivel AAA, apunta siempre a 4.5:1 o más incluso para texto grande. La diferencia visual para el usuario con baja visión entre 3:1 y 4.5:1 es significativa en condiciones de pantalla adversas.