Técnica Técnicas generales WCAG 2.2
G175Ofrecer un selector para elegir el color del texto y del fondo
Nombre oficial en el W3C: Proporcionar en la página una herramienta de selección de varios colores para el texto y el fondo
En pocas palabras
La web incluye un control para que cada persona elija el color del texto y el color del fondo. La elección se guarda y se aplica en el resto de páginas del sitio. Así, quien lee mejor con una combinación concreta no tiene que buscar la opción en la configuración del navegador.
Por qué es importante
Muchas personas con dislexia, con discapacidad intelectual o con baja visión leen mal el texto negro sobre fondo blanco. A algunas les ayuda una combinación muy concreta, como texto marrón sobre fondo azul claro.
Cambiar los colores desde el navegador o desde el sistema operativo es complicado para muchas de ellas. Un selector en la propia página les permite leer cómodamente sin esa dificultad.
Cómo se hace
- Coloque un control visible, por ejemplo «Cambiar colores», en la cabecera o en una página de preferencias.
- Ofrezca muchas opciones para el texto y para el fondo: una paleta amplia o un campo donde escribir el código de color.
- Guarde la elección del usuario, por ejemplo en una cookie, en el almacenamiento del navegador o en su perfil.
- Haga que todas las páginas lean esa preferencia al cargarse y apliquen los colores elegidos.
- Incluya una opción para volver a los colores originales.
- Asegúrese de que el propio selector se puede usar con teclado y con lector de pantalla (programa que lee en voz alta la pantalla).
Cómo comprobarlo
- Busque en la página un control identificado como selector de colores.
- Compruebe que ofrece variedad de colores para el texto y para el fondo.
- Elija una combinación nueva y compruebe que el contenido cambia a esos colores.
- Abra otra página del sitio y compruebe que mantiene la combinación elegida.
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 G175 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
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 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 G175 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.