Acessibilidade: cores ao alcance de todos

Como projetar telas com cores visíveis para todos os usuários

Quando falamos em acessibilidade, cor talvez seja um dos aspectos mais fáceis de lidar, mas também é um dos mais negligenciados. O motivo? Porquê as cores, muitas vezes, ficam restritas a decisões estéticas, que na grande maioria dos casos, não leva a questão da acessibilidade em conta.

Para que possamos mudar este cenário, o único caminho é procurar conhecer mais sobre como a escolha das cores do seu layout impactam na experiência do usuário que visita a sua interface. Para começar, convido você a entender algumas das limitações mais comuns:

Daltonismo

Acredito que a grande maioria de nós já tenha visto a comparação de como um daltônico e uma pessoa com visão normal enxergam um pacote de balas coloridas ou uma caixinha repleta de lápis de cor. Essas imagens são excelentes para nos passar a percepção de como o daltônico vê o mundo.

Mas como o olho humano enxerga as cores?

Cada cor do arco-íris corresponde a um comprimento diferente de onda de luz. Quando refletida ou emitida por um corpo, ela alcança o olho, atravessa uma lente, o cristalino, e é projetada na retina, uma região no fundo do olho que capta os estímulos luminosos, transforma em impulsos elétricos e os transmite para o cérebro através do nervo ótico.

Na retina, existem dois tipos de células fotossensoras: os cones e os bastonetes. Os cones são responsáveis pela visão diurna e a percepção das cores. Cada um deles responde ao comprimento de onda das cores vermelho, verde, azul e suas variantes.

Os bastonetes não são sensíveis à diferenciação de cor. Como funcionam com pouca luz, possibilitam melhor visão noturna e periférica, produzindo imagens em preto e branco com todas as suas gradações.

A causa do daltonismo, portanto, é uma alteração no pigmento dos cones, ou a ausência dessas células fotorreceptoras, o que interfere na capacidade de distinguir algumas cores e na percepção de outras cores do espectro.

O daltonismo está presente em 5% da população mundial (8% dos homens), e é composto por três variações:

• Deuteranopia: também conhecido como daltonismo vermelho-verde e o mais popular de todos os formatos, representando 90% dos casos. É caracterizado pela incapacidade de enxergar ondas de tamanho médio, causando uma maior dificuldade em distinguir entre tons de verde e vermelho. Resultando na perda de 4 ou mais tons de cor;
• Protanopia: onde não há a percepção das ondas de tamanho longo, ou os tons mais avermelhados, e é responsável por 9% dos casos de daltonismo;
• Tritanopia: o menos popular, presente em 1% dos diagnósticos, e neste caso o indivíduo não consegue visualizar a cor azul.

Ou seja, 99% das pessoas que vivem com o daltonismo não conseguem perceber tons de verde e vermelho, justo as duas cores correspondente ao sucesso ou fracasso, ao siga em frente ou pare, ao certo ou errado.

Queremos inclusão

Tomando consciência deste cenário, o primeiro passo para driblar o daltonismo é não confiar somente nas cores para passar uma informação. Utilize de texturas, ícones e textos para garantir que o recado será compreendido pelo receptor.

E a boa notícia, é que não é necessário pensar caso por caso, pois a solução é a mesma para todos. Cores análogas ou uma escala de tons de cinza, por mais bonito que fique em um design minimalista, vai ser uma tortura para os usuários. Então seja exigente e garanta um contraste alto entre os tons da sua interface. A W3C pede um contraste mínimo de 1:4.5 (ou 1.3 para textos maiores).

E ao começar a definir a sua paleta de cores, não esqueça de considerar o brilho, saturação e o matiz das cores. Assim, todos os usuários poderão ter a mesma experiência visual que foi projetada.

Usuário no centro das decisões

Foi levando em consideração todas as boas práticas que eu trouxe neste artigo que projetamos a novíssima tela de análise de faixas de preços da Mercafacil.

A tela tem como objetivo proporcionar ao usuário uma análise que facilite a ele o desenvolvimento de campanhas que promovam o upsell entre seus consumidores.

Para criar a distinção entre as dez possíveis faixas de preços, nós utilizamos, além das cores, texturas. Mas não qualquer textura: queríamos trazer um sentido que se relacionasse com a nossa empresa.

Presente em mais de vinte estados, a brasilidade está no DNA da Mercafacil. Seja com nossos clientes ou funcionários, o multiculturalismo brasileiro está no nosso dia-a-dia, e queríamos representar isso nas texturas das faixas que serão utilizadas por clientes de todo o Brasil.

Brasília, Curitiba, Rio de Janeiro, São Paulo, Belo Horizonte e Salvador foram as capitais que tiveram alguns de seus muitos pontos turísticos representados em nossa tela.

Além das texturas presentes nas faixas, tivemos o cuidado com o contraste entre os textos e as cores de fundo. Não foi tolerado contraste inferior a 7:1 em nossa tela, garantindo o padrão AAA, o mais alto do WCAG 2.0 Level.

Projete para todas as pessoas

Eu espero ter contribuído na sua busca por mais conhecimento sobre como tornar as interfaces mais acessíveis. E sempre que estiver trabalhando em um novo site, aplicativo, plataforma ou até mesmo em um conteúdo para as redes sociais, não esqueça da acessibilidade. Incluir todas as pessoas com deficiência tornando o mundo digital mais inclusivo é um dever de todos nós.

Fontes:

Fonte utilizada para explicar como o olho humano enxerga as cores.

Fonte utilizada para compreender o tamanho da população daltônica.