Quando falamos sobre acessibilidade, todos que trabalham como designers adoram falar sobre cores. Mas, ironicamente, poucos realmente entendem como torná-las acessíveis.
Neste vídeo, vou listar alguns pontos importantes para trabalhar com cores de forma acessível e também fornecer algumas dicas para evitar erros comuns que acontecem à medida que a equipe cresce e para escalar o produto.
〰️
➽ Material de apoio:
〰️
➽ Descrição do Vídeo:
O fundo parece papel. Ao longo da narrativa, há alguns textos e imagens animadas, que dão apoio visual ao discurso. Além disso, há algumas frases no vídeo, chamadas de “Dicas da Mari”. Nem todas foram mencionadas no áudio, porque o vídeo ficaria muito longo. Dito isso, vou listar todas as dicas:
- Para evitar implementações, lembre-se de documentar todas as combinações testadas e aprovadas.
- Você viu como é difícil notar a diferença apenas usando cores? Isso prejudica a experiência de pessoas com Acromatopsia e pessoas com deficiências cognitivas… Eu uso o Colorblindly para fazer esse teste (link na descrição). Neste momento, há algumas imagens comparando a visualização normal e em escala de cinza para um componente de aba, usando apenas cores e outra cor + sublinhado.
- Ao projetar produtos digitais, não é um desfile de moda para apresentar as coisas mais estranhas! A interface deve ser simples e fácil de usar, como suas roupas de trabalho em casa! Se você quer expressar seu lado artístico, procure um hobby em vez disso. Além disso, há uma foto de um modelo extravagante e a frase: “Ninguém usa isso nos dias de trabalho”!
- Antes de criar milhares de configurações internas, faça o básico e faça bem feito! Certifique-se de que todas as opções que a pessoa configurou no dispositivo ou navegador estão funcionando corretamente. Mais detalhes no material de apoio.
〰️
➽ Ferramentas para ajudar nos testes de acessibilidade de cores:
〰️
➽ Recomendações relacionadas a cores:
WCAG, Compreendendo o Critério de Sucesso 1.4.1: Uso de Cor:
WCAG, Compreendendo o Critério de Sucesso 1.4.6: Contraste (Aprimorado):
GAIA, Recomendação 1 - Vocabulário Visual e Textual:
Gaia, Recomendação 5 - Personalização:
〰️
➽ Tarefa de Casa:
Revise as telas do seu último projeto e procure erros relacionados à acessibilidade de cores, e corrija pelo menos um deles.
Sinta-se à vontade para reproduzir este vídeo em uma reunião de escritório para iniciar uma discussão sobre este tema hoje.
〰️
Obrigado por assistir. Espero que este vídeo tenha sido útil para você!