Acessibilidade das Cores — Conheça os 3 principais erros e como resolver….
Escrito por: Marília Gabriele Suzart
Quando o assunto é acessibilidade, todas as pessoas que trabalham como Designers amam falar sobre as cores. Mas, ironicamente, poucas entendem como realmente torná-las acessíveis.
Se engana quem pensa que acessibilidade de cores é apenas para pessoas daltônicas, os critérios da WCAG relacionados as cores também são fundamentais para as pessoas com DCNA — Deficiências Cognitivas Neuronais ou de Aprendizagem.
A utilização incorreta das cores pode prejudicar a compreensão das pessoas com DCNA, como também gerar estresse e desconforto.
Nesse artigo, eu vou te contar um pouco da minha experiência trabalhando em equipes de produto, quais foram os principais erros relacionados as cores, os aprendizados que obtive e como trabalhar bem com as cores.
Esse artigo é o material de apoio do nosso vídeo no YouTube sobre as cores:
Dica: Esse vídeo é curto e didático, ideal para reproduzir em uma reunião. Você pode utiliza-lo para iniciar um papo com os times de Design e Branding.
Os 3 principais erros
Baseados na minha experiência em times de produtos, nos quais atuei como “embaixadora” da acessibilidade.
➀ Definir cor para a paleta baseada no contraste mínimo de 3:1
Em 2020, eu estava trabalhando como desenvolvedora em uma FoodTech, um certo dia eu comecei a estudar sobre as cores e fiz alguns testes de contraste, foi quando descobri que a cor principal do site tinha o contraste de 3.37:1. Conversei com o designer do meu time e informei que a cor não era acessível para textos pequenos. Ele me contou que há cerca de 3 meses atrás, havia feito um estudo de cores e fez os testes de contraste, mas mesmo assim decidiu manter essa cor pensando em usá-la apenas em textos grandes, como títulos e componentes gráficos, porém ele havia esquecido e acabou usando essa cor para tudo. Depois disso, trocamos a cor em todas as telas.
➁ Realizar os testes de contraste apenas com o fundo branco
Em 2021, eu comecei a trabalhar como voluntária na Lacrei, uma das primeiras coisas que fizemos foi realizar o estudo de cores. Para evitar o erro anterior, estabelecemos o contraste mínimo de 4.5:1 e montamos uma paleta maravilhosa, pelo menos era o que achávamos. O tempo passou, ocorreu várias mudanças na equipe, o produto evoluiu… Quando eu recebi os protótipos para revisão, encontrei vários problemas de contraste. Tinha card rosa com texto cinza e o texto tinha opacity que deixava a cor ainda mais clara. Tinha tela com fundo preto e texto roxo, também com baixo contraste. O time de Designers precisou fazer vários ajustes nos protótipos, antes de entregar para o desenvolvimento.
➂ Utilizar a cor como única fonte da verdade
Ao longo desses 2 anos de experiência com acessibilidade, absolutamente ninguém sabia da importância de utilizar outros elementos como um apoio visual, além da cor. Foram muitas solicitações de revisão de protótipos para corrigir isso.
Trabalhando com a Acessibilidade das Cores
Aqui vou resumir algumas premissas básicas que eu sigo para trabalhar com a acessibilidade das cores, com base na minha experiência.
Use o contraste mínimo de 4.5:1 como base
Crie uma paleta de cores, na qual todas combinações estejam com o contraste mínimo de 4.5:1. Assim, aumentamos o nosso público, pois mais pessoas terão acesso ao conteúdo e atendemos o nível de conformidade AA para qualquer fonte.
Existem várias ferramentas para testar o contraste das cores. Como por exemplo: o site Adobe Color. O plugin do Figma Stark. O plugin do Chrome Lighthouse que, além disso, faz várias validações básicas de acessibilidade e SEO. E o Storybook que serve para documentar o Design System e também realiza algumas validações de acessibilidade.
Experimente algumas e escolha qual é melhor para sua rotina de trabalho. A seguir, uma imagem de teste de contraste no Adobe Color:
WCAG, critério de Sucesso 1.4.3 Contraste (Mínimo) (Nível AA): A apresentação visual de texto e imagens de texto tem uma relação de contraste de pelo menos 4,5:1…
GAIA, Recomendação 1 — Vocabulário Visual e Textual: A cor de fundo deve ser diferente o suficiente da cor do objeto do primeiro plano e possui contraste adequado. Dê preferência para planos de fundo de cores claras ou branco para destacar os objetos ou textos do primeiro plano.
Documente todas as combinações testadas e aprovadas
Quando estamos desenvolvendo o Style Guide, precisamos pensar que depois, várias pessoas do time vão utilizar essa documentação como referência e que durante a evolução do produto muitas informações se perdem.
Documente as combinações, para que qualquer pessoa do time, mesmo as que ainda serão contratadas, saibam quais combinações são acessíveis. A imagem abaixo ilustra a documentação de uma cor feita pelo designer do meu time, após as nossas conversas sobre acessibilidade das cores.
Saiba que será impossível uma única cor atender a todas as cores de plano de fundo! Realize o teste de contraste, faça os ajustes necessários e documente todas as combinações que forem necessárias para o produto.
Além da cor, use outros elementos para transmitir informações
As cores são importantes, mas não podem ser a única forma de diferenciar o estado dos componentes na tela. Precisamos pensar nas pessoas que só enxergam escala de cinza e nas pessoas com deficiências cognitivas.
Entenda como é frustrante para uma pessoa usuária com Acromatopsia encontrar essa barreira na navegação de produtos digitais e como a solução é muito simples, como ela diz, “bastava apenas um sublinhado”. Assista ao TikTok de Jess Fontoura, navegando na Amazon Prime Video:
Para testar a escala de cinza, eu uso o plugin do Chrome Colorblindly. Eu ativo o modo Monocromacy / Achromatopsia e faço a análise das telas verificando se é possível diferenciar o estado dos componentes, como selecionado, marcado, desmarcado, ativo, desabilitado, bem como os feedbacks de erro e alertas. Exemplo de teste nas imagens abaixo:
Também é possível testar diretamente no iPhone, na opção filtros de cor, selecione a opção tons de cinza. O caminho é: Acessibilidade > Tela e Tamanho de Texto > Filtros de cor > Tons de cinza.
WCAG, critério de Sucesso 1.4.1 Uso de Cor (Nível A): A cor não deve ser usada como o único meio visual de transmitir informações, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual.
GAIA, Recomendação 1 — Vocabulário Visual e Textual: Cores não devem ser a única forma de transmitir um conteúdo.
Forneça opção para customização das cores
A maioria dos dispositivos, fornecem opções para a pessoa usuária personalizar o aparelho. Antes de criar uma configuração interna para escolha de paleta de cores, faça o básico!
Certifique-se de que as customizações configuradas no dispositivo ou navegador estejam sendo respeitadas e funcionando adequadamente, como por exemplo, modo claro e escuro, reduzir transparência e aumentar contraste. Como também garantir que plugins de customização de páginas funcionem corretamente.
Para testar a customização em páginas web, eu uso o plugin do Google Chrome WebHelp, que além de customizar as cores do texto e do fundo, também customiza estilo de fonte, espaçamento entre linhas, espaçamento entre parágrafos, alinhamento do texto e outras funcionalidades.
Nota para dev: evite usar
!importantno CSS, pois prejudica a customização realizada pelos plugins de acessibilidade.
Gaia, Recomendação 5 — Customização: Permita às pessoas usuárias alterar o esquema de cores da página, incluindo um modo de alto contraste.
Reduza o esforço cognitivo
Alguns conceitos muito comuns, mas não menos importantes: Procure manter uma consistência das cores, por exemplo, mantenha todos os links com a mesma cor. Use cores intuitivas, por exemplo, vermelho para erro, verde sucesso e assim por diante.
GAIA, Recomendação 1 — Vocabulário Visual e Textual: Você pode utilizar cores para diferenciar seções de um site ou relacionar conteúdos similares.
Obrigada por ler. Espero que esse conteúdo seja útil para você ☺
