UX e Acessibilidade: A importância do contraste para a interface
O contraste é uma ferramenta poderosa que atrai nossa atenção e ajuda a nos mostrar as diferenças ou pontos relevantes de algo. Em interfaces, ele tem um papel importante que pode melhorar a experiência dos usuários e principalmente daqueles que possuem algum tipo de deficiência visual.
O uso da cor é um dos principais problemas de acessibilidade pois nem todas as pessoas percebem a cor da mesma maneira. Porém, existem também outros tipos de contrastes que devem ser pensados na hora de projetar uma interface e que podem facilitar para esse público ter uma experiência melhor com um produto.
Empatia e Inclusão
Quando falamos em desenvolver um produto, o foco principal durante o desenvolvimento dele são seus usuários, as pessoas que vão utilizar o sistema com mais frequência. Por esse motivo, fazemos pesquisas com essas pessoas para saber suas dificuldades e receios com relação a tarefa que vai ser executada utilizando o produto. Nessas pesquisas, procuramos entender as tarefas feitas por elas nos colocando em seus lugares e por isso que a empatia é tão importante.
Só no Brasil, existem mais de 6,5 milhões de pessoas com deficiência visual, sendo 582 mil cegas e 6 milhões com baixa visão, com base no Censo 2010 feito pelo Instituto Brasileiro de Geografia e Estatística (IBGE). Se considerarmos esse dado, uma porção dos usuários que podem vir a utilizar o seu produto pode ter algum tipo de deficiência visual. Por isso, é importante pensar nos componentes da interface e em sua experiência para esses usuários também.
Sempre que fazemos uma pesquisa sobre o publico alvo do produto que será desenvolvido, procuramos saber a idade e o perfil desse público, pois isso também é um fator importante considerando a acessibilidade. Por exemplo, existem algumas condições nas quais a visão pode ser danificada:
- Degeneração macular: Até 50% das pessoas são afetadas pela perda de visão relacionada à idade.
- Retinopatia diabética: Em pessoas com diabetes, o vazamento de vasos sanguíneos nos olhos pode prejudicar a visão e causar pontos cegos.
- Cataratas: A catarata nubla a lente do olho e diminui a acuidade visual.
- Retinite pigmentosa: Esta condição herdada gradualmente causa a perda de visão.
Existem também as doenças relacionadas as visão que são herdadas ou podem ser causadas por efeitos colaterais de medicações e/ou condições de baixa visão relacionadas à idade. São elas:
- Deuteranopia: Mais comum e implica uma sensibilidade reduzida à luz verde.
- Protanopia: Sensibilidade reduzida à luz vermelha.
- Tritanopia: Sensibilidade reduzida à luz azul, mas não muito comum.
- Achromatopsia: Impossibilita de ver as cores.
Todas essas condições reduzem a sensibilidade ao contraste e a capacidade de distinguir cores.
A Utilização de Cores para o Contraste
O tipo de contraste mais usado nas interfaces é a utilização de cores para criar estilos diferentes e marcantes. Já quando falamos em contraste para ressaltar informações importantes como notificações, textos ou gráficos usados ao longo da interface, é preciso lembrar que todos esses dados fornecidos através de um código de cores também devem ser visualizados e compreendidos sem o uso da cor.
Isso se aplica principalmente a atividades feitas na interface onde ela mostra para o usuário status de sucesso ou falha. Cerca de 8% das pessoas de sexo masculino e 0.5% do sexo feminino têm dificuldades em distinguir as cores e a maior parte tem dificuldades em ver as cores no espectro verde.
Em dashboards é ainda mais preocupante, pois muitas delas utilizam puramente o verde e vermelho para ilustrar os dados em seus gráficos. Isso acaba dificultando para pessoas que possuem Protanopia, por exemplo, entenderem a diferença entre os gráficos e as informações a serem transmitidas.
Para dados desse tipo, é necessário não utilizar somente a cor para transmitir a informação. Acompanhar sempre a cor de padrões, ícones ou legendas para que os dados mostrados possam ser percebidos mais facilmente pelos usuários. Por exemplo, se a informação a ser passada é referente aumento ou diminuição de um valor, seja em porcentagem ou não, adicione o ícone de “+” ou “-” para representar esse aumento ou queda.
Em gráficos, o uso de texturas também é uma forma de realçar o contraste entre os dados, deixando eles mais compreensíveis até mesmo para pessoas que não possuem deficiência visual.
Um bom exemplo de utilização de texturas são as tags da plataforma Trello. Por meio delas, é possível classificar as informações contidas nos cards por cores e além disso, a plataforma também disponibiliza tags com texturas para melhorar a acessibilidade.
Acrescentar esses detalhes pode ser uma ação simples, mas que faz grande diferença tanto para melhorar a acessibilidade quanto para auxiliar o usuário que está analisando rapidamente os dados.
O Contraste nos Textos
Você já deve ter se deparado com algum site onde os textos na tela eram meio difíceis de ler, e que pode até ter comprometido seu entendimento sobre o que esse texto queria passar através de suas palavras. O conteúdo que é transmitido ao usuário por meio da interface é muito importante, podendo guia-lo durante a descoberta de informações e proporcionar uma boa experiência.
Ao pensar nos textos que serão inseridos na interface, é necessário ter um cuidado maior com a cor do plano de fundo, a cor do texto e o tamanho da letra.
A cor usada nos textos deve fazer um contraste suficiente com a cor de fundo para garantir uma boa legibilidade. Um mau uso desse contraste entre as duas cores, pode tornar os textos ilegíveis para pessoas com algum tipo de deficiência visual e até mesmo para as que não possuem.
O W3C sugere que a relação de contraste entre o texto e seu plano de fundo deve ser de pelo menos 4.5 para 1. Quando a fonte tem pelo menos 24px ou 19px em negrito, esse mínimo cai para 3 para 1, que seria um valor de contraste ainda aceito para passar no teste de acessibilidade (AA).
Isso também se aplica à links, já que um link que não está visível também não está clicável. Pense que eles devem ser visivelmente acessíveis à todo o público para garantir que o usuário saiba como prosseguir com o fluxo da tarefa.
O tamanho da fonte de um texto influencia bastante na leitura, pois não só pessoas com problemas na visão podem ter dificuldades em ler textos se eles forem muito pequenos nas interfaces. Isso pode agravar até mesmo a visão de pessoas que não apresentam problemas, pelo fato de tentar forçar os olhos para entender o que está escrito.
Portanto, é preciso realizar testes para encontrar os tamanhos de fontes ideais para os tipos de textos da sua interface, fazendo com que o texto se torne mais legível. E sempre que possível, adicionar recursos que facilitem a leitura, como o zoom e o contraste para leituras noturnas.
Procure sempre pensar em como a interface que você está projetando pode ser usada por alguém com necessidades especiais, como por exemplo:
- Sem cores
- Com alto contraste ativado
- Sem som
- Com zoom ou tela maximizada
- Com um leitor de tela
- Utilizando controles de voz
Conclusão
Existem diretrizes que ajudam os designers a projetar interfaces para a população com necessidades especiais, garantindo um sistema acessível e com uma boa experiência também pensada para elas. Ao começar um projeto novo, pense na possibilidade de incluir pessoas com essas necessidades em suas pesquisas e durante o processo, pois você pode descobrir como entregar valor de uma maneira ainda mais inclusiva!
Ferramentas de Auxílio
Referências
Alguns links para saber mais sobre o assunto!
Se gostou do tema, compartilha o artigo com outras comunidades :) E se já teve alguma experiência relacionada a acessibilidade, comenta aqui!
