Técnica Técnicas generales WCAG 2.2
G156Permitir que el usuario cambie los colores del texto y del fondo
Nombre oficial en el W3C: Usar una tecnología con agentes de usuario comunes que permitan cambiar el color de primer plano y de fondo de los bloques de texto
En pocas palabras
Algunas personas necesitan leer con unos colores concretos, por ejemplo texto amarillo sobre fondo negro. Los navegadores permiten elegir esos colores. Esta técnica pide crear la web con tecnologías que lo admitan, como HTML y CSS, y no bloquear esa opción.
Por qué es importante
Para personas con dislexia, otras dificultades de lectura o baja visión, ciertas combinaciones de colores hacen el texto mucho más legible.
Si la web impide cambiar los colores, por ejemplo porque el texto está dentro de una imagen, esas personas no pueden adaptarla y dejan de leer.
Cómo se hace
- Construya la página con HTML y CSS. Ponga el texto como texto real, no como imagen.
- No use trucos que fuercen sus colores por encima de los del usuario, como scripts que vuelven a aplicarlos.
- Si usa fondos de color para separar zonas (cabecera, menú, contenido), ponga también bordes o espacios. Así la estructura no se pierde si el usuario cambia los colores.
- Si le resulta útil, dé color a la cabecera y al menú, pero deje sin color fijo el contenido principal.
- Puede añadir un enlace con instrucciones para cambiar los colores en los navegadores más usados.
Cómo comprobarlo
- Abra la página en un navegador que permita elegir colores. En Firefox está en Ajustes, apartado Colores. En Windows también sirven los temas de contraste.
- Elija colores de texto y fondo distintos de los de la web.
- Vuelva a la página y compruebe que el texto se muestra con los colores elegidos.
- Revise que se siguen distinguiendo las zonas de la página.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G156 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías
Descripción
Algunas personas con discapacidad cognitiva necesitan combinaciones de color concretas entre el texto de primer plano y el fondo para poder comprender correctamente el contenido de la página web. La mayoría de los navegadores más utilizados ofrecen la opción de cambiar la configuración de colores de forma global dentro del navegador. En ese caso, los colores seleccionados por el usuario sustituyen a los colores de primer plano y de fondo especificados por el autor de la web.
Para cumplir este criterio de conformidad, el autor de la web diseñaría la página de modo que funcione con los navegadores que disponen de estos controles, y no anularía dichos controles.
Tenga en cuenta que anular los colores de primer plano y de fondo de todo el texto de una página puede ocultar las pistas visuales sobre la agrupación y la organización de la página web, lo que hace mucho más difícil comprenderla y utilizarla. Esta técnica puede no ser adecuada cuando los colores de fondo se usan para delimitar áreas de la página. Esta técnica puede ser adecuada para tecnologías y agentes de usuario que no alteran los colores de los bordes cuando se anulan los colores de fondo. Si los colores de fondo se usan para delimitar áreas de la página, puede utilizarse «Especificar en CSS los colores de texto y fondo del contenido secundario, como banners, destacados y navegación, sin especificar los colores de texto y fondo del contenido principal» para permitir que el usuario controle los colores del texto principal conservando al mismo tiempo la estructura visual de la página web.
Ejemplos
- Una página web se diseña con HTML y CSS para especificar los colores de primer plano y de fondo. El usuario establece sus propios colores en el navegador y puede ver el contenido con los colores de primer plano y de fondo que ha elegido.
- Una página web se diseña con HTML y CSS. En la página hay un enlace a instrucciones sobre cómo configurar los colores en distintos navegadores.
Pruebas
Procedimiento
- Abrir la página web en un navegador que permita a los usuarios cambiar los colores del contenido HTML.
- Cambiar los colores de primer plano y de fondo en la configuración del navegador de modo que sean distintos de los especificados en el contenido.
- Volver a la página y comprobar que los nuevos colores de texto de primer plano y de fondo especificados en el navegador sustituyen a los colores especificados en el contenido.
Resultados esperados
- La comprobación n.º 3 es verdadera.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G156 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.