Técnica Técnicas generales WCAG 2.2
G209Distinguir con contraste suficiente los colores contiguos de un gráfico
Nombre oficial en el W3C: Proporcionar suficiente contraste en los límites entre colores adyacentes
En pocas palabras
En gráficos de sectores, mapas y otros gráficos con zonas de colores pegadas, hay que distinguir dónde acaba una zona y empieza otra. Para ello, dos colores contiguos deben tener entre sí un contraste de al menos 3:1. Si no lo tienen, se separan con un borde que sí alcance 3:1 con cada uno de ellos.
Por qué es importante
Si dos porciones de un gráfico tienen colores parecidos, una persona con baja visión las ve como una sola mancha. Así no puede saber cuántas partes hay ni qué tamaño tiene cada una.
Por ejemplo, en un mapa de una comarca con municipios en tonos de verde, no se sabría dónde está el límite de cada municipio. Es un requisito de nivel AA (criterio 1.4.11).
Cómo se hace
- Identifique en el gráfico las zonas de color que se tocan y cuyo límite transmite información.
- Elija colores que alternen entre claros y oscuros, para que cada par contiguo llegue a 3:1.
- Si prefiere colores parecidos, añada una línea de separación que alcance 3:1 con los dos colores que separa.
- Si hay colores claros y oscuros a la vez, una línea doble blanca y negra funciona con todos.
- Acompañe el gráfico con etiquetas o una tabla de datos, para no depender solo del color.
Cómo comprobarlo
- Para cada gráfico necesario para entender el contenido, anote los colores que se tocan.
- Con una herramienta de contraste (por ejemplo, Colour Contrast Analyser y su cuentagotas), mida cada par de colores contiguos.
- Si hay un borde, mida el borde contra cada uno de los colores que separa.
- Compruebe que todas las medidas llegan al menos a 3:1.
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 G209 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
Para gráficos que utilizan varios colores adyacentes entre sí.
Descripción
El objetivo de esta técnica es garantizar que las personas con baja visión moderada puedan distinguir los límites entre segmentos de color contiguos.
El criterio de conformidad sobre contraste no textual utiliza el término «objeto gráfico» para abarcar tanto los gráficos pequeños y sencillos como las partes de gráficos más grandes y complejos. Esta técnica se centra en los segmentos de color sólido en los que los límites entre colores transmiten significado.
Al seleccionar los colores de gráficos con varios colores, tenga en cuenta los colores contiguos y compruebe que la relación de contraste es de al menos 3:1. Si los colores contiguos tienen una relación de contraste inferior a 3:1 entre sí, añada un borde con una relación de contraste de al menos 3:1 con cada uno de los colores.
Ejemplos
Gráfico de sectores con colores claros y oscuros alternos
Gráfico de sectores con bordes entre los segmentos
Mapa con límites marcados por bordes
Gráfico de sectores con bordes en blanco y negro
Pruebas
Procedimiento
Para cada objeto gráfico necesario para la comprensión, utilizar una herramienta de contraste de color para:
- Medir la relación de contraste de cada color respecto al color o colores adyacentes o al borde (si existe).
- Comprobar que la relación de contraste es de al menos 3:1 para cada color adyacente o borde (si existe).
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
- Comprender el criterio de conformidad 1.4.3 Contraste mínimo enumera herramientas de contraste de color.
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 G209 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.