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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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:

• WebAIM Color Contrast Checker
• Check My Colours
• ColorBrewer 3.0
• Coolors

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.

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:

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.

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) What to consider when visualizing data for colorbling readers

How your colorblind and colorweak readers see your colors

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.

B) 5 tips on designing colorblind-friendly visualizations

5 tips on designing colorblind-friendly visualizations

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.

C) How to Use Color Blind Friendly Palettes to Make Your Charts Accessible

How to Use Color Blind Friendly Palettes to Make Your Charts Accessible - Venngage

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.

D) Two Simple Steps to Create Colorblind-Friendly Data Visualizations

Two Simple Steps to Create Colorblind Friendly Data Visualizations

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.

E) Como escrever textos alternativos de gráficos

Como escrever textos alternativos de gráficos

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