Um gráfico acessível comunica a mesma relação por mais de um recurso visual e oferece uma forma textual de consultar a informação. Para desenhar um gráfico de linhas, combine cores com rótulos, traços ou formas que continuem distintos quando a cor perde força. Acrescente uma síntese que responda à pergunta principal e apresente os dados em uma tabela quando for necessário consultar valores. Comece pela mensagem do gráfico. Ela orienta o que precisa ficar visível no primeiro olhar e o que pode aparecer em uma camada de detalhe.
Defina a comparação antes de escolher a paleta
Imagine um relatório de um centro cultural que compara inscrições em oficinas presenciais e online de janeiro a junho. A pergunta é quando as oficinas presenciais passaram a receber mais inscrições. Duas linhas permitem ver o cruzamento. Se o objetivo fosse comparar somente os totais do semestre, duas barras fariam o trabalho com menos informação. Escreva a pergunta como um teste de projeto. Alguém deve conseguir localizar o mês da mudança e apontar as duas séries sem depender de uma legenda baseada exclusivamente em cores.
Decida também quais valores merecem destaque. Se junho tem a maior diferença, um rótulo com os valores das duas séries naquele mês pode tornar a distância concreta. Colocar números em todos os pontos sobrecarregaria a parte do gráfico em que as linhas se encontram. Reserve os dados exatos para uma tabela e mantenha no desenho as anotações que sustentam a comparação. O artigo sobre Flourish e histórias visuais com dados explora outras maneiras de escolher uma estrutura visual a partir do que o público precisa entender.
Identifique cada série no lugar em que ela aparece
Tente escrever “Presenciais” e “Online” perto do final de cada linha. Rótulos diretos reduzem o percurso entre o desenho e a chave de leitura. Quando as linhas terminam muito próximas, desloque os nomes e use uma pequena guia que mostre a qual linha pertencem. Se não houver espaço lateral no celular, uma legenda acima do gráfico pode funcionar. Repita ali o padrão de traço e o marcador usados na área de dados. Assim, a pessoa tem duas pistas para fazer a correspondência mesmo sem perceber bem o matiz.
No cruzamento, revise o que acontece com cada traço. Uma linha contínua e outra tracejada podem se distinguir bem em segmentos longos. Se os pontos estiverem próximos, os traços podem parecer manchas após a redução. Nesse caso, teste formas diferentes nos pontos que ajudam a seguir a série. Use a menor espessura que continue reconhecível na renderização final e dê espaço aos rótulos. Um marcador com contorno pode preservar a distinção em um fundo claro ou quando as duas séries se aproximam.
Verifique contraste e uso da cor em separado
O critério 1.4.1 da WCAG trata do uso da cor como único meio visual para transmitir informação. O critério 1.4.11 trata do contraste de partes gráficas necessárias para entender o conteúdo, considerando as cores adjacentes conforme o caso. Um gráfico com cores fortes ainda pode exigir outra pista para distinguir categorias. Um gráfico com dois padrões diferentes também pode ser difícil de ler quando os traços mal aparecem sobre o fundo. Faça as duas verificações na versão final, inclusive nas variantes de fundo ou tema realmente usadas pelo site. Critério de uso da cor do WAI e critério de contraste não textual do WAI.
Confira também os rótulos, pois são texto e seguem critérios próprios. O relatório WebAIM Million de 2026 detectou texto com baixo contraste em 83,9% das páginas iniciais avaliadas. A análise automatizada dá dimensão à frequência desse problema nas páginas estudadas. A leitura de um gráfico específico ainda pede um teste manual, incluindo o cruzamento de linhas, a clareza das legendas e a associação de cada número com sua unidade. Relatório WebAIM Million 2026.
Ofereça a descoberta e os dados no texto
Inclua perto da figura uma frase que diga o que a comparação revela. “As inscrições presenciais ultrapassaram as online em abril e seguiram à frente até junho” oferece ao leitor a conclusão do exemplo. Se o gráfico estiver em uma imagem informativa, dê a ela um texto alternativo breve que identifique o assunto e a função. Uma descrição mais completa pode vir no texto ao redor, junto com uma tabela quando os valores exatos forem úteis. O tutorial do WAI sobre imagens complexas mostra formas de disponibilizar essas duas camadas. Tutorial do WAI sobre imagens complexas.
Dê à tabela um título que explique o período e use cabeçalhos para identificar mês, modalidade e unidade. Se a tabela ficar em uma seção recolhível, ofereça um controle com rótulo claro e coloque a síntese principal sempre perto da figura. Para um gráfico interativo com filtros, mantenha a síntese e a tabela alinhadas ao recorte selecionado. Caso contrário, a pessoa pode ler uma conclusão que pertence a outro período. O guia sobre texto alternativo em imagens editoriais ajuda a ajustar a descrição à função da figura.
Teste uma tarefa real sem a legenda colorida
Passe o gráfico para tons de cinza como primeiro diagnóstico. Peça que alguém encontre o mês do cruzamento e indique qual linha termina acima. Depois repita na menor largura prevista e com ampliação. O teste em cinza revela dependência de matiz, enquanto o de largura mostra se rótulos, formas e guias sobrevivem quando há menos espaço. Verifique a aparência na página publicada, pois o navegador pode redimensionar o arquivo e alterar a legibilidade de linhas finas.
Se a versão compacta esconder pontos menores, mantenha o dado completo por perto e indique o que foi simplificado. Em gráficos interativos, confira se a informação que aparece ao passar o mouse também pode ser alcançada por teclado e por toque ou obtida por outro caminho equivalente. Uma dica flutuante pode facilitar a exploração, mas seu conteúdo precisa fazer parte da revisão. Prototipe o estado de foco e observe se os rótulos continuam legíveis quando a dica cobre parte do desenho.
Quando houver uma série com dados faltantes, indique a lacuna com um intervalo no traço e explique a ausência no texto ou na tabela. Unir os pontos dos meses vizinhos pode sugerir continuidade onde a equipe só tem observações separadas. Da mesma forma, um zero precisa aparecer como valor quando houve medição. Inclua uma lacuna e um zero nas amostras de revisão. Peça a alguém para distinguir os dois em cada versão. Esse teste revela se o gráfico está comunicando tanto os limites do conjunto quanto a comparação.
Vale usar sempre padrões ou marcadores?
Use o recurso que melhor separa as séries naquela composição. Em barras, rótulos diretos e posição podem ser suficientes. Em linhas que se cruzam, um padrão de traço combinado com rótulos costuma ajudar. Para muitas categorias, experimente pequenos gráficos com a mesma escala ou reduza o conjunto inicial à comparação principal. Quanto mais pistas sobrepostas, maior o esforço para entender quais são relevantes.
O que deve entrar na entrega?
Entregue as versões larga e estreita, a síntese textual, a tabela ou fonte dos valores e uma anotação que mostre como cada série se diferencia. Guarde uma captura sem cor e outra com o maior zoom testado. Quando alguém trocar a paleta ou acrescentar uma série, a equipe poderá refazer a mesma tarefa de leitura e verificar se a informação continua disponível.