¿Cómo diseño un gráfico o una infografía que se entienda sin depender del color y sin ver la imagen?

En periodismo y comunicación, un gráfico suele ser la prueba de la nota. Si solo se entiende viéndolo y distinguiendo colores, deja afuera a personas con daltonismo o baja visión y a quienes usan lector de pantalla. El texto alternativo ayuda, pero no alcanza cuando hay muchos datos: hace falta que el gráfico esté bien diseñado y que los datos estén disponibles también como texto.

Las pautas piden que el color no sea la única forma de transmitir información (WCAG 1.4.1). En un gráfico, sumá al menos una de estas señales:

• Etiquetas directas sobre cada barra, línea o porción, en lugar de una leyenda lejana que obliga a ir y venir.
• Formas distintas en los puntos de cada línea: círculo, cuadrado, triángulo.
• Estilos de línea: continua, punteada, a rayas.
• Tramas o texturas en barras y porciones, cuando las etiquetas no entran.

Evitá las combinaciones rojo y verde, y azul y violeta, que son las que más se confunden.

Las barras, líneas y porciones necesitan un contraste de al menos 3:1 con el fondo y con los elementos vecinos (WCAG 1.4.11). El texto de ejes, etiquetas y fuentes, al menos 4,5:1. Podés medir cada par de colores en el verificador de contraste.

• Texto alternativo con la conclusión: qué muestra el gráfico y cuál es el dato clave, en una o dos oraciones. La guía de texto alternativo de gráficos explica cómo escribirlo.
• Una tabla con los datos cuando el gráfico tiene muchos valores. Una tabla real permite recorrer los datos celda por celda con el lector de pantalla. En redes, donde no hay tablas, podés poner los datos clave en el texto del posteo o enlazar a la nota con la tabla.
• El análisis en el cuerpo de la nota. Si el gráfico necesita una explicación larga, va en el texto, cerca del gráfico, y no solo en el alt.

Un gráfico con su tabla de datos, que se muestra al tocar un botón:

<figure>
  <img src="ventas.svg"
       alt="Ventas por trimestre en 2025: crecieron todo el año y el último trimestre fue el más alto, con 18 millones de dólares.">
  <figcaption>
    Ventas trimestrales 2025.
    <button type="button" aria-expanded="false" aria-controls="datos-ventas">
      Ver los datos en una tabla
    </button>
  </figcaption>
</figure>

<div id="datos-ventas" hidden>
  <table>
    <caption>Ventas trimestrales 2025, en millones de dólares</caption>
    <thead>
      <tr><th scope="col">Trimestre</th><th scope="col">Ventas</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Primero</th><td>12</td></tr>
      <tr><th scope="row">Segundo</th><td>15</td></tr>
      <tr><th scope="row">Tercero</th><td>14</td></tr>
      <tr><th scope="row">Cuarto</th><td>18</td></tr>
    </tbody>
  </table>
</div>

El botón tiene que cambiar aria-expanded a true y quitar hidden al abrirse. Si usás gráficos en SVG, revisá que se puedan ampliar al 200 % sin que se corten ni obliguen a desplazarse de costado.

• Infografías largas para redes: dividilas en un carrusel con un dato por imagen y un alt para cada una. Una sola imagen vertical con veinte datos no se puede describir bien.
• Gráficos interactivos (los que muestran el valor al pasar el mouse): ese valor también tiene que aparecer con el teclado, al enfocar el punto, o estar en la tabla.
• Mapas de calor y mapas coloreados: sumá el valor escrito en cada zona o una tabla ordenada.

Revisado en noviembre de 2026 con los criterios 1.4.1 Uso del color y 1.4.11 Contraste no textual del W3C (en inglés).