por Raphael Calais

Acessibilidade no Design de Interfaces – Episódio 2: as cores

No segundo episódio da nossa série sobre Acessibilidade no Design de Interfaces, abordaremos as cores. Muito além da estética, elas desempenham um papel essencial no desenvolvimento de sites e aplicações e merecem nossa atenção.

Mas, o que é Acessibilidade no Design mesmo?

Antes de continuar com o assunto, vamos relembrar o que Acessibilidade significa e o porquê pensar nesse assunto é tão importante!

Quando vamos a um estabelecimento é comum vermos rampas ou elevadores que possibilitam o acesso de cadeirantes, certo? Isso é acessibilidade: desenvolver um projeto que inclui pessoas portadoras de deficiências ou com mobilidade reduzida.

No mundo digital o mesmo princípio é válido! Um site ou aplicação precisa ir além da estética para contemplar usuários com dislexia, idosos ou qualquer pessoa com dificuldade visual.

E onde as cores entram na Acessibilidade no Design de Interfaces?

Nem todos nós vemos as cores da mesma forma. Isso acontece por conta dos dispositivos que usamos e também devido a problemas como daltonismo, catarata ou baixa visão.

Vamos analisar o diagrama abaixo e pegar o daltonismo como exemplo.

Mapa de cores para daltônicos, aqui falamos da visão normal em comparação da Protanopia, deuteranopia, tritanopia.

Você consegue notar o quanto as cores “universais”, verde e vermelho, são difíceis de serem reconhecidas? Logo elas, que estão presentes em tantos formulários espalhados por aí!
Outro caso comum e que dificulta a leitura é o uso de um contraste baixo entre uma cor e outra, como por exemplo um fundo cinza com o texto em branco, que não só dificulta a leitura de quem tem baixa visão, como para quem usa monitores com pouco brilho e contraste ou está em um ambiente com iluminação intensa.

Boas práticas para cores mais acessíveis no design

Você não consegue olhar com os olhos de todos e pensar na escolha das cores parece uma tarefa impossível? Calma, resolver o problema das cores na acessibilidade é mais fácil do que parece, basta seguir alguns princípios básicos e testar seus designs em diferentes telas.

1- Não confie apenas na cor!
Sim, a cor é importante, mas não deve ser a única a guiar o usuário. Utilize também ícones, texto e texturas para tornar as informações mais claras.

2- O contraste é seu amigo!
Garanta sempre um bom contraste entre as cores e os outros elementos.

3- Às vezes, mais é mais!
Não tenha medo de usar mais brilho, mais saturação e mais matiz! Aumentar um pouco cada um deles pode ser a diferença na hora de proporcionar a experiência visual que você deseja para todos.

Como saber se estou no caminho certo?

Depois que escolher as cores desejadas, teste! Veja seu design em diferentes telas e peça para que outras pessoas dêem sua opinião (garanta que sejam de diferentes idades e que tenham dispositivos diferentes).

Além disso, conte com ferramentas gratuitas que mostram se suas cores e fontes estão legais! Confira alguns exemplos:

  1. Colour Contrast Analyser
  2. Contrast Ratio3
  3. Color Safe4
  4. Contrast Checker5
  5. CoblindorIamcal Color Vision

Você está quase lá!

Agora que você já refletiu a respeito das formas e das cores e estudou como usá-los a favor de todos, você está a um passo de criar um design que vai além da estética e da responsividade! No próximo episódio vamos finalizar falando sobre o texto e a tarefa de levar a acessibilidade às suas criações ficará ainda mais fácil!

Ah! Se você ficou com dúvidas, pode falar que nós ajudamos!

https://performait.com/#sobre

Gostou? Compartilhe!

Conteúdos
relacionados

Compartilhe nas redes sociais: