Accesibilidad Web y Contraste de Color: Guía WCAG 2.1
Todo sobre los requisitos de contraste de color WCAG 2.1: niveles AA y AAA, cómo calcular ratios de contraste, errores comunes y herramientas para verificarlo.
¿Qué es la accesibilidad web y por qué importa?
La accesibilidad web garantiza que todas las personas, incluidas aquellas con discapacidades visuales, auditivas, motoras o cognitivas, puedan percibir, navegar e interactuar con los sitios web. Según la Organización Mundial de la Salud, más de mil millones de personas en el mundo viven con alguna forma de discapacidad, lo que representa aproximadamente el 15% de la población global.
Desde una perspectiva legal, muchos países tienen legislación que exige accesibilidad digital. La Ley 1680 de 2013 en Colombia establece directrices para la accesibilidad de sitios web gubernamentales. En la Unión Europea, la Directiva de Accesibilidad Web aplica a organismos del sector público. En Estados Unidos, la ADA ha sido interpretada para incluir sitios web comerciales. Más allá del cumplimiento legal, la accesibilidad mejora la experiencia para todos los usuarios: texto con buen contraste es más fácil de leer bajo la luz del sol, y una navegación clara beneficia a usuarios con conexiones lentas.
Contraste de color según WCAG 2.1
Las Directrices de Accesibilidad para el Contenido Web (WCAG) 2.1 definen requisitos específicos para el contraste de color en el criterio de éxito 1.4.3 (nivel AA) y 1.4.6 (nivel AAA). Estos criterios establecen ratios mínimos entre el color del texto y el color de fondo para garantizar la legibilidad.
- Nivel AA — texto normal (menor a 18pt o 14pt en negrita): ratio mínimo de 4.5:1
- Nivel AA — texto grande (18pt o más, o 14pt en negrita): ratio mínimo de 3:1
- Nivel AAA — texto normal: ratio mínimo de 7:1
- Nivel AAA — texto grande: ratio mínimo de 4.5:1
- Componentes de interfaz y gráficos: ratio mínimo de 3:1 contra colores adyacentes
Cómo se calcula la relación de contraste
El ratio de contraste se calcula comparando la luminancia relativa de dos colores. La fórmula definida por WCAG utiliza la luminancia relativa según el estándar sRGB: primero se linealizan los valores RGB (eliminando la corrección gamma), luego se ponderan según la sensibilidad del ojo humano (0.2126 para rojo, 0.7152 para verde, 0.0722 para azul).
El ratio se expresa como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. El resultado va desde 1:1 (colores idénticos) hasta 21:1 (negro sobre blanco). Los valores 0.05 en la fórmula evitan divisiones por cero y representan el contraste mínimo perceptible.
Por ejemplo, un texto gris (#767676) sobre fondo blanco (#FFFFFF) produce un ratio de exactamente 4.54:1, que apenas cumple AA para texto normal. Un azul medio (#3B82F6) sobre blanco produce 3.41:1, insuficiente para AA en texto normal pero válido para texto grande. Conocer estos cálculos ayuda a tomar decisiones fundamentadas al diseñar interfaces.
Errores comunes de contraste en diseño web
El error más frecuente es usar texto gris claro sobre fondo blanco por razones estéticas. Los placeholders de formularios son infractores habituales: el gris por defecto del navegador (#A9A9A9) sobre blanco solo alcanza un ratio de 2.32:1, muy por debajo del 4.5:1 requerido. La solución es usar al menos #767676 o más oscuro.
Otro error común es colocar texto sobre imágenes de fondo sin una capa de protección. Una fotografía puede tener zonas claras y oscuras que hacen ilegible cualquier color de texto. La solución es agregar un overlay semitransparente (por ejemplo, rgba(0,0,0,0.6)) entre la imagen y el texto.
El uso del color como único indicador de estado es otro problema frecuente. Mostrar errores solo cambiando el borde de un input a rojo no ayuda a usuarios con daltonismo (aproximadamente el 8% de los hombres). La solución es combinar color con iconos, texto descriptivo o patrones. Los campos de formulario deben incluir mensajes de error textuales además del cambio de color.
Herramientas y buenas prácticas
El verificador de contraste de Conversor Universal permite ingresar dos colores (primer plano y fondo) y obtener instantáneamente el ratio de contraste con indicadores visuales de semáforo: verde para AAA (≥7:1), ámbar para AA (≥4.5:1) y rojo para insuficiente. La matriz de contraste evalúa todas las combinaciones posibles de la paleta activa.
Las buenas prácticas incluyen: verificar el contraste desde la fase de diseño (no al final del desarrollo), incluir la verificación de contraste en el proceso de revisión de código, definir pares de colores aprobados en los design tokens del proyecto, y probar con simuladores de daltonismo. Mantener el nivel AA como mínimo obligatorio y aspirar a AAA en contenido textual extenso mejora significativamente la experiencia de lectura para todos los usuarios.