Dez dicas para deixar sua visualização de dados mais acessível

Nem todo mundo enxerga as cores da mesma maneira e é preciso levar isso em conta na hora de criar gráficos, tabelas e mapas.

Image for post
Image for post
Descrição: infográfico que resume as dez dicas apresentadas no artigo.

Nem todo mundo enxerga as cores da mesma maneira e é preciso levar isso em conta na hora de criar visualizações de dados, como gráficos, tabelas e mapas. Um motivo são os diferentes tipos de daltonismo, dificuldade em distinguir cores que pode se apresentar em um a cada 12 homens (8%) e uma a cada 200 mulheres (0,5%).

As cores também variam de acordo com o modo de acesso, que pode um leitor digital de livros em preto e branco, uma tela de computador com configuração de cor alterada, ou mesmo uma impressão em preto e branco ou de má qualidade. Por isso, é importante buscar estratégias que facilitem o entendimento de nossas visualizações de dados, independentemente das cores utilizadas.

Confira a seguir dez dicas para deixar sua visualização de dados mais acessível.

1. Faça legendas diretas

Em gráficos, costumamos distinguir séries por meio de cores e legenda à parte. Porém, quando fazemos isso, as informações podem se perder para pessoas daltônicas ou para quem acessa em preto e branco.

Image for post
Image for post
Descrição: À esquerda, um gráfico de pizza com três séries representadas com cores parecidas e legendas à parte. À direta, no mesmo gráfico em preto e branco, fica difícil associar a legenda às cores do gráfico. Autoria própria.

Com legendas diretas, conseguimos perceber as informações independentemente das cores.

Image for post
Image for post
Descrição: À esquerda, um gráfico de pizza com três séries representadas com cores parecidas e legendas diretas. À direta, no mesmo gráfico em preto e branco, as legendas diretas permitem distinguir as séries. Autoria própria.

2. Use espaços em branco

Mesmo com legendas diretas, nem sempre é possível perceber a diferença entre as séries de um gráfico.

Image for post
Image for post
Descrição: À esquerda, um gráfico de colunas que mostra o percentual de três séries com cores parecidas. À direita, no mesmo gráfico em preto e branco, não é possível distinguir as fronteiras entre cada série. Autoria própria.

Podemos incluir espaços em branco entre as séries para facilitar a distinção.

Image for post
Image for post
Descrição: À esquerda, um gráfico de colunas que mostra o percentual de três séries com cores parecidas, separadas por um contorno branco. À direita, no mesmo gráfico em preto e branco, o contorno branco permite distinguir as séries. Autoria própria.

3. Varie traços e use formas em gráficos de linha

Usamos gráficos de linha para mostrar a variação de séries ao longo do tempo. Se distinguimos as séries apenas por cor, as informações podem se perder.

Image for post
Image for post
Descrição: à esquerda um gráfico de linhas com três séries representadas por cores parecidas e legendas à parte. À direta, no mesmo gráfico em preto e branco, não é possível associar a legenda às cores do gráfico. Autoria própria.

Podemos variar os traços e usar formas para facilitar a distinção.

Image for post
Image for post
Descrição: à esquerda um gráfico de linhas com três séries representadas por cores parecidas; cada série tem um padrão de traço e formas nos pontos (quadrado, losango, triângulo). À direta, no mesmo gráfico em preto e branco, os traços e formas ajudam a distinguir as séries. Autoria própria.

4. Use formas em gráficos de dispersão

Gráficos de dispersão são usados para mostrar a relação entre variáveis.

Se distinguimos as séries apenas por cor, as informações podem se perder.

Image for post
Image for post
Descrição: à esquerda, um gráfico de dispersão com três séries representadas por cores parecidas e círculos idênticos. À direita, no mesmo gráfico em preto e branco, não possível distinguir as séries. Autoria própria.

Podemos usar formas para facilitar a distinção.

Image for post
Image for post
Descrição: à esquerda, um gráfico de dispersão com três séries representadas por cores parecidas e formas diferentes (quadrado, losango, triângulo). À direita, no mesmo gráfico em preto e branco, não possível distinguir as séries. Autoria própria.

5. Use símbolos em tabelas

As tabelas são usadas para mostrar informações detalhadas.

Se usamos apenas cores, as informações podem se perder.

Image for post
Image for post
Acima, uma tabela com círculos em tons de verde, vermelho e amarelo que sinalizam se os valores subiram, caíram ou se mantiveram estáveis. Abaixo, na mesma tabela em preto e branco, não é possível distinguir os círculos. Autoria própria.

Quando usamos símbolos em tabelas, conseguimos perceber as informações independentemente das cores.

Image for post
Image for post
Acima, uma tabela com símbolos em tons de verde, vermelho e amarelo que sinalizam se os valores subiram (seta para cima), caíram (seta para baixo) ou se mantiveram estáveis (sinal de igual). Abaixo, na mesma tabela em preto e branco, os símbolos ajudam a distinguir as categorias. Autoria própria.

6. Use padrões e texturas em gráficos e mapas

Um alternativa às cores pode ser o uso de texturas e padrões, como listras de diferentes posições. Veja este exemplo que adaptei do blog Chartable, do Datawrapper: sem padrão, a diferença de cores entre as regiões se perde.

Image for post
Image for post
Descrição: À esquerda, um mapa da Europa com regiões destacadas em tons de verde e vermelho. À direita, no mesmo mapa em preto e branco, não é possível distinguir as duas cores. Imagem adaptada do blog Chartable, do Datawrapper.

Quanto usamos padrões, conseguimos perceber melhor as informações, independentemente das cores.

Image for post
Image for post
Descrição: À esquerda, um mapa da Europa com regiões destacadas em tons de verde e vermelho, cada uma com padrão de listras em direções opostas. À direita, no mesmo mapa em preto e branco, o padrão de listas permite distinguir as regiões. Imagem adaptada do blog Chartable, do Datawrapper.

7. Use gráficos de barras e de colunas

Geralmente um bom gráfico de barras ou de colunas substitui outros gráficos sem precisar de cores e legendas.

No caso dos gráficos que abordamos nas dicas anteriores:

  • O gráfico de pizza pode ser um gráfico de barras. A ligeira diferença de porcentagem entre cada categoria fica mais nítida pela ordenação das categorias (B-C-A) e pelo tamanho das barras, mesmo sem cores.
Image for post
Image for post
Descrição: à esquerda, um gráfico de pizza com três séres: A (32%), B (35%) e C (33%). À direita, os mesmos dados são mostrados em um gráfico de barras em preto e branco, com padrões de listras diferentes e ordenação das barras do maior (B) para o menor (A). Autoria própria.
  • O gráfico de linhas pode ser substituído por um conjunto de gráficos de colunas, um para cada categoria. Fica mais fácil visualizar a evolução de cada categoria especificamente. Também é possível comparar as categorias lado a lado, mesmo sem cores.
Image for post
Image for post
Descrição: à esquerda, um gráfico de linhas com três séries. À direita, os mesmos dados são mostrados por três conjuntos de gráficos de colunas em preto e branco, um para cada série. Autoria própria.
  • O gráfico de dispersão pode ser substituído por um gráfico de colunas. Fica mais fácil visualizar a posição de A, B, C em cada variável, mesmo sem cores.
Image for post
Image for post
Descrição: à esquerda, um gráfico de dispersão com valores de três séries (eixo y) em relação à variável do eixo x. À direita, os mesmos dados são mostrados por um gráfico de barras que mostra, para cada valor do eixo x, os valores das três séries. Autoria própria.

8. Use paletas com cores contrastantes

Essa é a dica mais famosa em relação a acessibilidade em visualização de dados. Deixei por último para destacar que, muitas vezes, a cor não é imprescindível.

Usamos e continuaremos usando cores em nossas visualizações. Para isso, é importante escolher cores que tenham contraste suficiente para o máximo possível de pessoas.

Em geral, devemos evitar combinações entre:

  • Vermelho & Verde
  • Verde & Marrom
  • Verde & Azul
  • Azul & Cinza
  • Azul & Roxo
  • Verde & Cinza
  • Verde & Preto

Com base na famosa proposta original de Masataka Okabe e Kei Ito, Lisa Charlotte Rost propõe uma paleta otimizada que funciona para os principais tipos de daltonismo:

Image for post
Image for post
Descrição: quatro colunas com sete cores empilhadas. A primeira coluna apresenta sete cores diferentes e mostra como pessoas sem daltonismo as enxerga. As outras três colunas apresentam como pessoas com protanopia, deuteranopia e tritanopia enxergam as mesmas sete cores com contraste adequado. Fonte: blog Chartable, do Datawrapper.

Algumas ferramentas on-line ajudam a escolher cores com contraste adequado:

9. Use um simulador de condições visuais

Há muitas ferramentas disponíveis na internet que simulam condições visuais. Eu costumo usar a extensão NoCoffee no navegador Google Chrome, que é bastante simples e completa: basta escolher o tipo de condição visual para que as páginas da internet simulem a condição escolhida.

Image for post
Image for post
Descrição: gif que mostra o funcionamento da extensão NoCoffee no navegador Google Chrome. Na tela, um arco-íris troca de cor à medida que simulo diferentes tipos de daltonismo.

Outras opções de simuladores de problemas de visão:

  • Coblis: fazemos upload de uma imagem e simulamos como pessoas com diferentes tipos de daltonismo a enxergam.
  • IamcalColor Vision: escolhemos cores de texto e fundo e simulamos como pessoas com diferentes tipos de daltonismo enxergam a combinação das cores escolhidas.

10. Descreva seus gráficos, tabelas e mapas

Redigir um parágrafo que sintetize a informação principal de cada visualização de dados é algo muito poderoso para a acessibilidade, pois:

  • Deixa nossas visualizações acessíveis para pessoas cegas ou com baixa visão que usam softwares que leem os textos “por trás” de cada elemento visual.
  • Ajuda pessoas que não estão acostumadas a interpretar gráficos, tabelas ou mapas.

Em geral, podemos considerar quatro passos para descrever gráficos, conforme propõe Amy Cesal:

Image for post
Image for post
Descrição: imagem que ilustra os quatro passos descritos no texto: [Tipo de gráfico] de [tipo de dado] que mostra que [propósito do gráfico]. No texto, link para a base original”. Fonte: Nightingale.
  1. Tipo de gráfico
  2. Tipo de dado
  3. Propósito do gráfico
  4. Dados na íntegra

Confira um exemplo de como descrever o gráfico a seguir.

Image for post
Image for post
Descrição: Gráfico de barras que mostra o percentual dos tributos na arrecadação no Brasil. Cinco deles concentram 71% da arrecadação: ICMS (21%), IR (18), Cofins (16), Contra. à previdência (11), Contra. ao FGTS (5). Fonte: Receita Federal, “Carga Tributária no Brasil 2018”. Autoria: Insper.
  1. Tipo de gráfico: Barras
  2. Tipo de dado: Percentual dos tributos na arrecadação no Brasil
  3. Propósito do gráfico: Mostrar que cinco tributos concentram 71% da arrecadação no Brasil
  4. Dados na íntegra: ICMS (21%), IR (18), Cofins (16), Contra. à previdência (11), Contra. ao FGTS (5). Fonte: Receita Federal, “Carga Tributária no Brasil 2018”. Autoria: Insper.

Ficaria assim:

Gráfico de barras que mostra o percentual dos tributos na arrecadação no Brasil. Cinco deles concentram 71% da arrecadação: ICMS (21%), IR (18), Cofins (16), Contra. à previdência (11), Contra. ao FGTS (5). Fonte: Receita Federal, “Carga Tributária no Brasil 2018”. Autoria: Insper.

Perceba que a mensagem principal do gráfico (cinco tributos concentram 71% da arrecadação no Brasil) aparece não apenas no texto alternativo, mas aparece visível e em destaque no próprio gráfico, guiando a interpretação de todas as pessoas.

Referências & Saiba Mais

Além do conhecimento prático, recorri a diferentes materiais para elaborar essas dez dicas. Confira:

A série em três partes publicada no blog Chartable (Datawrapper) é bastante prática e interessante. Um dos materiais mais completos que achei:

  • A parte 1 introduz o assunto;
  • A parte 2 traz dicas que beneficiam daltônicos e não-daltônicos;
  • A parte 3 traz relatos do dia a dia de pessoas daltônicas.

Esse artigo publicado no blog do Tableau traz cinco dicas de visualizações amigáveis para daltônicos. É especialmente útil para quem não quer deixar de usar vermelho e verde juntos:

  1. Vermelho e verde podem ser usados juntos;
  2. Não é só questão de vermelho e verde;
  3. Use paletas de cores com contraste adequado;
  4. Se precisa usar vermelho-verde, use contraste claro-escuro;
  5. Se precisa usar vermelho-verde, use outros meios de distinção.

Este material da Venngage é uma ótima introdução ao daltonismo para quem trabalha com design. Explica em detalhes o que é o daltonismo, com exemplos visuais bem didáticos. Revisa a importância das cores nas visualizações de dados. E traz dicas práticas, resumidas a seguir:

  • Use paletas de cor amigáveis
  • Evite combinações de cores problemáticas
  • Use texturas e padrões
  • Use símbolos e ícones
  • Use cores contrastantes
  • Seja minimalista.

Este artigo do Towards Data Science vai na linha dos outros materiais e destaca-se pelo poder de síntese, pois resume das boas práticas em dois aspectos:

  1. Escolha as cores certas;
  2. Use diferentes formas, padrões, texturas e legendas.

Visualizações de dados também podem ser acessíveis para pessoas cegas ou com baixa visão, por meio de textos alternativos. Neste artigo publicado no blog Nightingale (traduzido para o português), Amy Cesal resume quatro passos para descrever gráficos:

  1. Tipo de gráfico
  2. Tipo de dado
  3. Propósito do gráfico
  4. Dados na íntegra

datavizbr

Compartilhando experiências sobre visualização de dados…

Vinícius Cassio Barqueiro

Written by

Amo escrever, aprender e ajudar. Aqui, compartilho crônicas e materiais sobre futebol, educação, acessibilidade, design de informação e visualização de dados.

datavizbr

datavizbr

Compartilhando experiências sobre visualização de dados (dataviz) em português.

Vinícius Cassio Barqueiro

Written by

Amo escrever, aprender e ajudar. Aqui, compartilho crônicas e materiais sobre futebol, educação, acessibilidade, design de informação e visualização de dados.

datavizbr

datavizbr

Compartilhando experiências sobre visualização de dados (dataviz) em português.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store