Tendências de Design

Cor na Visualização de Dados: Gráficos, Tabelas e Mapas

9 min de leitura

A cor na visualização de dados não é decoração. É codificação — um canal que carrega informação assim como posição, comprimento e tamanho. Quando a cor é usada bem, os espectadores compreendem padrões instantaneamente. Quando é usada descuidadamente, os gráficos enganam, confundem ou excluem segmentos inteiros do público.

Este guia aborda os três tipos canônicos de escala de cores, como o daltonismo reformula as decisões de visualização de dados e os erros mais comuns que comprometem trabalhos que de outra forma seriam sólidos.


Por que a Cor é uma Codificação Poderosa — e Perigosa

Entre os atributos visuais pré-atentativos estudados na pesquisa de percepção, a cor se destaca pela velocidade bruta. Os espectadores detectam um ponto de cor distinta em um gráfico de dispersão de milhares dentro de milissegundos, sem busca consciente. Esse poder é real, mas vem com restrições.

A cor codifica informação efetivamente apenas quando:

  1. O espectador consegue distinguir os valores codificados
  2. A codificação é intuitiva (não arbitrária)
  3. As escolhas de cores sobrevivem a diferentes condições de visualização (impressão, projetor, visão com daltonismo)

Violar qualquer um desses critérios faz com que a cor deixe de ser um sinal útil e passe a ser ruído. Os tipos de escala abaixo são respostas estruturadas a cada uma dessas restrições.


Escalas de Cores Sequenciais: Do Claro ao Escuro

Escalas sequenciais representam dados que se movem em uma direção — tipicamente de valores baixos a valores altos, ou de esparso a denso. A característica definidora é um único matiz que varia em luminosidade e às vezes em saturação.

Como Escalas Sequenciais Funcionam

Uma escala sequencial ancora o tom mais claro ao valor de dado mais baixo e o tom mais escuro ao mais alto. Cada valor intermediário recebe uma cor posicionada proporcionalmente ao longo desse contínuo.

Uma escala sequencial prática de matiz único para densidade populacional geográfica:

Valor Hex Descrição
Muito baixo #EFF6FF Azul quase branco
Baixo #BFDBFE Azul-celeste pálido
Médio #60A5FA Azul claro
Alto #2563EB Azul vívido
Muito alto #1E3A8A Azul-marinho profundo

Essa codificação é intuitiva: mais azul significa mais. Espectadores com qualquer percepção de cor podem ler a escala porque ela opera na luminância, não na diferenciação de matiz.

Orientação Prática

  • Evite gradientes arco-íris (espectrais) em contextos sequenciais. Gradientes espectrais — de vermelho a laranja a amarelo a verde a azul — criam bordas perceptuais falsas nos limites de matiz. Uma mudança repentina de amarelo para verde em torno do ponto médio sinaliza uma quebra categórica que não existe nos dados. Paletas sequenciais perceptualmente uniformes (como as derivadas de OKLCH ou CIELAB) evitam esse artefato.
  • Use uma progressão perceptualmente uniforme. Uniforme significa que passos iguais nos dados produzem passos de cor com aparência igual. Progressões não uniformes enfatizam excessivamente certos intervalos de valor.
  • Extremo saturado, origem dessaturada. Uma origem quase-branca levemente saturada e um extremo final escuro totalmente saturado fornecem o maior intervalo perceptual.

Você pode construir escalas sequenciais de matiz único começando de um matiz base no gerador de paletas e combinando-o com o gerador de tons para garantir passos suaves.


Escalas de Cores Divergentes: Dois Extremos de Matiz

Escalas divergentes representam dados que têm um ponto médio significativo. Quando os valores acima e abaixo desse ponto médio são conceitualmente diferentes — não apenas quantitativamente diferentes — uma escala divergente torna ambas as metades visíveis simultaneamente.

Quando Usar uma Escala Divergente

Casos de uso clássicos incluem:

  • Resultados eleitorais: vermelho para vantagem republicana, azul para vantagem democrática, roxo neutro ou branco para 50/50
  • Desempenho financeiro: vermelho para prejuízos, verde para ganhos, neutro para ponto de equilíbrio
  • Anomalias de temperatura: azul para abaixo da média, vermelho para acima da média, branco para a norma histórica
  • Pontuações de sentimento: sentimento negativo a positivo, neutro no centro

Projetando uma Escala Divergente

Uma escala divergente requer três âncoras: os dois extremos de matiz e o centro neutro.

Exemplo para uma escala de satisfação de pesquisa (muito insatisfeito → neutro → muito satisfeito):

Posição Hex Descrição
Muito insatisfeito #991B1B Vermelho profundo
Insatisfeito #F87171 Vermelho suave
Neutro #F5F5F4 Off-white
Satisfeito #4ADE80 Verde suave
Muito satisfeito #166534 Verde profundo

O centro neutro deve ser quase acromático — um cinza claro ou off-white — para que os valores de cada lado do ponto médio sejam lidos como categorias distintas.

Armadilhas

  • Intervalo perceptual desigual em cada lado. Vermelho e verde não têm intensidade visual igual em níveis de saturação equivalentes. Use uma ferramenta para verificar que seus dois pontos extremos são perceptualmente equidistantes do neutro, não apenas numericamente equidistantes.
  • Escolher pares de matiz que colapsam para espectadores daltônicos. Escalas divergentes vermelho-verde são a culpada mais comum. Isso é abordado em detalhes na seção de daltonismo abaixo.

Escalas de Cores Categóricas (Qualitativas): Matizes Distintos

Escalas categóricas codificam dados nominais — categorias que não têm ordem inerente. O País A não é mais ou menos que o País B; é simplesmente diferente. Isso exige cores que sejam tão perceptualmente distintas umas das outras quanto possível, sem ordem ou hierarquia implícitas.

Princípios de Boas Paletas Categóricas

Distância perceptual máxima. As cores devem estar espalhadas ao redor da roda de matiz, não agrupadas. Uma paleta que usa três azuis, dois verdes e um roxo não funcionará porque os espectadores confundirão os matizes similares.

Luminosidade aproximadamente igual. Se algumas categorias são claras e outras são escuras, as escuras dominarão visualmente mesmo que não sejam mais importantes. Busque luminância similar em todas as cores categóricas.

Não mais de 7–10 categorias, idealmente menos. A memória de curto prazo humana mantém cerca de 7 blocos. Pedir aos espectadores que acompanhem mais de 7 associações distintas de cor para categoria impõe carga cognitiva que compromete o gráfico. Se você tem 15 países, reconsidere se a cor é a codificação certa.

Uma paleta categórica equilibrada de 6 cores:

Categoria Hex Matiz
Categoria A #3B82F6 Azul
Categoria B #EF4444 Vermelho
Categoria C #10B981 Verde-azulado
Categoria D #F59E0B Âmbar
Categoria E #8B5CF6 Roxo
Categoria F #F97316 Laranja

Azul, vermelho, verde, âmbar, roxo e laranja estão amplamente espalhados ao redor da roda de matiz e têm valores de luminosidade similares.

Testando Paletas Categóricas

Antes de finalizar, verifique se sua paleta funciona quando:

  • Impressa em preto e branco (verifique se a similaridade de luminância não elimina as distinções)
  • Vista em tamanho pequeno em uma legenda
  • Vista por alguém com daltonismo (veja abaixo)

O simulador de daltonismo cuida do terceiro teste.


Daltonismo na Visualização de Dados

Aproximadamente 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência de visão de cores hereditária. Em um público típico de trabalho de 50 pessoas, 3–4 espectadores provavelmente experimentam as cores de forma diferente. Em uma visualização voltada ao público, o número não é desprezível.

Tipos Mais Relevantes para Dataviz

Deuteranopia / Deuteranomalia: Sensibilidade reduzida ao verde. A forma mais comum (~5% dos homens). Vermelho e verde aparecem similares em matiz; a distinção colapsa para uma faixa amarelo-marrom-cinza.

Protanopia / Protanomalia: Sensibilidade reduzida ao vermelho. Menos comum (~1% dos homens). O vermelho aparece mais escuro e menos saturado; ocorre confusão vermelho-verde.

Tritanopia: Rara (~0,001%). Confusão azul-amarelo. Afeta muito poucos, mas torna-se relevante quando o azul é uma cor categórica primária.

O Desastre do Vermelho-Verde

A falha de daltonismo mais comum em dataviz é a escala divergente vermelho-verde — usada constantemente para dados financeiros, mapas e indicadores de status. Para espectadores deuteranopes e protanopes, os dois extremos de matiz colapsam para tons quase idênticos de marrom ou oliva. O gráfico transmite quase nenhuma informação para aproximadamente 6% dos espectadores do sexo masculino.

Alternativas:

Substitua vermelho-verde por:

  • Azul-laranja (#1D4ED8 a #EA580C): Amplamente distinguível em todos os tipos comuns de visão de cores
  • Roxo-verde (#7C3AED a #059669): Também robusto para deuteranopia e protanopia
  • Vermelho-azul com forte diferença de luminosidade: Funciona para a maioria das formas se o contraste de luminosidade for forte o suficiente

Indicadores de status de semáforo (vermelho-amarelo-verde) têm o mesmo problema. Substitua por formas e rótulos como codificação primária, e use a cor como sinal redundante secundário.

Estratégias de Design para Robustez ao Daltonismo

  1. Use contraste de luminância, não apenas contraste de matiz. Cores que diferem significativamente em luminosidade permanecem distinguíveis na maioria das formas de daltonismo porque a percepção de luminância é amplamente preservada.

  2. Adicione codificações redundantes. Não dependa apenas da cor. Use:

  3. Diferentes estilos de linha (sólida, tracejada, pontilhada) em gráficos de linhas
  4. Diferentes formas de pontos em gráficos de dispersão
  5. Rótulos diretos em séries de dados
  6. Hachura ou padrões em gráficos de barras

  7. Teste com um simulador. Use o simulador de daltonismo para visualizar sua paleta através de filtros deuteranopes, protanopes e tritanopes antes de publicar.

  8. Use paletas acessíveis estabelecidas. Wong (2011) publicou uma paleta de 8 cores especificamente projetada para robustez ao daltonismo: preto, laranja, azul-celeste, verde-azulado, amarelo, azul, vermelhão e roxo-avermelhado.


Melhores Práticas e Erros Comuns

Melhores Práticas

Combine o tipo de escala com o tipo de dado. Sequencial para dados contínuos ordenados. Divergente para dados com um centro significativo. Categórico para dados nominais sem ordem implícita. Misturar esses tipos (usar uma escala sequencial para dados categóricos) cria ordenação implícita que induz ao erro.

Coloque as cores mais escuras nos dados mais importantes. Valores mais escuros comandam mais atenção. Se seus valores mais altos são os mais acionáveis, ancorá-los na extremidade escura de uma escala sequencial alinha a atenção visual com a prioridade dos dados.

Considere o fundo. As cores aparecem diferentes em fundos brancos, cinzas ou escuros. Uma escala projetada em fundo branco pode parecer plana ou lodosa em um dashboard cinza. Teste no fundo real.

Use uma escala consistente em gráficos relacionados. Se três gráficos em um dashboard mostram dados de vendas, use a mesma escala de cores para a mesma métrica. A inconsistência obriga os espectadores a reler cada legenda.

Mantenha as legendas próximas aos dados. Quanto mais longe a legenda, mais trabalho cognitivo os espectadores precisam fazer para decodificar as cores. Rótulos diretos eliminam completamente a consulta à legenda.

Erros Comuns

Escalas arco-íris para dados contínuos. Como observado acima, gradientes espectrais introduzem bordas perceptuais falsas e distorcem os dados. Uma escala sequencial de matiz único perceptualmente uniforme é quase sempre superior.

Usar cor como única codificação. Se seu gráfico falharia completamente quando convertido para escala de cinza, está dependendo excessivamente da cor. Adicione forma, posição ou rótulos diretos.

Cores categóricas demais. Mais de 7–8 cores distintas em uma legenda é um sinal de que os dados precisam ser reestruturados, não que você precisa de uma paleta maior.

Cores de baixo contraste em preenchimentos de mapas. Mapas geográficos exibem muitas cores simultaneamente em tamanhos de polígono pequenos. Cores que parecem distintas isoladamente podem ser muito difíceis de diferenciar na escala do mapa. Teste no tamanho de exibição real.

Ignorando o efeito do projetor. Os projetores atenuam significativamente as cores. Uma paleta que lê de forma bela na tela pode perder todas as distinções de faixa média em uma apresentação em sala de reunião. Adicione margem de contraste.

Codificar com cor apenas na impressão. A impressão pode reproduzir cores de forma diferente da tela, e a acessibilidade para materiais impressos é igualmente importante. Projete tendo em mente a impressão em escala de cinza.


Principais Conclusões

  • Use escalas sequenciais (claro a escuro, matiz único) para dados contínuos ordenados onde um extremo significa "mais" de algo.
  • Use escalas divergentes (dois extremos de matiz, centro neutro) para dados com um ponto médio significativo — financeiro, político, desvio da linha de base.
  • Use escalas categóricas (matizes perceptualmente distintos) para dados nominais sem ordem implícita; limite a 7–10 categorias no máximo.
  • Evite gradientes arco-íris para dados sequenciais — eles introduzem bordas falsas e distorcem a percepção.
  • A codificação vermelho-verde falha para aproximadamente 6–8% dos homens; substitua por pares divergentes azul-laranja ou roxo-verde.
  • Teste toda paleta com o simulador de daltonismo antes de publicar.
  • Adicione codificações redundantes (formas, rótulos, estilos de linha) para que a visualização permaneça legível quando a cor falha.
  • Use o gerador de paletas para construir e avaliar paletas de cores para seu tipo de dado específico.

Cores relacionadas

Marcas relacionadas

Ferramentas relacionadas