Como desenhar para daltônicos seguindo as diretrizes WCAG

Por que desenhar para daltônicos importa

Daltonismo (deficiência de visão de cores, ou CVD) faz com que a pessoa não perceba o espectro completo de cores, dificultando distinguir cores específicas, sobretudo quando estão lado a lado ou em pouca luz. A maior parte dos casos é congênita, mas envelhecimento, medicamentos e condições como diabetes também podem causá-lo. É mais comum em homens: afeta cerca de 1 em cada 12 homens e 1 em cada 200 mulheres.

A deficiência vermelho-verde é a mais comum e varia de dificuldade com tons específicos a reconhecer apenas três ou quatro cores. As formas mais frequentes são a protanopia (sensibilidade reduzida à luz vermelha) e a deuteranopia (sensibilidade reduzida à luz verde): em ambas, vermelho e verde podem parecer tons de marrom ou amarelo, e azul e roxo podem ficar idênticos.

O artigo, de Demelza Feltham (TetraLogical), também nota que desenhar para daltônicos beneficia outras pessoas: alinha-se com práticas de internacionalização, já que cores têm significados diferentes entre culturas, e melhora a legibilidade sob luz solar forte ou brilho na tela - gráficos que usam padrões além de cor continuam legíveis mesmo quando as cores se apagam.

Requisitos WCAG e sinais visuais adicionais

O Critério de Sucesso 1.4.1 das WCAG estabelece que a cor nunca deve ser o único meio de transmitir informação. Isso significa combinar cor com ícones, padrões ou rótulos de texto. O exemplo elogiado é o Slack: os estados "ativo" e "ausente" usam círculos, mas o ativo é um círculo preenchido e o ausente, um círculo contornado com centro vazio - a mudança de forma comunica a diferença mesmo sem percepção de cor.

Contraste suficiente

As WCAG também exigem contraste de cor para texto e elementos não textuais, incluindo estados como botões ativos e inativos. O algoritmo de contraste funciona da mesma forma entre tipos de daltonismo: se a proporção é 4.5:1 para visão padrão, também é 4.5:1 para pessoas daltônicas. Mesmo assim, o melhor é escolher combinações de cores com cuidado, e não apenas aumentar o contraste de combinações problemáticas.

Combinações a evitar

• Roxo e azul: podem parecer muito parecidos para pessoas com protanopia ou deuteranopia.
• Verde e vermelho: podem aparecer como tons de amarelo ou marrom. Como vermelho é comum em validação de formulários, o texto de erro deve comunicar o problema por texto (por exemplo, a palavra "Error") ou ícone, nunca só pela cor.

As imagens filtradas do artigo foram geradas com o simulador Coblis. A autora ressalva que simulações são úteis para checagens iniciais, mas não substituem testes de usabilidade com pessoas reais.

Tons de cinza e azul como escolha segura

O daltonismo costuma ficar evidente apenas quando cores aparecem juntas. Uma abordagem possível, embora inviável para a maioria das interfaces com cores de marca, é desenhar em tons de cinza ou monocromático. O cartógrafo Mark Harrower, citado via série de Lisa Charlotte Muth (Datawrapper), sugere um teste simples: se o design funciona em tons de cinza, provavelmente funcionará para daltônicos - e recomenda "escalas de cor de matiz única", que se apoiam em luminosidade em vez de combinações de cores.

Entre matizes, o azul é geralmente o mais distinguível para pessoas com daltonismo vermelho-verde, sendo boa escolha para links e indicadores de status. A ressalva é a tritanopia, condição rara (cerca de 1 em 10.000 pessoas) em que azul e verde são difíceis de separar. O azul deve ser tratado como opção mais segura, não garantida - e sempre acompanhado de outro sinal visual.

Temas de daltonismo e estados de interface

Paletas e temas voltados a daltonismo, comuns em videogames (com paletas para protanopia, deuteranopia e modo de alto contraste), dão ao público controle sobre a experiência. Além disso, todo elemento interativo - botões, links, campos de formulário - tem estados como hover, foco, ativo e desativado. Se esses estados dependem apenas de mudanças sutis de cor, podem ser imperceptíveis para pessoas daltônicas. A conclusão prática é sempre combinar cor com outra forma de comunicar a mesma informação.