Acessibilidade em Cores: como garantir um produto digital mais inclusivo
Não lembro exatamente quando foi a primeira vez que ouvi falar sobre acessibilidade, mas lembro de ter ficado com a impressão que era um assunto distante, difícil de ser discutido e mais difícil ainda de contribuir.
Quando comecei a estudar sobre Design Systems, esse tema voltou com tudo: entendi que um DS não só pode como deve levar em consideração boas práticas de acessibilidade para que os produtos sejam mais inclusivos.
Desde então, passei a me interessar ainda mais e estudar em todas as oportunidades possíveis, assistir palestras e consumir materiais sobre o assunto. Nesse caminho encontrei (e ainda estou encontrando) muita gente que tem interesse no tema, que quer trocar ideias e fomentar o assunto. Esse artigo é minha forma de levar o assunto para mais pessoas e mostrar que é possível aplicar algumas boas práticas e fazer o nosso entorno — seja ele qual for — mais acessível. 😃
Tá bem, mas o que é acessibilidade exatamente?
Segundo o Guia de Rodas:
Acessibilidade é a possibilidade de acessar um lugar, serviço, produto ou informação de maneira segura e autônoma, sem nenhum tipo de barreira, beneficiando a todas as pessoas, com ou sem deficiência, em todas as fases da vida.
A acessibilidade permite oferecer a todos os diferentes oportunidades iguais, independentemente de sua capacidade ou circunstâncias.
Então, quando estamos falando de produtos com acessibilidade, estamos nos referindo a produtos que conseguem ser consumidos/acessados pelo maior número de pessoas possível, independente das condições específicas da pessoa usuária (incluindo PCDs — pessoas com deficiência, por exemplo).
Quando uma empresa não oferece acessibilidade para seu produto/serviço, ela exclui a possibilidade de várias pessoas de consumirem seu produto/serviço. Estamos falando de uma fatia enorme da população que não é levada em consideração na construção de tudo que consumimos enquanto sociedade: segundo o censo de 2010 do IBGE, só no Brasil existem 12 milhões de pessoas com deficiência motora/física, mais de 6 milhões de pessoas com deficiência visual e 2 milhões no espectro autista — só para citar alguns recortes.
Um exemplo real dessa exclusão é quando os cinemas disponibilizam filmes nacionais e animações somente em sessões dubladas e sem legendas: nosso país conta com mais de 10 milhões de pessoas com deficiência auditiva. Essas 10 milhões de pessoas são excluídas da experiência de assistir um filme desse tipo simplesmente por não existir sessões legendadas, com descrição em tela ou com dispositivo de assistência disponibilizado pelo cinema.
O benefício para pessoas com deficiências permanentes é o primeiro que pensamos quando falamos de acessibilidade, mas não é o único. Também existem pessoas com condições não permanentes: alguém que precisou usar um colírio para dilatar as pupilas tem sua visão afetada, uma pessoa cuidadora de uma criança de colo muitas vezes utiliza apenas um dos braços para realizar tarefas, alguém que quebrou a perna precisa andar de cadeira de rodas ou muleta por tempo limitado etc.
Ao priorizar acessibilidade, estamos incluindo ou melhorando a experiência de muito mais pessoas do que inicialmente podemos imaginar.
Onde e como podemos aplicar princípios de acessibilidade?
Existem muitas formas de aplicar alguns princípios que garantem maior acessibilidade, independente de você trabalhar com produtos digitais ou não.
Algumas práticas que todo mundo pode aplicar:
- prestar mais atenção na sua comunicação escrita e falada para prezar sempre pela inclusão
- usar linguagem simples
- usar hashtags inclusivas
- sempre usar o recurso de Alt text disponível nas redes sociais
Aqui mesmo no Medium é possível utilizar esse recurso de Alt text:
Mas se você trabalha com produtos digitais, existem formas mais técnicas para melhorar a acessibilidade. O Guia WCAG é a melhor recomendação para começar: lá você encontra diretrizes específicas que são simples de aplicar e garantem diferentes níveis de acessibilidade.
Se você é uma pessoa desenvolvedora, por exemplo, pode procurar quais são as melhores práticas na hora de codar elementos (sei muito pouco sobre essa parte, mas sugiro que pesquise sobre o uso do aria-label e conteúdos pela web marcados pela #a11y).
Caso você seja uma pessoa designer, como eu, uma das formas de melhorar a acessibilidade do seu trabalho pode ser por meio das cores.
Como podemos garantir cores mais acessíveis?
O Guia WCAG tem algumas diretrizes referentes a cores, cada uma contemplando um nível de acessibilidade. Vou explicar de forma resumida quais são elas:
1. Utilização de cores
Cores não devem ser utilizadas como única maneira de transmitir conteúdo ou distinguir elementos visuais.
Por exemplo: uma mensagem de erro em um formulário deve trazer um ícone de alerta, uma mensagem informando como corrigir o erro e também uma cor destacando a informação (e não apenas a mudança de cor).
2. Contraste entre texto e fundo
Para dar uma leitura acessível, deve existir uma relação de proporção numérica mínima entre a cor do texto e a cor de fundo de onde ele está aplicado.
Essa proporção pode ser calculada por sites (como Who Can Use) ou plugins do Figma (um dos mais conhecidos é o Stark).
No print acima, o plugin indica que a proporção é de 1.48:1, ou seja, muito baixa e sem acessibilidade. Os níveis AA e AAA — que são os níveis de acessibilidade da WCAG — estão com um X vermelho ao lado, indicando que essa proporção não cumpre os requisitos mínimos de contraste necessários para ser uma combinação considerada acessível.
Nesse outro print, conseguimos ver que a proporção é bem maior: 6.58:1. Isso indica que essa combinação entre texto cinza e fundo branco está apta para ser considerada acessível no nível AA em todos os tamanhos de texto e no nível AAA (mais acessível possível) se for utilizada em textos grandes.
O print acima é do site Who Can Use, mostrando como o texto branco fica em cima do fundo amarelo que foi usado como exemplo nesse post. Você precisa apenas mudar o # (código da cor hexadecimal) dos campos "background" e "text" que estão do lado esquerdo da tela.
3. Contraste não textual
Da mesma forma que o contraste de texto e fundo precisa existir para dar leitura, também é necessário ter um contraste mínimo entre elementos visuais importantes na interface (como ícones) e o fundo. O site Who Can Use e o plugin Stark para o Figma podem ser usados nesse caso também.
Além dessas diretrizes, também existem sites/plugins no Figma que simulam diferentes tipos de daltonismo — dessa forma, você consegue ver na sua tela como diferentes tipos de visão enxergam a interface que você está criando. Os já mencionados site Who Can Use e plugin Stark fazem isso, mas existe também o plugin para Figma chamado Color Blind.
Como saber mais sobre o tema?
O que expliquei nesse artigo é apenas uma parte muito superficial de um tema complexo e com muitas nuances, então recomendo o consumo de mais fontes de conhecimento sobre o assunto. Vou deixar aqui alguns links importantes que ajudaram minha pesquisa:
- Guia super completo com muitas informações e links sobre o tema: https://psdesignaberto.notion.site/Guia-de-Acessibilidade-f82f074291a44b27afb9b4d9f38aca8e
- Vídeo clássico explicando a importância da acessibilidade: https://www.youtube.com/watch?v=hFI4CuxQjSA
- Guia WCAG com diretrizes e boas práticas de acessibilidade para produtos digitais: https://guia-wcag.com/
- Princípios para Design Inclusivo: https://uxdesign.blog.br/conhe%C3%A7a-os-7-princ%C3%ADpios-do-design-inclusivo-266fd380c931
- Blog do Guia de Rodas: https://guiaderodas.com/ideiaboaparatodos/
Vamos trocar uma ideia sobre acessibilidade? Se você quer conversar mais sobre o tema, pode me mandar mensagem no LinkedIn. 💬
