UX na perspectiva daltônica
Por que devo ter a preocupação em adaptar o design da minha interface para este tipo de usuário?
É muito comum eu trabalhar nos projetos em que estou envolvido escutando música, e tem uma banda que eu escuto muito e ela se chama movements, estes dias dando início a um novo projeto em que fiquei responsável pelo desenvolvimento do UI, eu estava com o refrão de uma música deles cujo o nome é justamente “colorblind” (daltônico) e com o refrão “Cause you were gold but I’m color blind”, me veio o seguinte questionamento, “Faz diferença eu criar uma interface de ouro se o usuário que vai recebe-la é daltônico?”. Tendo isso em mente me veio uma enorme preocupação, como tornar o design acessível a este tipo de usuário sem comprometer a estética já definida no branding do produto?
Por que devo ter a preocupação em adaptar o design da minha interface para este tipo de usuário?
O primeiro ponto que temos que entender é que acessibilidade não é caridade e que você não está sendo bondoso em se preocupar em atender as pequenas parcelas do público, isso é sua obrigação!. No Brasil desde 2015 foi sancionada a Lei Brasileira de Inclusão (LBI — Lei 13.146/15) que exige:
“Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.”
Sabemos que ainda não existe uma fiscalização rigorosa a respeito do tema, porém cedo ou tarde seremos cobrados por isso.
Outro ponto muito importante a se levar em consideração no caso do daltonismo, são os números apresentados, estima-se que 8% da população masculina tenha essa condição genética enquanto as mulheres 0,5%. Eu vejo esses 8% como um número bem considerável ainda mais caso o produto tenha o público masculino como alvo, um deslize na escolha de cores pode frustrar muito a experiencia de uso dessas pessoas.
Entendendo o problema antes de tentar resolver
Esta condição genética que dificulta a percepção das cores se divide em 4 grupos de daltonismo, sendo eles Deuteranopia, Tritanopia, Protanopia e Monocromia.
Cada um desses tipos tem dificuldade em distinguir as cores de alguma forma diferente, como este post é focado em resolver problemas de design, não entrarei a fundo na explicação sobre o que é e como ocorre a percepção da cor em cada tipo de daltonismo, o importante aqui é saber que existem esses tipo de dificuldade na percepção das cores e os problemas que isso pode gerar na experiência do nosso usuário.
1. Veja a interface como um daltônico
Quando estiver pensando no UI, o ideal é que você já comece a enxergar o problema do mesmo modo que o seu usuário vê, e para isso existem ferramentas para nos auxiliar com isso.
- Uma ferramenta que uso muito é o Spectrum, uma extensão do chrome que possibilita navegar e ir testando e validando o visual do que estamos desenvolvendo.
2. Uma segunda ferramenta que uso é um plugin no adobe xd chamado Stark, ele me possibilita ir validando a escolha das cores que estou aplicando na minha UI enquanto estou desenvolvendo o layout. Além de simular os tipos de daltonismo ele tem um contrast checker que valida o nível de contraste entre duas cores.
3. Os softwares da adobe já contam com recursos para melhorar a acessibilidade a um bom tempo, porém muitos ainda não conhecem ou não usam, para acessar no adobe photoshop você precisar ir no menu view > Proof setup > Color blindness — Protanopia-type ou Deuteranopia-type.
4. Um outro recurso facilitador é o Color safe, um site que possibilita você testar o contraste e a legibilidade da cor de background com a cor da fonte e checar se o tamanho da fonte e família tipográfica estão tendo boa legibilidade.
5. E por ultimo um recurso online que muitos já devem ter ouvido falar, o Contrast ratio, que compara as taxas de contraste entre duas cores para assim você poder escolher cores que se contrastam melhor e assim poder facilitar o uso do nosso site ou aplicação para os usuários com problemas de visão.
2. Principais combinações de cores à serem evitadas
É difícil montar uma paleta de cores para o style guide do nosso projeto, ainda mais quando muitas vezes as cores do projeto já vem predefinidas no manual da marca que vamos trabalhar, e muitos são os casos onde iremos receber uma marca que tem como cores primarias e secundarias que usadas em conjunto podem ter um resultado não muito acessível, mas é nossa responsabilidade como designers criar uma interface o mais acessível possível e ao mesmo tempo sem ferir a estética e os princípios da marca.
Mas de qualquer modo que seja a tomada de decisão para a escolha da paleta temos que tomar cuidado com a sobreposição de cores como verde claro / amarelo, marrom/verde, azul/roxo, vermelho/verde e azul/verde e suas variações.
3. Evite cores como forma de sinalização
Esse é um tema que já foi abordado algumas vezes em outros posts e ainda assim é muito negligenciado, pensando na dificuldade que que o daltônico tem em diferenciar as cores verde e vermelho e em alguns casos o amarelo como foi apresentado no tópico acima, imagine como um daltônico enxerga um semáforo, imagine que por associação e memorização ele decorou que a luz de cima é o vermelho, a do meio é o amarelo e a de baixo verde, agora imagine que essa pessoa com daltonismo viajou para outra cidade e nesta cidade a luzes ficam uma ao lado da outra em vez de uma acima da outra. Você consegue imaginar o tamanho do problema? o tamanho da confusão que isso pode gerar? em nossas interfaces não podemos continuar cometendo erros como o deste tipo.
como visto nos exemplos acima, evite usar apenas a cor para sinalizar algo, sempre utilize a cor acompanhada de ícones e labels para deixar a mensagem que você deseja transmitir mais acessível.
4. Contraste na medida certa
Usar sobreposições de cores análogas dá um efeito muito elegante principalmente em ilustrações, porém é uma combinação quase sempre muito inacessível aos usuários com problemas de visão. O ideal é trabalharmos com um mínimo de contraste 4.5. Mas por favor não entada isso como um “use o maior contraste possível”, Pois o forte contraste pode atrapalhar a interpretação de pessoas com dislexia e acabaríamos arruinando a experiencia de um outro grupo de pessoas, pretendo escrever um outro post abordando o desenvolvimento de projetos acessíveis a este tipo de público antes do fim deste ano, pois exige um grande cuidado em criar interfaces para essa parcela da população.
Conclusão
O bom senso deve falar mais alto em suas tomadas de decisões, devemos preservar a estética definida no branding e sermos acessíveis. Quanto maior o contraste melhor será sua acessibilidade no caso dos daltônicos porém alto contraste implica na acessibilidade de outros grupos, fique sempre atento aos mínimos detalhes, pois um parágrafo, um link com uma cor diferente sobreposta a um fundo com cores que juntas não formam um bom contraste pode trazer algum tipo de frustração ao usuário. O que queremos é levar a melhor experiencia possível para o maior número de pessoas possível e para isso não basta só olhar com cuidado para todos os detalhes, devemos olhar com cuidado para todos os detalhes com diferentes tipos de ponto de vista e em diferentes cenários.
Literatura de referência
That’s all folks!
Quer trocar uma ideia a respeito do post e mandar algum feedback?
