Ações simples para tornar seus gráficos acessíveis para daltônicos

Amanda Scarpin
Data Hackers
Published in
7 min readOct 22, 2020

No final de Agosto, escrevi esse artigo falando da criação de uma visualização de dados sobre a participação feminina na política. Nele, comentei sobre a importância da escolha das cores para destacar as diferenças entre os dados dos países. Tive retornos bem legais, mas um em especial ficou na minha cabeça:

Essa mensagem recebi do meu tio que tem daltonismo, o que me fez pensar e repensar sobre a acessibilidade dos meus gráficos.

Desde criança ouço as histórias dele sobre situações — inusitadas, engraçadas e constrangedoras — que já viveu por conta do daltonismo. Depois de ouví-las, minha reação é quase sempre “minha nossa, não tinha parado pra pensar em como as cores influenciavam nessa situação ou naquela situação”.

Pôr do sol divido entre visão normal e visão com protanopia. Fonte: Unsplash e edição própria.

(Ou você já tinha parado para pensar sobre como um daltônico vê o pôr do sol?)

De fenômenos naturais à situações cotidianas, temos inúmeros eventos influenciados por cores: dentre eles, as visualizações de dados. As cores são usadas nos gráficos para categorizar, classificar e destacar informações (como falamos nesse post). Saber escolhê-las de forma estratégica é importante, porém, há mais a se considerar além da teoria das cores ou da composição do design quando você otimiza os seus gráficos para acessibilidade.

Por exemplo, pode ser automático colocar num gráfico a cor verde para sinalizar algo positivo e a cor vermelha para algo negativo, sem nem saber que essa combinação pode ser problemática. Observe como o dashboard abaixo é visto por alguém com daltonismo.

Dashboard com verde e vermelho. Esquerda: visão normal / Direita: simulação da visão com pronatopia. Fonte: Tableau Public

E não é suspendendo o uso da combinação verde e vermelho que tornamos um gráfico acessível. Outras combinações que a princípio parecem harmônicas podem ser igualmente problemáticas, como o verde e roxo do próximo dashboard.

Dashboard com verde e roxo. Esquerda: visão normal / Direita: simulação da visão com pronatopia. Fonte: Tableau Public

Vamos conversar sobre daltonismo e acessibilidade? Com esse artigo, pretendo:

  • Contextualizar sobre os diferentes tipos de daltonismo;
  • Trazer dicas e exemplos de como tornar as visualizações de dados mais amigáveis.

O Facebook não é azul por acaso

Mark Zuckerberg com a logo do Facebook no fundo. Fonte: Funfactz

Segundo o Color Blind Awareness, o daltonismo é um distúrbio da visão que interfere na percepção das cores e afeta cerca de 1 a cada 12 homens e 1 a cada 200 mulheres no mundo.

Estima-se que haja 300 milhões de daltônicos no mundo, e isso inclui alguns nomes bem conhecidos como Bill Clinton, Keanu Reeves e Mark Zuckerberg. Inclusive, a cor azul do Facebook foi escolhida por ser a cor mais rica para a visão de Zuckerberg, pois ele não enxerga bem o verde e o vermelho.

Existem três tipos mais frequentes de daltonismo, que também variam na intensidade:

  • Protanopia: A pessoa tem dificuldade em enxergar tons de vermelho.
Esquerda: visão normal / Direita: simulação da visão com protanopia. Fonte: imagem de autoria própria da Praça do Japão, em Curitiba.
  • Deuteranopia: A pessoa tem dificuldade em enxergar tons de verde.
Esquerda: visão normal / Direita: simulação da visão com deuteranopia. Fonte: imagem de autoria própria da Praça do Japão, em Curitiba.
  • Tritanopia: A pessoa tem dificuldade em enxergar tons de azul.
Esquerda: visão normal / Direita: simulação da visão com tritanopia. Fonte: imagem de autoria própria da Praça do Japão, em Curitiba.

E existe também a Monocromia, um tipo mais raro de daltonismo no qual a pessoa não consegue diferenciar as cores e tem uma visão em escala de cinza.

Esquerda: visão normal / Direita: simulação da visão com monocromia. Fonte: imagem de autoria própria da Praça do Japão, em Curitiba.

Sabendo que existem condições e intensidades diferentes de daltonismo, escolher cores que são distinguidas por todos não é algo fácil. No entanto, não é preciso banir as cores dos seus gráficos: é possível otimizar a visualização com ações simples — te apresentarei três delas a seguir.

1. Escolha paletas de cores amigáveis

Fonte: Flávio Santana, ColetivoUX

Uma recomendação fácil de adaptar é evitar combinações conhecidas por serem problemáticas, como as mostradas acima.

Mas não se preocupe em decorar todas essas combinações. Existem ferramentas online como ColorBrewer e Coolors que ajudam muito na escolha das cores e sugerem paletas que são amigáveis para daltônicos. Aliás, foi através do ColorBrewer que eu entendi porque o meu tio não teve problemas com as cores do meu artigo: utilizei sem querer uma paleta acessível.

Paleta de cores variando do laranja para o roxo, acessível para daltônicos. Fonte: ColorBrewer

Que ele provavelmente viu assim:

Paleta de cores variando do laranja para o roxo vista com protanopia. Fonte: ColorBrewer

Alguns softwares também dispõem de uma paleta para daltônicos na própria ferramenta, como o Tableau.

Paleta do Tableau acessível para daltônicos. Primeira linha: visão normal / Segunda linha: visão com protanopia / Terceira linha: visão com deuteranopia. Fonte: Tableau

Além da paleta que usei no meu artigo e dessa sugerida pelo Tableau, é possível gerar no ColorBrewer outras combinações de cores (com diferentes classes e requisitos) que facilitam da mesma forma a interpretação da informação para quem não enxerga todas as cores.

2. Explore os contrastes

Infográfico que varia o contraste da cor. Fonte: Paige Swanson — Behance

O contraste não é um problema para a maioria das pessoas daltônicas, então torne os contrastes mais evidentes.

A intensidade da cor é mais notável que a cor em si. Muitos projetos priorizam a simplicidade utilizando apenas uma cor junto de preto e branco. Esses dashboards são alguns exemplos:

Dashboard com azul e branco. Fonte: Tableau Public
Dashboard com roxo e branco. Fonte: Tableau Public

Além de tornar a visualização mais limpa, seguir uma linha minimalista de eliminar os excessos evita combinações de cores que possam ser complicadas de entender.

3. A cor não precisa ser a única fonte de diferenciação: use símbolos

Fonte: Venngage

Junto com a escolha de uma paleta e do uso dos contrastes, utilize elementos como texturas, ícones, gifs e símbolos para diferenciar a série de dados. Quando utilizamos outros elementos, a cor não é mais a única fonte de informação.

Os gráficos abaixo são exemplos que utilizam diferentes padrões de linhas e texturas para diferenciar as categorias:

Fonte: Towards Data Science

Nessa tabela, as setas indicam se os valores aumentaram, diminuíram ou permaneceram iguais, então a interpretação dos resultados não depende apenas das cores:

Fonte: Dataviz

Ou seja, trabalhar com texturas, símbolos, ícones, gifs e textos ajuda no entendimento da mensagem sem depender apenas da diferenciação entre as cores.

Dica bônus: calce os sapatos

Ainda não se convenceu sobre tornar seus gráficos acessíveis, ou não tem um tio daltônico para conversar sobre como ele se sente? A extensão NoCoffee do Google Chrome simula o daltonismo e outros problemas de visão e é muito interessante para termos uma ideia de como é enxergar de formas diferentes.

Ideias colocar em prática hoje

Como forma de agradecimento por você ter chegado até aqui, sintetizei as ideias essenciais para que consulte sempre que quiser e aplique nos seus projetos a partir de agora:

  • Cuide das suas cores. Opte por uma paleta amigável para daltônicos, use contrastes diferentes e teste o minimalismo.
  • Utilize outros elementos de diferenciação. Use símbolos, ícones, texturas e textos que ajudem na compreensão da sua mensagem, para que as cores não sejam a única fonte daquela informação.
  • Em caso de dúvidas, enxergue de outra perspectiva — literalmente. Converse com pessoas que tem dificuldade em enxergar cores, use extensões que simulam problemas de visão e experimente como é enxergar o mundo de outras formas.

Por fim, um agradecimento especial ao meu tio Rodrigo, pelo elogio no meu primeiro artigo e pelo incentivo à escrever sobre esse tema, e aos amigos da faculdade e do trabalho que já pediram pra eu adaptar algum gráfico “porque com essas cores, não consigo ver nada!”.

--

--

Amanda Scarpin
Data Hackers

product manager, engineer, traveler. love learning how people and products work :)