Cores para gráficos que se leem bem

Em um gráfico, use poucas cores, diferentes em claridade e não só em tom, e pinte de cor apenas o que você quer que a pessoa veja. Todo o resto vai em cinza. Para categorias (frutas, bairros, meses de um ano), use cores bem distintas entre si. Para valores que sobem de pouco a muito, use um degradê de uma cor, do claro ao escuro. Sempre escreva os nomes direto no gráfico, para ninguém depender só da cor.

Três tipos de dado, três tipos de paleta

Antes de escolher a cor, descubra o que o gráfico mostra. O guia do Datawrapper explica bem os dois últimos tipos:

1. Categorias (qualitativa): itens sem ordem, como produtos. Cada um recebe uma cor diferente.
2. Valores em sequência (sequencial): do menor ao maior, como vendas por região. Um degradê de claro para escuro, em que o claro é pouco e o escuro é muito.
3. Desvio de um ponto central (divergente): acima e abaixo da média, lucro e prejuízo. Duas cores em lados opostos e um tom claro no meio.

O erro típico é usar uma paleta de categorias para dados em sequência (cada barra de uma cor, sem ordem) ou um degradê de uma cor para categorias. O guia do Datawrapper alerta que um degradê de uma cor aplicado a categorias pode ser lido como ranking.

Quantas categorias cabem

O Datawrapper recomenda evitar mais de sete cores em paletas de categorias. Acima disso, o leitor fica indo e voltando entre a legenda e o gráfico. Se você tem doze categorias, agrupe as menores em “Outros” ou use outro tipo de gráfico.

Um gráfico de vendas da feira, passo a passo

Imagine o gráfico de vendas de uma feira de bairro, com quatro tipos de produto: hortaliças, frutas, pães e flores. O objetivo é mostrar que as frutas cresceram. Vamos montar a paleta “Gráfico de feira”.

1. Cinza para o contexto. Hortaliças, pães e flores ficam em #8D99AE. O guia do Datawrapper recomenda usar cinza para o que é contexto, de modo que o destaque apareça.
2. Uma cor para o que importa. As frutas ficam em #E07A1F, um laranja forte.
3. Texto e eixos em #1B4965, um azul escuro.
4. Rotule direto. Escreva “Frutas” ao lado da linha laranja, sem legenda no canto.

Se for preciso mostrar as quatro categorias com igual importância, abra mão do cinza e troque por quatro cores distintas: #1B4965, #E07A1F, #2A9D8F e #B5179E. Repare que elas variam em claridade e não só em tom: o azul é escuro, o laranja e o verde-azulado são médios, o magenta é intermediário. Essa diferença ajuda quem tem daltonismo, que é a dificuldade de distinguir certas cores. O guia do Datawrapper recomenda variar a claridade nas paletas por esse motivo.

O contraste do gráfico com o fundo

A WCAG, o conjunto de diretrizes de acessibilidade do W3C (a versão 2.2, de outubro de 2023, manteve os valores de contraste), traz um critério específico para elementos gráficos, o 1.4.11. Segundo a página que o explica, as partes de um gráfico necessárias para entender o conteúdo precisam ter razão de contraste de pelo menos 3:1 em relação ao fundo adjacente. Linhas de um gráfico precisam de 3:1 contra o fundo e, se raramente se cruzam, não precisam contrastar entre si. Fatias de pizza precisam ser distinguíveis umas das outras, a não ser que rótulos visíveis tragam a mesma informação. O texto dentro do gráfico segue a regra de texto, 4,5:1 para texto normal.

Calculei as razões das nossas cores sobre fundo branco (#FFFFFF):

Cor	Razão sobre branco	Situação
#1B4965	9,60:1	passa
#B5179E	5,86:1	passa
#2A9D8F	3,32:1	passa por pouco
#E07A1F	3,01:1	passa por pouco
#8D99AE	2,88:1	abaixo de 3:1

O cinza #8D99AE, que usamos como contexto, ficou em 2,88:1, abaixo do mínimo. Para uma linha fina, escureça o cinza um pouco, ou engrosse a linha e rotule-a. O laranja e o verde-azulado passam, mas com margem curta. Se o gráfico será projetado ou impresso, vale escurecê-los um degrau.

Não confie só na cor

O critério 1.4.1 da WCAG diz que a cor não deve ser o único meio de passar informação. Em gráficos, isso vira prática concreta:

• rotule as linhas ou barras diretamente;
• varie o formato dos marcadores (círculo, quadrado, triângulo);
• varie o estilo da linha (cheia, tracejada);
• use texturas nas barras quando o gráfico for impresso em preto e branco.

A página de Okabe e Ito, dois pesquisadores japoneses que escreveram um guia de cores para pessoas daltônicas, dá o mesmo conselho: combinar a cor com formato, posição ou tipo de linha, e rotular os elementos direto no gráfico em vez de usar uma legenda de cores separada. Eles também recomendam evitar combinações de vermelho com verde e de cores de mesmo brilho, e usar linhas grossas e símbolos grandes. Veja mais em daltonismo: tipos e efeito nas cores e em não use só a cor para passar informação.

Armadilhas de cor em gráficos

Arco-íris. Usar todas as cores do espectro para um degradê parece vistoso, mas o Datawrapper aponta que escalas tipo arco-íris têm grandes saltos de claridade e confundem a leitura.

Fundo branco em tudo. Em apresentações com fundo escuro, as cores precisam ser reavaliadas, porque o contraste de cada uma muda contra o novo fundo.

Vermelho para ruim, verde para bom, sem outra pista. Acompanhe sempre com texto, ícone ou posição.

Esquecer de testar em preto e branco. Imprima ou use um simulador de daltonismo. O guia do Datawrapper recomenda testar com um simulador ou verificação automática.

Próximos passos para a sua paleta de gráfico

Para montar paletas com um número fixo de cores, veja quantas cores usar em uma paleta. Para conferir o resultado antes de publicar, siga o roteiro de como testar uma paleta antes de usar.