Técnica Técnicas generales WCAG 2.2
G175Proporcionar en la página una herramienta de selección de varios colores para el texto y el fondo
En resumen
Esta técnica consiste en incluir en el sitio web un selector de colores que permita al usuario elegir y guardar los colores del texto y del fondo que mejor le funcionen, y que el resto de páginas apliquen esa preferencia. Beneficia a muchas personas con discapacidad cognitiva o dislexia, que leen mejor con combinaciones de colores poco habituales (por ejemplo, marrón sobre azul) y a quienes les resulta complicado cambiar esos ajustes en el navegador o en el sistema operativo.
Aplicabilidad
Cualquier tecnología que permita a los usuarios almacenar preferencias para reutilizarlas en otras páginas.
Descripción
El objetivo de esta técnica es incluir en una página web o en un conjunto de páginas web un control que permita a los usuarios indicar los colores de primer plano y de fondo que prefieren para el contenido. Esta técnica puede implementarse con cualquier tecnología que permita a los usuarios almacenar preferencias que puedan utilizarse en varias páginas. Con esta técnica, el autor incluye en el sitio un control selector de colores que permite a los usuarios elegir y guardar sus preferencias de color de primer plano y de fondo para utilizarlas en otras páginas del sitio. Las páginas se diseñan para buscar estas preferencias y adaptarse en consecuencia cuando se encuentran ajustes guardados.
Muchos usuarios con discapacidad cognitiva tienen dificultades con el texto negro habitual sobre fondo blanco. A veces leen mucho mejor el texto utilizando otros colores para el texto y el fondo, y en ocasiones esas combinaciones de colores son muy específicas y distintas de lo que otra persona esperaría (por ejemplo, marrón sobre azul).
A algunos de estos usuarios les resultará difícil configurar los colores mediante los ajustes de color del navegador o del sistema operativo. Ofrecer en la página web una herramienta con una amplia gama de colores de primer plano y de fondo les permitirá cambiar los colores fácilmente sin tener que rebuscar en la configuración del navegador.
Ejemplos
El usuario puede escribir valores hexadecimales en los campos de texto. El enlace «pick» (elegir) abre una herramienta de selección de color para el campo contiguo.
La herramienta de selección de color abierta para elegir un color.
Este es un ejemplo funcional de esta técnica implementado con PHP, JavaScript, CSS y HTML: Ejemplo de selector de colores.
Pruebas
Procedimiento
- Comprobar que en la página hay un control identificado como herramienta de selección de color.
- Comprobar que la herramienta de selección de color ofrece una variedad de opciones de color para el texto y el fondo.
- Seleccionar nuevos colores para el texto y el fondo con la herramienta.
- Comprobar que el contenido se actualiza para utilizar las combinaciones de color seleccionadas.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 4 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 G175 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.
