Acessibilidade para Daltônicos — Casos de falha e sucesso

Veja alguns exemplos práticos de como seu design pode atrapalhar ou ajudar usuários com daltonismo.

Simulação de frutas no supermercado visto por pessoas sem daltonismo (esquerda) e com daltonismo (direita). Enquanto não daltônicos veem cores vívidas e distintas, os daltônicos enxergam cores neutras e com pouco contraste.

Diagramas e infográficos

Diagramas e infográficos são transgressores mais comuns quando falamos sobre barreiras de acessibilidade para pessoas que não conseguem distinguir certas cores.

Verde e vermelho são as cores mais comumente difíceis para pessoas distinguirem, o que torna o diagrama abaixo problemático:

Diagrama com função de tabela comparativa, que aponta funcionalidades presentes ou não entre GitHub, Gitlab e Gogs. Quando a funcionalidade é presente, é sinalizada por uma bola / círculo verde. Quando não está, por uma bola vermelha (quase marrom).

Agora veja como o mesmo diagrama seria visto por uma pessoa com daltonismo, uma deficiência que atinge certa de 8,5% da população masculina:

Mesmo diagrama da imagem anterior, agora simulando como seria enxergado por alguém com daltonismo. Os círculos verdes e vermelhos, que diferenciavam as funcionalidades presentes ou não, passam a ter uma coloração esverdeada e com pouco contraste entre eles.

Pie charts (gráfico de pizza) também costumam ser inacessíveis:

Descrição do tweet acima: Imagem com a mensagem “Razões pelas quais eu odeio gráfico de pizza”, e abaixo um gráfico de pizza com a legenda “por que eu sou daltônico”

Se você realmente quer usar um gráfico de pizza, coloque rótulos em cada pedaço do gráfico:

Exemplo de pie chart mais acessível: ao invés dos assuntos serem representados apenas por cores, dentro de cada um há um texto com o nome do tópico e porcentagem equivalente.

Ou apenas use um gráfico de barras em vez disso, porque gráfico de pizza são ruins (artigo em inglês).

Color pickers

Color pickers sem rótulos criarão uma barreira para pessoas com daltonismo.

Exemplo de color picker inacessível: listagem de produtos em um ecommerce, onde as opção de cores são representadas apenas pelas próprias cores.

Ao invés de mostrar apenas as cores, rotule as cores. Isso ajudará todos os usuários, pois pode ser difícil ver a diferença entre certas cores, como preto, bronze e marrom:

Exemplo de color picker acessível: ao lado das cores propriamente ditas, existe o nome de cada uma.

A Apple também faz um bom trabalho. Em vez de mostrar uma paleta de cores, eles mostram o produto real nas diferentes cores, com um rótulo abaixo de cada um:

Toggles

Veja a resposta dessa pessoa no Twitter quando foi perguntada sobre problemas de acessibilidade para pessoas com deficiência:

É assim que os toggles do iPhone ficam quando você remove as cores. Qual deles está ligado e qual está desligado?

Exemplo de situação com uso de toggles no iPhone, em preto e branco. Na imagem não dá para saber se o Twitter e o Vine estão desabilitados ou não, pois essas informações são reforçadas por cores.

Uma solução simples é usar checkboxes no lugar:

Exemplo de alternativa acessível aos toogles: checkboxes mostram claramente se os itens estão ativos ou não.

Mensagens de erro

Uma borda vermelha em torno dos campos de formulário com erro não é bom o suficiente, conforme ilustrado nessa imagem do artigo Desenhando e-commerce para usuários daltônicos (em inglês):

Exemplo de simulação de um formulário visto por pessoas sem daltonismo (esquerda) e com daltonismo (direita). As bordas vermelhas que indicam que o campo está com erro de preenchimento não é tão evidente para daltônicos.

Você precisa fazer com que o erro se destaque mais claramente, adicionando uma mensagem de erro:

Exemplo de formulário mais acessível: os erros são sinalizados através de mensagens, exibidas logo abaixo de cada campo.

Links

Não use só cores para diferenciar links do resto do texto. No exemplo abaixo, se você remover a cor, fica difícil entender que o título “Modules” é clicável:

Exemplo de simulação de link representado pela cor azul (esquerda) e preto e branco (direita). Como a informação de que o elemento clicável é representado apenas por cor azul, fica difícil perceber que o texto do link é clicável quando deixamos preto e branco.

Você pode usar cor, mas em combinação com algo estrutural como um sublinhado, ícone ou em formato de botão.

Aqui estão alguns exemplos de links que funcionam bem mesmo para pessoas com daltonismo:

Exemplo de links acessíveis para daltônicos: links sublinhados, com ícones e em formato de botão.

Contraste

Certifique-se que haja contraste suficiente entre as cores. Evite escrever texto sobreposto em imagens, como no exemplo abaixo retirado do artigo Melhorando a Acessibilidade para Usuários Daltônicos (em inglês).

Exemplo de contraste ruim: existe um texto branco no meio da imagem, que por causa do pouco contraste entre o texto e o fundo, ficou ofuscado.

Exemplo de bom contraste: o texto branco no meio da imagem não fica ofuscado pelo fundo, pois existe uma camada escura entre o fundo e o texto, permitindo que o texto branco de sobressalte.

Deixar o fundo escuro melhora o contraste.

Meça o contraste e se certifique que ele esteja pelo menos em 4.5:1. Aqui vai uma lista de ferramentas gratuitas para medir contraste de cores (em inglês).

Abaixo está uma imagem de uma grande falha de contraste na vida real:

Várias pessoas estão segurando uma grande faixa rosa com os dizeres “Você não está sozinho”. A falta de contraste do fundo com a palavra “não” a deixa quase invisível, ressaltando as palavras “Você está sozinho”.

A orientação geral de acessibilidade

A diretriz para a criação de conteúdo acessível para pessoas com daltonismo é bastante simples:

A cor não é usada como o único meio visual de transmissão de informações (Nível A) - Web Content Accessibility Guidelines 2.0

Então, é bom usar cores para transmitir informações, desde que ela também seja transmitida de alguma outra forma.

Um ótimo jeito de se certificar é visualizar seu layout em preto e branco antes de lança-lo. Você pode usar a ferramenta gratuita Funkify e fazer isso direto do navegador.

Mantenha-se atualizado sobre daltonismo

Aqui estão 2 contas incríveis para seguir no Twitter, que aumentam a conscientização sobre daltonismo: @colourblindorg e @WeTheColorBlind. Siga também @hampelusken.

Vamos terminar com este tweet do @colourblindorg mostrando que os problemas de cor também limitam as pessoas fora da web:

Descrição do tweet: comparação de um jogo de futebol assistido por pessoas sem daltonismo (esquerda) e com daltonismo (direita). Por causa da cor dos uniformes, daltônicos não conseguem diferenciar os jogadores de cada time, além da dificuldade para distinguir os jogadores do gramado verde.

Esse artigo foi traduzido e adaptado. Artigo original: https://axesslab.com/colorblind-accessibility-web-fail-success-cases/