Una de las barreras de accesibilidad más habituales en contenidos de la Web es el bajo contraste de color entre el texto y el fondo.
Para solucionar estas barreras de accesibilidad existen herramientas como el Contrast Checker de WebAIM que permite comprobar si las combinaciones de colores cumplen con los estándares de accesibilidad establecidos por las Web Content Accessibility Guidelines (WCAG).
¿Qué es Contrast checker?
Contrast Checker es una herramienta en línea gratuita proporcionada por WebAIM (Web Accessibility in Mind) que permite verificar si una combinación de colores cumple con los niveles de contraste requeridos por las WCAG buscando que los textos sean legibles para personas con baja visión y daltonismo.
Este verificador evalúa la diferencia entre el color de primer plano (texto) y el color de fondo para determinar si cumple con los niveles de conformidad de AA y AAA definidos en las WCAG.
¿Cómo se utiliza Contrast checker?
La herramienta muestra un formulario con dos campos principales que representan el color del texto y el color de fondo. Estos colores son identificados como Foreground Color para el color en primer plano y background color para el color de fondo.
Se puede introducir el código hexadecimal de un color o utilizar la herramienta de selector de color para buscar el color en la paleta de colores del sistema.
Una vez ingresados los colores, la herramienta calculará automáticamente el ratio de contraste y mostrará los resultados en diferentes categorías.
- Small Text (Texto pequeño): indica si la combinación de colores pasa los estándares para texto de tamaño normal.
- Large Text (Texto grande): evalúa si la combinación cumple para textos de al menos 18px en regular o 14px en negrita.
- Graphics and UI Components: verifica si los colores cumplen para elementos como botones o iconos.
El ratio de contraste se expresa como un número (ejemplo: 4.5:1). Para que la combinación de colores sea accesible, debe cumplir al menos con estos valores:
- AA (Mínimo) ≥ 4.5:1 ≥ 3:1
- AAA (Óptimo) ≥ 7:1 ≥ 4.5:1
Si la combinación de colores no pasa la prueba, se mostrará en rojo junto con un mensaje indicando que el contraste es insuficiente.