El contraste de color entre el texto y su fondo es un elemento clave en la accesibilidad web, ya que permite a usuarios con baja visión, daltonismo o problemas de percepción del color leer el contenido sin dificultades. La técnica G18 de WCAG 2.1 establece que el contraste mínimo entre el texto y el fondo debe ser de 4.5:1, asegurando su legibilidad en diversas condiciones.
Un contraste inadecuado puede hacer que el texto sea ilegible para muchas personas, afectando negativamente la usabilidad y accesibilidad del sitio web. Aplicar esta técnica contribuye a cumplir con los criterios de éxito:
- 1.4.3: Contraste (Mínimo) (Suficiente)
- 1.4.6: Contraste (Mejorado) (Suficiente para texto grande)
Acerca de esta técnica
Esta técnica garantiza que el texto y las imágenes de texto sean legibles asegurando una relación de contraste mínima con su fondo.
¿Cómo se logra?
- Para texto normal, se exige un contraste mínimo de 4.5:1.
- Para texto grande (mínimo 18px normal o 14px en negrita), el contraste puede ser 3:1.
- Se recomienda usar herramientas de análisis de contraste para verificar que los colores cumplan con los requisitos.
Casos donde esta técnica es crucial:
- Texto sobre imágenes o fondos degradados.
- Etiquetas de formularios con información importante.
- Botones y enlaces que deben ser visibles claramente.
- Contenidos en entornos de baja iluminación o con usuarios con daltonismo.
Ejemplos
Ejemplo incorrecto 1: Texto con bajo contraste sobre un fondo claro
🔴 Problema: La relación de contraste entre el texto gris claro y el fondo blanco es insuficiente, dificultando la lectura.
Solución correcta: Uso de colores con contraste adecuado
✅ ¿Qué mejora?: Se ha aumentado el contraste del texto (gris oscuro sobre blanco) para cumplir con la relación 4.5:1.
Ejemplo incorrecto 2: Texto sobre una imagen sin fondo sólido
🔴 Problema: El fondo es una imagen con diferentes tonalidades, lo que puede hacer que algunas partes del texto sean ilegibles.
Solución correcta: Aplicar una superposición semitransparente
✅ ¿Qué mejora?: Se añade una superposición oscura semitransparente para asegurar un buen contraste entre el texto y el fondo.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar colores con bajo contraste en botones, enlaces o texto.
- No probar la accesibilidad en diferentes pantallas o configuraciones de usuario.
- Texto sobre imágenes sin una capa de fondo adicional.
- Asumir que todos los usuarios ven los colores de la misma forma.
Cómo evitar estos errores:
- Verificar el contraste con herramientas como el Colour Contrast Analyser (CCA).
- Usar colores con suficiente contraste y evitar combinaciones problemáticas como rojo-verde o azul-amarillo.
- Añadir fondos sólidos o superposiciones si el texto está sobre imágenes.
- Probar el sitio en diferentes condiciones (modo alto contraste, simuladores de daltonismo, etc.).
Preguntas frecuentes sobre la técnica G18
¿Cuál es la relación de contraste mínima aceptable?
Para texto normal, el contraste debe ser 4.5:1. Para texto grande (mínimo 18px normal o 14px en negrita), se permite 3:1.
¿Cómo se mide la relación de contraste?
Se calcula usando la fórmula de luminancia relativa establecida en WCAG 2.1 o con herramientas automáticas como WebAIM Contrast Checker.
¿El contraste afecta solo al texto?
No, también se debe garantizar contraste adecuado en botones, enlaces y otros elementos interactivos.
¿Puedo usar un fondo de imagen con texto?
Sí, pero debes asegurarte de que haya un fondo sólido o una superposición para mantener el contraste.
¿Existen herramientas para comprobar el contraste automáticamente?
Sí, algunas opciones recomendadas son:
- TPGi Colour Contrast Analyser
- WebAIM Contrast Checker
- Extensiones de accesibilidad para navegadores como Chrome y Firefox.
¿Qué pasa si el contraste no cumple con los requisitos?
Si el contraste es insuficiente, los usuarios con discapacidad visual pueden tener dificultades para leer el contenido, lo que afecta la accesibilidad y puede incumplir normativas como WCAG 2.1.
Recursos relacionados
- Guía oficial WCAG 2.1 para la Técnica General G18: Garantizar que exista una relación de contraste de al menos 4,5:1 entre el texto (e imágenes de texto) y el fondo detrás del texto.
- Comprender el criterio de éxito 1.4.3: Contraste (Mínimo)
- Comprender el criterio de éxito 1.4.6: Contraste (Mejorado)
- Analizador de contraste de color (CCA) TPGi: aplicació
- Analizador de relación de contraste – servicio en línea
- Muestras de contraste de color
- Respuesta de color atípica
- Analizador de contraste de color de Colors On the Web
- Herramienta para convertir imágenes en función de la pérdida de color de manera que el contraste se restaure como contraste de luminancia cuando solo había contraste de color (que se perdió debido a la deficiencia de color)
- Lista de herramientas de contraste de color
Pruebas y validación
Procedimiento
- Identificar todos los elementos de texto en la página.
- Utilizar una herramienta de análisis de contraste para medir el ratio.
- Confirmar que todos los textos cumplen con el mínimo de 4.5:1.
- Si hay texto sobre imágenes, verificar que haya una superposición para mejorar el contraste.
Resultados esperados
- ✅ Si todos los textos cumplen con la relación 4.5:1, la implementación es correcta.
- ❌ Si algún texto tiene un contraste inferior, debe corregirse para cumplir con WCAG 2.1.
Reglas de prueba (Test Rules)
Garantizar un contraste adecuado entre texto y fondo es esencial para la accesibilidad web. Aplicar la técnica G18 mejora la experiencia de navegación para todos los usuarios.
📢 ¡No ignores el contraste en tu sitio web! Si necesitas ayuda con la accesibilidad de tu web, contáctanos para mejorar su accesibilidad y cumplir con los estándares WCAG. 🚀