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.
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:
- Colour Contrast Analyser
- Contrast Ratio3
- Color Safe4
- Contrast Checker5
- 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!
