Cómo hacer gráficos accesibles para el daltonismo

Un gráfico puede ser técnicamente correcto y aun así resultar incomprensible. El culpable habitual es pedirle al color que haga todo el trabajo: una línea roja significa una cosa, una verde otra, y la leyenda es la única clave. Para las personas con deficiencia en la visión del color —y para quienes miran un gráfico con reflejos, en una pantalla mala o en blanco y negro— eso genera una fricción innecesaria.

La solución no es dejar de usar el color, sino usarlo como una señal entre varias. Esta guía convierte ese principio en decisiones prácticas para gráficos, cuadros de mando, mapas e infografías.

La regla básica: el color no puede ser la única señal

El criterio de éxito 1.4.1 de WCAG exige que el color no sea el único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. En los gráficos de datos, eso significa que quien lee debe poder diferenciar categorías, series, estados o significados sin identificar un tono.

Buenas alternativas:

• Etiquetas de texto y valores directos
• Formas de marcador distintas en líneas o puntos
• Estilos de línea continua, discontinua y punteada
• Tramas, texturas o contornos en barras y áreas
• Iconos claros y textos de leyenda descriptivos
• Una tabla de datos o un resumen en texto con la misma información esencial

La mejor combinación depende del tipo de gráfico y de si el lector necesita una visión rápida o valores exactos.

Construye el gráfico en torno a la pregunta

Antes de elegir colores, escribe una frase con el mensaje clave del gráfico. Por ejemplo: «Las ventas crecieron en todas las regiones, con el mayor crecimiento en el oeste». Luego comprueba si alguien podría responder a esa pregunta viendo el gráfico en escala de grises.

Si la respuesta es no, añade una señal no cromática. Esta única prueba detecta el error de accesibilidad más común: usar una paleta atractiva que codifica la información solo mediante el tono.

Prefiere etiquetas directas a una leyenda distante

Las leyendas obligan a emparejar una pequeña muestra de color con un elemento del gráfico, a veces una y otra vez. Esto se complica cuando los colores son parecidos o las líneas se cruzan. Cuando haya espacio, etiqueta la serie al final de la línea, coloca los valores junto a las barras o anota directamente el punto importante.

Por ejemplo, en lugar de una línea azul, otra naranja y otra verde con una leyenda al pie, añade el nombre de la categoría junto al punto final de cada línea. Mantén la etiqueta lo bastante cerca para que no se confunda con otra serie. El color sigue ayudando, pero es el texto el que identifica.

Adapta las señales redundantes al tipo de gráfico

Gráficos de líneas

Combina estilo de línea, forma de marcador y etiquetas finales. Una línea continua con círculos, una discontinua con cuadrados y una punteada con triángulos siguen siendo distinguibles aunque sus colores se parezcan.

Evita meter demasiadas series en un mismo gráfico. Cuando haya muchas, plantéate «small multiples» —gráficos separados con la misma escala— en lugar de esperar que el lector desenrede una leyenda densa.

Gráficos de barras

Usa etiquetas de categoría y valores directos. Si las barras representan categorías que deben distinguirse dentro del mismo grupo, añade tramas o un contorno claro además del color. La técnica G111 del W3C describe expresamente el uso conjunto de color y trama en las barras.

En barras apiladas, etiqueta los segmentos directamente cuando sea posible y ofrece una tabla de apoyo. Los segmentos finos son difíciles de leer para cualquiera, incluso con una buena paleta.

Diagramas de dispersión y de burbujas

Combina formas de marcador con color y usa un tamaño y contraste suficientes para que los marcadores no desaparezcan. Añade un borde a los puntos cuando el relleno sea claro o el fondo esté cargado. Si los puntos se solapan, ofrece filtros, una tabla de datos o una segunda vista que separe los grupos.

Mapas y mapas de calor

Usa etiquetas, límites, símbolos o tramas además del color de relleno. Un mapa de transporte, por ejemplo, puede acompañar el color de cada línea con un marcador de parada distintivo. En un mapa coroplético, no hagas que el mensaje exacto dependa solo de un degradado sutil de claro a oscuro: incluye una escala visible, los valores y una tabla o una conclusión en texto.

Diseña para el contraste, no solo para tonos distintos

Dos colores pueden diferir en tono pero tener una luminosidad parecida, de modo que se funden en escala de grises o con una diferencia en la visión del color. El contraste es especialmente importante en líneas finas, marcadores pequeños, límites del gráfico y texto.

Para los objetos gráficos no textuales necesarios para entender el gráfico, la guía de contraste no textual de WCAG utiliza en general un umbral de 3:1 frente a los colores adyacentes. El contexto importa, y a veces una etiqueta o una tabla equivalente puede transmitir la información sin obligar a distinguir el gráfico por sí solo. Trata la comprobación de contraste como una parte de la revisión de diseño, no como un sustituto de las etiquetas y las señales redundantes.

Usa el comprobador de contraste para explorar el contraste entre primer plano y fondo en texto de interfaz y elementos visuales sencillos. Después revisa el gráfico completo: los diseños reales introducen adyacencias, trazos finos, estados de hover y superposiciones que una única comprobación de par de colores no capta.

Ofrece los datos que hay detrás de la imagen

Los gráficos son resúmenes, no sustitutos del acceso a los datos. Cuando un gráfico sostiene una decisión o una afirmación importante, incluye una o más de estas opciones:

• Una tabla cercana con categorías y valores
• Un resumen escrito y conciso de la idea principal
• Una descarga accesible, por ejemplo en CSV
• Una descripción larga para relaciones visuales complejas
• Tooltips accesibles por teclado o una vista de datos enfocable en gráficos interactivos

Esto mejora la usabilidad tanto para quienes usan lector de pantalla como para quienes no distinguen todas las codificaciones visuales. Además, permite verificar el mensaje sin estimar alturas de barras ni porciones de tarta.

Lista práctica de revisión de gráficos

Úsala antes de publicar un informe, una presentación, un panel de producto o un artículo:

• ¿El título indica de qué trata el gráfico y el periodo temporal?
• ¿Se puede identificar cada serie o categoría sin recurrir solo al color?
• ¿Los valores esenciales están etiquetados, disponibles en una tabla o descritos en el texto cercano?
• ¿Las líneas, marcadores, barras y elementos de leyenda tienen contraste suficiente donde se tocan o se solapan?
• ¿Las etiquetas se leen con un zoom normal y en una pantalla pequeña?
• ¿El gráfico evita etiquetas de estado rojo/verde ambiguas, como «bien» y «mal», sin texto ni icono?
• ¿Puede alguien que navega con teclado acceder a la información de un gráfico interactivo?
• ¿Una revisión en escala de grises o con simulación de visión del color revela elementos ambiguos?

Prueba con contenido real y personas reales

Las comprobaciones automáticas y las simulaciones son útiles como alerta temprana, pero no demuestran que un gráfico funcione para todas las personas. Prueba el gráfico terminado a su tamaño real, en el producto o documento donde aparecerá. Pide a alguien que identifique la serie más importante, el valor más alto y la conclusión, sin darle pistas.

Nuestro simulador de visión del color ayuda a explorar cómo puede verse una imagen con varias diferencias comunes de visión del color. Tómalo como un paso más de revisión, no como sustituto de la investigación con usuarios o de una evaluación WCAG.

Para orientación más amplia sobre interfaces, consulta diseñar para el daltonismo.

Ejemplo: mejorar un gráfico de estado

Imagina un panel con cinco departamentos: las barras verdes indican «en objetivo», las rojas «por detrás» y las amarillas «en riesgo». Una versión más accesible podría:

1. Añadir la palabra del estado a cada barra: «En objetivo», «En riesgo» o «Por detrás».
2. Usar un icono en la etiqueta, como una marca de verificación, un triángulo de alerta o una flecha, con texto que lo explique.
3. Usar tramas o contornos como segunda señal visual.
4. Mostrar el porcentaje real y el valor objetivo.
5. Añadir bajo el gráfico una tabla con departamento, valor actual, objetivo y estado.

El color sigue haciendo que el patrón se capte más rápido para muchas personas. Simplemente deja de ser la única vía para entenderlo.

En resumen

Los gráficos accesibles hacen que el mensaje resista. Las etiquetas directas, las tramas, los estilos de línea, el contraste y los datos equivalentes permiten que las personas con deficiencia en la visión del color entiendan la misma información que el resto, y hacen tu trabajo más claro para toda la audiencia.