El contraste entre el texto y el fondo es esencial para que las personas con baja visión o daltonismo puedan leer y comprender el contenido sin dificultad. La Técnica G17 de WCAG 2.1 establece que la relación de contraste debe ser de al menos 7:1, asegurando una legibilidad óptima para más usuarios.
Esta técnica va más allá del criterio estándar de 4.5:1 para proporcionar un contraste mejorado en textos pequeños y en imágenes de texto, garantizando una mejor experiencia de accesibilidad.
Acerca de esta técnica
La técnica G17 se aplica a cualquier tecnología que genere contenido visual y tiene como objetivo garantizar que los usuarios puedan leer el texto de forma clara y sin esfuerzo.
¿Cuándo es fundamental aplicar esta técnica?
- En textos pequeños o de fuentes delgadas.
- En señalética digital donde la lectura rápida es clave.
- En contenidos gráficos con imágenes de texto.
- En interfaces web o móviles donde el contraste puede afectar la usabilidad.
Métodos para garantizar el contraste adecuado:
- Usar colores de alto contraste (ej. blanco sobre negro o amarillo sobre azul oscuro).
- Agregar un fondo opaco detrás del texto si se superpone sobre imágenes.
- Utilizar bordes o halos alrededor de las letras para mejorar la visibilidad.
- Asegurar la legibilidad del texto en fondos degradados o con texturas.
Ejemplos
Ejemplo incorrecto 1: Texto con bajo contraste
<p style="color: lightgray; background-color: white;">Este texto tiene un contraste insuficiente.</p>🔴 Problema:
- El texto en gris claro sobre fondo blanco no cumple con el contraste de 7:1.
- Es difícil de leer para personas con baja visión o daltonismo.
Solución correcta: Mejorar el contraste del texto
<p style="color: black; background-color: white;">Este texto tiene un buen contraste.</p>✅ ¿Qué mejora?:
- El negro sobre blanco alcanza un contraste de 21:1, cumpliendo con los estándares de accesibilidad.
- Facilita la lectura en cualquier condición visual.
Ejemplo incorrecto 2: Texto sobre imagen sin fondo opaco
<div style="background-image: url('fondo.jpg');">
<p style="color: yellow;">Texto sobre imagen de fondo</p>
</div>🔴 Problema:
- El texto amarillo puede perderse en partes claras de la imagen.
- No garantiza un contraste de 7:1 en toda la imagen de fondo.
Solución correcta: Usar un fondo opaco detrás del texto
<div style="background-image: url('fondo.jpg'); position: relative;">
<p style="color: white; background-color: rgba(0,0,0,0.8); padding: 5px;">Texto con mejor contraste</p>
</div>✅ ¿Qué mejora?:
- El fondo semitransparente garantiza un contraste suficiente en toda la imagen.
- Mejora la visibilidad sin ocultar completamente la imagen de fondo.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar combinaciones de colores de bajo contraste (ej. gris claro sobre blanco).
- No verificar el contraste en diferentes pantallas y condiciones de luz.
- Asumir que todas las personas ven los colores de la misma manera.
- No considerar cómo los degradados o imágenes afectan la legibilidad.
Cómo evitar estos errores:
- Utilizar herramientas de análisis de contraste como TPGi Colour Contrast Analyser (CCA).
- Probar combinaciones de colores con personas con baja visión.
- Evitar usar solo el color como diferenciador, agregando bordes o subrayado si es necesario.
- Asegurar que el contraste siga siendo adecuado en diferentes configuraciones de pantalla.
Preguntas frecuentes sobre la técnica general G17
¿Cómo puedo medir el contraste de un texto?
Puedes usar herramientas como TPGi Colour Contrast Analyser (CCA) o el Contrast Ratio Analyser en línea.
¿El contraste 7:1 se aplica a todo tipo de texto?
No. Este nivel de contraste es obligatorio solo para textos pequeños o imágenes de texto. Para textos grandes (14pt en negrita o 18pt sin negrita), se permite un contraste de 4.5:1.
¿Qué hacer si mi marca tiene colores con bajo contraste?
Puedes usar una versión de alto contraste de los colores de tu marca o agregar fondos opacos detrás del texto.
¿Cómo afecta esta técnica a los enlaces?
Los enlaces deben tener suficiente contraste con el fondo y, si se diferencian por color, deben agregar un indicador adicional como subrayado o cambio de estilo al pasar el cursor.
Recursos relacionados
- Guía oficial WCAG 2.1 para la Técnica General G17: Garantizar que exista una relación de contraste de al menos 7:1 entre el texto (e imágenes de texto) y el fondo detrás del texto.
- Comprender el criterio de éxito 1.4.6: Contraste (mejorado)
- Analizador de contraste de color (CCA) TPGi: aplicación
- 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
- G148: No especificar el color de fondo, no especificar el color del texto y no utilizar funciones tecnológicas que cambien esos valores predeterminados
- G174: Proporcionar un control con una relación de contraste suficiente que permita a los usuarios cambiar a una presentación que utilice suficiente contraste.
Pruebas y validación
Procedimiento
- Identificar textos e imágenes de texto en la interfaz.
- Usar una herramienta de análisis de contraste para verificar que la relación es de al menos 7:1.
- Comprobar la legibilidad en diferentes dispositivos y condiciones de luz.
Resultados esperados
- ✅ Si el texto tiene un contraste mínimo de 7:1, la implementación es correcta.
- ❌ Si el contraste es menor a 7:1, se debe ajustar la combinación de colores.
Tener un buen contraste entre el texto y el fondo es una parte clave de la accesibilidad web. Aplicando la Técnica G17 de WCAG 2.1, podemos garantizar que más personas, incluidas aquellas con baja visión, puedan acceder y leer el contenido sin dificultad.
📢 ¿Necesitas mejorar la accesibilidad de tu sitio web? ¡Contáctanos y te ayudamos a optimizar tu diseño!