Técnica CSS WCAG 2.2
C23Especificar los colores del texto y del fondo del contenido secundario, como barras de navegación, menús o tabla de contenidos, y dejar sin especificar los colores del contenido principal
En resumen
Esta técnica propone definir con CSS los colores solo en las zonas secundarias de la página (navegación, menús, índice) y no fijarlos en el contenido principal, para que este adopte los colores que el usuario haya configurado en su navegador. Así, quienes necesitan combinaciones de color concretas para leer con comodidad las obtienen sin perder las pistas visuales que distinguen las distintas partes de la página.
Aplicabilidad
CSS
Descripción
Algunas páginas web utilizan colores para identificar distintas agrupaciones. El objetivo de esta técnica es permitir a los usuarios seleccionar combinaciones de color concretas para el texto y el fondo del contenido principal, conservando al mismo tiempo las pistas visuales sobre las agrupaciones y la organización de la página web. Cuando un usuario anula los colores de primer plano y de fondo de todo el texto de una página, pueden perderse las pistas visuales sobre la agrupación y la organización de la página web, lo que la hace mucho más difícil de entender y de usar.
Cuando el autor no especifica los colores del texto y del fondo del contenido principal, es posible cambiar los colores de esas regiones en el navegador sin necesidad de anular los colores con una hoja de estilos de usuario. Especificar los colores del texto y del fondo del contenido secundario implica que el navegador no anulará esos colores.
Con esta técnica, el autor utiliza el color de texto y el color de fondo predeterminados en el área principal. Como resultado, los colores quedan completamente determinados por el agente de usuario a través de las preferencias de color del usuario. El usuario puede asegurarse de que la selección de colores se ajusta lo mejor posible a sus necesidades y le ofrece la mejor experiencia de lectura.
Ejemplos
Una página web en HTML utiliza CSS para especificar los colores del texto y del fondo de todo el contenido secundario, como las barras de navegación, las barras de menú y la tabla de contenidos. No se especifica ni el color del texto ni el del fondo del contenido principal. El usuario establece sus propias preferencias de color en el navegador, de modo que ve el contenido principal con los colores y contrastes que mejor le funcionan. La distinción entre las distintas secciones de la página sigue siendo visualmente evidente.
Una revista de música tiene un artículo con texto azul sobre fondo blanco. El sitio ofrece, cerca del inicio de la página, un enlace que asigna a la página una hoja de estilos distinta. La nueva hoja de estilos no tiene especificado ningún color para el texto ni para el fondo.
Pruebas
Procedimiento
-
Cambiar en la configuración del navegador los colores del texto, de los enlaces y del fondo de modo que sean distintos del color predeterminado y distintos de los especificados en el contenido secundario.
No seleccione la opción que indica al navegador que ignore los colores especificados en la página.
- Comprobar que el contenido principal utiliza los nuevos colores de texto, de enlaces y de fondo.
- Comprobar que los colores del texto, de los enlaces y de los fondos del contenido secundario no han cambiado.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C23 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
