Como tornar gráficos acessíveis a pessoas daltônicas

Um gráfico pode estar tecnicamente correto e ainda assim deixar leitores sem entendê-lo. O culpado costuma ser a cor sendo obrigada a fazer todo o trabalho: uma linha vermelha significa uma coisa, uma verde significa outra, e a legenda é a única chave. Para quem tem deficiência de visão de cores — e para muita gente vendo o gráfico sob reflexo, numa tela ruim ou em preto e branco — isso cria atrito desnecessário.

A solução não é parar de usar cor. É usar a cor como uma pista entre várias. Este guia transforma esse princípio em decisões práticas para gráficos, painéis, mapas e infográficos.

A regra central: a cor não pode ser a única pista

O Critério de Sucesso 1.4.1 da WCAG exige que a cor não seja o único meio visual usado para transmitir informação, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual. Em gráficos de dados, isso significa que o leitor ainda deve conseguir diferenciar categorias, séries, status ou significado sem identificar um matiz.

Boas alternativas incluem:

• Rótulos de texto e valores diretos
• Formas de marcador diferentes em linhas ou pontos
• Estilos de linha sólida, tracejada e pontilhada
• Padrões, texturas ou contornos em barras e áreas
• Ícones claros e texto descritivo na legenda
• Uma tabela de dados ou resumo em texto com a mesma informação essencial

A melhor combinação depende do tipo de gráfico e de o leitor precisar de uma visão rápida ou de valores exatos.

Construa o gráfico em torno da pergunta

Antes de escolher cores, escreva uma frase que declare a mensagem-chave do gráfico. Por exemplo: “As vendas cresceram em todas as regiões, com o maior crescimento no oeste.” Depois verifique se um leitor conseguiria responder a essa pergunta caso visse o gráfico em tons de cinza.

Se a resposta for não, adicione uma pista que não seja cor. Esse teste simples pega o erro de acessibilidade mais comum: usar uma paleta bonita que codifica a informação apenas pelo matiz.

Prefira rótulos diretos a legendas distantes

Legendas obrigam o leitor a associar uma amostra pequena a um elemento do gráfico, às vezes repetidamente. Isso fica mais difícil quando as cores são parecidas ou as linhas se cruzam. Onde houver espaço, rotule a série no fim da linha, coloque os valores ao lado das barras ou anote diretamente o ponto importante.

Por exemplo, em vez de uma linha azul, uma laranja e uma verde com legenda embaixo, escreva o nome da categoria ao lado do ponto final de cada linha. Mantenha o rótulo perto o bastante para não ser confundido com outra série. A cor continua ajudando, mas é o texto que identifica.

Escolha pistas redundantes conforme o tipo de gráfico

Gráficos de linha

Combine estilo de linha, forma de marcador e rótulos no fim. Uma linha sólida com círculos, uma tracejada com quadrados e uma pontilhada com triângulos continuam distinguíveis mesmo com cores parecidas.

Evite séries demais em um só gráfico. Quando forem muitas, considere pequenos múltiplos — gráficos separados com escala consistente — em vez de esperar que o leitor desembarace uma legenda densa.

Gráficos de barras

Use rótulos de categoria e valores diretos. Se as barras representam categorias que precisam ser distinguidas dentro do mesmo grupo, acrescente padrões ou um contorno claro além da cor. A técnica G111 do W3C descreve exatamente o uso conjunto de cor e padrão em barras.

Em barras empilhadas, rotule os segmentos diretamente quando possível e forneça uma tabela de apoio. Segmentos finos são difíceis para todo mundo, mesmo com uma boa paleta.

Gráficos de dispersão e de bolhas

Combine formas de marcador com cor, e use tamanho e contraste suficientes para que os marcadores não desapareçam. Adicione uma borda aos pontos quando o preenchimento for claro ou o fundo for carregado. Se os pontos se sobrepõem, ofereça filtragem, uma tabela de dados ou uma segunda visão que separe os grupos.

Mapas e mapas de calor

Use rótulos, limites, símbolos ou padrões além da cor de preenchimento. Um mapa de transporte, por exemplo, pode associar a cor de cada linha a um marcador de parada distinto. Num mapa coroplético, não deixe a mensagem depender apenas de um gradiente sutil claro-escuro; inclua uma escala visível, valores e uma tabela ou conclusão em texto.

Projete para contraste, não só para matizes diferentes

Cores podem diferir em matiz e ser parecidas em luminosidade, fundindo-se em tons de cinza ou sob uma diferença de visão de cores. O contraste importa especialmente em linhas finas, marcadores pequenos, limites do gráfico e texto.

Para objetos gráficos não textuais necessários à compreensão do gráfico, a orientação da WCAG sobre contraste não textual costuma usar um limiar de 3:1 em relação às cores adjacentes. O contexto importa, e um rótulo ou tabela equivalente às vezes transmite a informação sem exigir que o leitor distinga o gráfico sozinho. Trate a checagem de contraste como parte da revisão de design, não como substituta dos rótulos e das pistas redundantes.

Use o verificador de contraste para explorar o contraste entre primeiro plano e fundo em textos de interface e elementos visuais simples. Depois inspecione o gráfico completo: layouts reais trazem adjacências, traços finos, estados de hover e sobreposições que uma única checagem de par de cores não captura.

Ofereça os dados por trás da imagem

Gráficos são resumos, não substitutos do acesso aos dados. Quando um gráfico sustenta uma decisão ou afirmação importante, inclua um ou mais destes recursos:

• Uma tabela próxima com categorias e valores
• Um resumo escrito e conciso da ideia principal
• Um download acessível, como CSV
• Uma descrição longa para relações visuais complexas
• Tooltips acessíveis por teclado ou uma visão de dados focalizável em gráficos interativos

Isso melhora a usabilidade para quem usa leitor de tela e também para quem não distingue toda codificação visual. E permite que o leitor confira a mensagem sem estimar alturas de barras ou fatias de pizza.

Lista prática de revisão de gráficos

Use antes de publicar um relatório, apresentação, painel de produto ou artigo:

• O título diz do que trata o gráfico e o período coberto?
• Cada série ou categoria pode ser identificada sem depender apenas da cor?
• Os valores essenciais estão rotulados, disponíveis em tabela ou descritos no texto próximo?
• Linhas, marcadores, barras e itens da legenda têm contraste suficiente onde se tocam ou se sobrepõem?
• Os rótulos são legíveis em zoom comum e em tela pequena?
• O gráfico evita rótulos de status vermelho/verde ambíguos como “bom” e “ruim” sem texto ou ícone?
• Quem usa teclado consegue alcançar a informação de um gráfico interativo?
• Uma revisão em tons de cinza ou com simulação de visão de cores revela algum elemento ambíguo?

Teste com conteúdo real e pessoas reais

Checagens automáticas e simulações são bons alertas iniciais, mas não provam que um gráfico funciona para todas as pessoas. Teste o gráfico final no tamanho real, dentro do produto ou documento em que ele vai aparecer. Peça a alguém que identifique a série mais importante, o valor mais alto e a conclusão, sem receber ajuda.

Nosso simulador de visão de cores ajuda designers a explorar como uma imagem pode aparecer em várias diferenças comuns de visão de cores. Trate-o como uma etapa extra de revisão, não como substituto de pesquisa com usuários ou de avaliação WCAG.

Para orientações mais amplas de interface, veja design para daltonismo.

Exemplo: melhorando um gráfico de status

Imagine um painel com cinco departamentos: barras verdes significam dentro da meta, vermelhas significam atrasado e amarelas significam em risco. Uma versão mais acessível poderia:

1. Acrescentar a palavra de status a cada barra: “Na meta”, “Em risco” ou “Atrasado”.
2. Usar um ícone no rótulo, como um visto, um triângulo de alerta ou uma seta, com texto que o explique.
3. Usar padrões ou contornos como segunda pista visual.
4. Mostrar a porcentagem real e o valor da meta.
5. Oferecer uma tabela abaixo do gráfico com departamento, valor atual, meta e status.

A cor continua deixando o padrão mais rápido de escanear para muitas pessoas. Ela apenas deixa de ser o único caminho para a compreensão.

Em resumo

Gráficos acessíveis tornam a mensagem resistente. Rótulos diretos, padrões, estilos de linha, contraste e dados equivalentes ajudam pessoas com deficiência de visão de cores a entender a mesma informação que todo mundo — e deixam o seu trabalho mais claro para o público inteiro.