Acessibilidade: o impacto das cores
Dentro da acessibilidade, cor talvez seja um dos aspectos mais fáceis de abordar e, mesmo assim, um dos mais negligenciados. O principal motivo é porque a escolha das cores fica muitas vezes restrita a uma decisão estética do designer visual.
A única maneira de quebrar esse estigma é entender mais sobre como a escolha das cores impactam a experiência de quem visita o seu site ou usa o seu aplicativo e como algumas simples boas práticas podem mudar esse cenário. Para isso, precisamos entender algumas das limitações mais comuns:
Daltonismo
Impossível de falar de cor e acessibilidade sem começar pelo daltonismo. Todo mundo já viu uma comparação entre como um daltônico e uma pessoa com uma visão normal enxergam uma arara ou uma caixa de lápis colorido. Essas fotos são ótimas para explicar do que se trata essa deficiência visual, mas como isso impacta as coisas mais básicas de uma interface digital, como um formulário?
A nossa retina possui bastonetes, que captam luminosidade, e cones, que reconhecem as cores. 3 tipos de cones — especializados em reconhecer azul, verde e vermelho — são responsáveis por formar todo o espectro de cores visíveis.
[caption id=”” align=”alignnone” width=”668"]
Mutação nos cones responsáveis pela cor verde. Imagem do site wearecolorblind.com.[/caption]
O Daltonismo, deficiência presente em 8% dos homens, ocorre quando há mutação em um ou mais desses tipos de cones, limitando o espectro de cores visíveis. O tipo mais comum (90% dos casos) é a deuteranopia, que limita a percepção da cor verde.
No diagrama acima, logo dá para perceber que a distinção entre verde e vermelho é bem difícil para um daltônico. Justo as cores “universais” para sucesso ou erro, certo ou errado, vitória ou derrota, vai ou para. Justo as cores presentes em 99% dos formulários por aí.
[caption id=”” align=”alignnone” width=”730"]
Quem ganhou e quem perdeu nos últimos 10 jogos? Imagem do site wearecolorblind.com.[/caption]
99% dos formulário estão errados? Bom, estão se usarem apenas a cor vermelha para dizer que há algo errado. A primeira boa prática para a escolha de cores é: não confie apenas nas cores para passar uma informação, use também ícones e textos para garantir que o recado está dado.
[caption id=”attachment_12923" align=”alignnone” width=”211"]
O jogo 2dots usa ícones para diferenciar as bolinhas na tela.[/caption]
50 tons de cinza
Pensar em cores para acessibilidade não é pensar em apenas em daltônicos, é pensar em todos os usuários.
Daltonismo não é o único motivo para levar a sério a escolha das cores em uma interface: existem outras deficiências visuais, como a catarata e baixa visão, comuns na terceira idade, que é uma fatia cada vez maior de usuários; e, mesmo com uma visão normal, o contexto afeta como alguém percebe e enxerga as cores: brilho e contraste do monitor, a iluminação do ambiente e a hora do dia.
Isso torna-se crítico quando um design é definido em um Cinema Display e os usuários possuem outro tipo de monitor para acessar, independente da sua idade e se possui ou não algum tipo de deficiência visual.
É claro que aquele texto em cinza em um fundo cinza um pouco mais claro fica elegante, mas o monitor de um computador comum não vai conseguir reproduzir as nuances de brilho e contraste de um monitor profissional. E mesmo no display de um novíssimo smartwatch pode ficar difícil de enxergar em um dia ensolarado. A resolução, o tamanho da fonte e ícones e até o contexto de uso pode afetar a percepção das cores e a acessibilidade do conteúdo.
[caption id=”” align=”alignnone” width=”720"]
Exemplo de baixo contraste no Squarespace.[/caption]
A boa notícia, é que não é necessário pensar caso por caso, a solução é a mesma para todos. Cores análogas ou uma escala de 50 tons de cinza, por mais bonito que fique em um design minimalista, vai ser uma tortura para os usuários (piada inevitável número 1). Garantir um mínimo de contraste para permitir a distinção entre cores e elementos é a boa prática número 2.
Acessibilidade é só o começo
“In visual perception a color is almost never seen as it really is[…] This fact makes color the most relative medium in art.” — Josef Albers, Interaction of Color, 1963
#FFFFFF e #FFD700 ou #000000 e #0000FF? Ok, você já está cansado de ouvir a história do vestido que ~muda~ de cor e já compartilhou algum artigo explicando o porquê disso. Por isso, vamos te poupar de uma nova piada sobre o assunto ou sobre uma explicação extremamente complexa do porquê isso acontece.
Mas a moral da história não deixa de ser extremamente válida: por mais que uma cor possa ter um código numérico atribuído à ela, isso não significa que todo mundo enxerga do mesmo jeito ou a consegue identificar (vide os testes de cores para provar o quão difícil pode ser identificar uma cor). Novamente, isso é especialmente importante para pessoas com algum tipo de deficiência visual.
Assim, para fugir de pegadinhas, a terceira boa prática é: garanta que as cores sejam identificáveis usando sua saturação e luminosidade.
Pode parecer complicado, mas isso significa basicamente deixar as cores escuras mais escuras, as claras mais claras, e aumentar a saturação da cor para torná-la facilmente identificável comparada com as cores ao seu redor (guarde a baixa saturação para o Instagram).
Ou, parafraseando Tim Maia: mais brilho, mais saturação, mais matiz, mais tudo.
Acima: o roxo escuro funciona bem com um fundo verde claro, mas o contrário não é verdade.
Seguir essa boa prática e as outras acima não significa condenar a estética da sua interface. Apenas servem como um ponto de partida para a discussão visual. Depois que pensar em acessibilidade for o modus operandi, todo um outro universo de cores se abre para ser explorado: psicologia das cores, aplicação no branding, criação de uma paleta de cores apropriada e por aí vai.
Preto no branco: recapitulando as 3 boas práticas para cores mais acessíveis
Da mesma maneira que abrimos esse post, terminamos ele: dentro da acessibilidade, cor talvez seja um dos aspectos mais fáceis de abordar. Não precisa lembrar o que são e cones e bastonetes ou quais cores são mais seguras. Basta seguir alguns princípios básicos, preto no branco:
- Não confie em uma cor para passar alguma informação importante.
Utilize ícones, texto e até mesmo textura para deixar uma informação clara. Isso está lá na W3C. - Garanta um bom contraste entre cores e elementos.
Leve em consideração o tamanho dos elementos, fontes e contexto de uso. A W3C pede um contraste mínimo de 1:4.5 (ou 1:3 para textos maiores). - Mais brilho, mais saturação, mais matiz, mais tudo!
Quando começar a definir a paleta de cores a ser usada, não esqueça de considerar o brilho a saturação e mesmo a matiz das cores. Assim, todos os usuários poderão ter a mesma experiência visual que foi projetada.
Ferramentas para ajudar no processo
Para ficar ainda mais fácil, existem várias ferramentas online que ajudam checar se você está fazendo a lição de casa. Alguma delas:
Links e referências
Nada escrito aqui é novidade, está tudo nos links abaixo para quem quiser continuar a leitura sobre cores e acessibilidade:
Contraste na web:
- Artigo A List Apart sobre teste de contraste
- Manifesto para mais contraste nessa web (Contrast Rebellion)
- Low-Contrast Text Is Not the Answer
Daltonismo:
- Ótimo artigo sobre desenhar para daltônicos
- Site sobre daltonismo com testes e ferramentas
- Site sobre daltonismo com exemplos da web e artigos
Ou também ver como anda a sua visão:
Nos próximos posts falaremos mais sobre como a Acessibilidade pode impactar suas decisões de design. Você pode acompanhar nossos posts pelo Twitter, Facebook, por Email ou RSS.
[tw-divider][/tw-divider]
Esse post faz parte do Mês da Acessibilidade aqui no Blog de AI: uma série de artigos sobre construir experiências que sejam acessíveis a mais usuários, e em novos contextos de uso. A ideia é encorajar mais designers a lerem, discutirem e promoverem Acessibilidade em suas empresas, comunidades e entre amigos.
