Quem trabalha com design sabe que a combinação das cores de um produto digital (layout de site, interface de aplicativo ou artes para redes sociais, por exemplo) é muito importante para transmitir a identidade da marca, melhorar a experiência da pessoa que acessa aquele material e, claro, chamar a atenção. Mas é necessário seguir algumas recomendações para garantir a acessibilidade digital.
O uso de cores da forma incorreta não prejudica apenas a navegação de quem tem daltonismo, atrapalhando também a experiência de quem tem deficiência cognitiva neuronal ou de aprendizagem e baixa visão. Além disso, também pode gerar estresse e desconforto visual para todas as pessoas (com e sem deficiência).
Como tornar as cores acessíveis?
Em um artigo para o site Medium, Marília Gabriele Suzart, desenvolvedora, autista que tem hiperfoco em acessibilidade e uma de nossas queridas voluntárias, descreveu os erros mais comuns no uso de cores e deu dicas muito legais para garantir a acessibilidade. Listamos algumas delas aqui para te ajudar em seus projetos. Confira:
1. Use o contraste mínimo de 4:5:1 como base
O valor mínimo exigido pela WCAG para o contraste entre as cores é de 4.5:1. Então, a dica é sempre testar as combinações com ferramentas que permitam essa checagem, como a Color Contrast Analyzer e a Color Contrast Checker.
2. Pense no contraste em diversos fundos e não apenas no branco
Ao longo de um projeto, é comum que algumas coisas mudem, ganhem outros layouts e até cores novas. Por isso, na hora de testar o contraste, é preciso levar em consideração outras possibilidades de cores de fundo além do branco.
Outra recomendação importante é sempre documentar as duas cores testadas e aprovadas. Assim, você tem esse registro e mais de uma opção se precisar fazer alguma mudança e outras pessoas da equipe também podem acessar essa informação.
3. Além da cor, utilize outros recursos para enfatizar uma informação
É comum encontrar em mapas ou gráficos, por exemplo, informações que são interpretadas apenas pela cor utilizada. Essa é uma barreira comum de navegação para quem enxerga as cores de uma maneira diferente. Por isso, a premissa básica é sempre ter mais de uma forma de transmitir uma mensagem.
Para deixar sua visualização de dados mais acessível, por exemplo, você pode usar legendas diretamente sobre a imagem, gráficos e símbolos ou texturas, linhas e traços diversos.
4. Garanta o contraste entre fundo e texto em diversos modos de exibição
Se o seu aplicativo ou site possui mais de um modo de exibição, como claro ou escuro ou reduzir a transparência, você precisa garantir que o contraste entre as cores também funcionará caso a pessoa escolha essa opção.
5. Tente reduzir o esforço cognitivo
Manter uma constância no uso de cores do seu projeto pode ajudar a navegação de pessoas neurodiversas. Um exemplo é manter todos os links com a mesma cor e seguir sempre um mesmo padrão para os títulos e elementos textuais.
Usar cores intuitivas (como vermelho para erro e verde para certo) também melhora a experiência dessas pessoas.
ACESSE TAMBÉM:
- Artigo de Marília para o site Medium “Acessibilidade das Cores — Conheça os 3 principais erros e como resolver….”
- Vídeo da designer no YouTube “#1 – Style Guide Acessível | Cores – Conheça os 3 principais erros e como resolver…”
- Ferramenta de contraste: Color Contrast Analyzer
- Aplicativo Adobe Color
- Conheça as barreiras de acessibilidade que pessoas daltônicas enfrentam na web e saiba como evitá-las