Técnica Técnicas generales WCAG 2.2
G111Usar tramas y formas además del color en gráficos e imágenes
Nombre oficial en el W3C: Usar color y patrones
En pocas palabras
En gráficos, mapas y esquemas es habitual distinguir cosas solo por el color. Esta técnica pide añadir también una diferencia que no dependa del color: tramas como rayas o puntos, formas distintas o tipos de línea. Así la información se entiende aunque no se distingan los colores.
Por qué es importante
Las personas con daltonismo o con baja visión no siempre distinguen unos colores de otros. Tampoco se distinguen al imprimir en blanco y negro ni en pantallas con poco contraste.
Por ejemplo, en un gráfico de barras con los resultados de unas elecciones, el rojo y el verde pueden parecer iguales. La persona no sabe qué barra corresponde a cada partido.
Cómo se hace
- Dé a cada serie de un gráfico una trama propia (rayas, cuadros, puntos) además de su color.
- En mapas y planos, use formas distintas para cada categoría: círculo, cuadrado, triángulo.
- En líneas y flechas, combine el color con el tipo de trazo: continuo, discontinuo o de puntos.
- Use las mismas tramas y formas en la leyenda para que cada elemento se pueda identificar.
- Si puede, ponga también etiquetas de texto junto a los datos.
Cómo comprobarlo
- Localice las imágenes y gráficos que usan colores para transmitir información.
- Véalos en escala de grises. Puede usar un simulador de daltonismo o imprimirlos en blanco y negro.
- Compruebe que todavía se distingue cada elemento y que coincide con su entrada de la leyenda.
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 G111 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 que admiten imágenes.
Descripción
El objetivo de esta técnica es garantizar que, cuando se utilizan diferencias de color para transmitir información dentro de un contenido no textual, se incluyan también patrones que transmitan la misma información de una manera que no dependa del color.
Ejemplos
Un sitio inmobiliario ofrece un gráfico de barras con el precio medio de la vivienda en varias regiones de Estados Unidos. La barra de cada región se muestra con un color sólido distinto y con un patrón distinto. La leyenda utiliza los mismos colores y patrones para identificar cada barra.
Un mapa en línea de una red de transporte muestra cada ruta con un color diferente. Las paradas de cada ruta se marcan con un icono distintivo, como un rombo, un cuadrado o un círculo, para ayudar a diferenciar cada ruta.
Un diagrama de flujo describe un conjunto de pasos iterativos para completar un proceso. Utiliza líneas discontinuas con flecha sobre fondo verde para señalar el paso siguiente del proceso cuando se cumple la condición indicada, y líneas de puntos con flecha sobre fondo rojo para señalar el paso siguiente cuando la condición indicada no se cumple.
El contenido incluye un juego interactivo. Las fichas de los 4 jugadores se distinguen entre sí tanto por el color como por el patrón.
Pruebas
Procedimiento
Para cada imagen de la página web que utilice diferencias de color para transmitir información:
- Comprobar que toda la información que se transmite mediante el color se transmite también mediante patrones que no dependen del color.
Resultados esperados
- La comprobación n.º 1 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 G111 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.