Meu primo é daltônico minha prima tem dificuldades motoras e eu dificulto a vida deles na web
Meu primo é daltônico e joga futebol muito bem, e minha priminha tem dificuldades motoras e é a pessoa mais feliz e engraçada que eu conheço. E eu acredito que eles não conseguem ver ou usar os sites, sistemas ou apps mobile que eu fiz de uma forma feliz. Isso foi o que me motivou a começar a estudar sobre acessibilidade. Assim que comecei a estudar cai no tema sobre daltonismo e este post vai ser sobre esse assunto.
Infelizmente não tenho tempo e nem dinheiro pra voltar em todos os projetos que eu fiz e realizar testes neles e pra identificar o que devo melhorar, pro projeto ser mais feliz para o meu primo e minha priminha. Por isso que resolvi estudar e aplicar em projetos que vou fazer e nos que eu estou desenvolvendo agora.
Tenho um projeto pessoal que estou fazendo junto com o designer, Fabinho. É um app mobile que tem como objetivo substituir os clássicos cartões de fidelidades impressos que têm em cafeterias espalhadas aqui em São Paulo, como uma cafeteria de moema:
Fabinho e eu criamos a proto-persona, levantamos as features, em seguida realizamos o crazy eight. Depois disso o Fabinho já partiu pro protótipo de alta fidelidade. Ele utilizou o Adobe Experience Design e as telas ficaram assim:
Agora que já temos um projeto pra estudar e praticar acessibilidade podemos voltar pro assunto principal do post que é daltonismo.
O que é Daltonismo?
É a dificuldade de diferenciar todas ou algumas cores. É mais comum os daltônicos terem dificuldade de diferenciar o verde e vermelho. As pessoas daltônicas têm essa dificuldade porque elas têm um ou mais cones que não estão legais. Cones são uma células que estão nas nossas retinas, e nós temos 3 cones. Eles trabalham com cores baseadas na luz. Quando leio ou ouço as palavras cores e luz em um mesma frase, eu me lembro do sistema de cores RGB.
De fato o RGB tem tudo a ver com o assunto. Ele é uma simplificação dos 3 cones e um sistema de cor baseado na luz. Criando uma relação entre o sistema RGB e como nossos cones trabalham, essa relação fica: R é a representação de verde-amarelo, G é verde de fato e o B é a representação de azul-violeta.
Existem muitos tipos de daltonismos, como: monocromata típico, monocromata atípico, protanopia, deuteranopia, tritanopia, protanomalia, deuteranomalia, deuteranomalia e tritanomalia. Se estiver afim de ver cada um deles, vale a pena dar uma olhada no wikipedia que tem um conteúdo bem completo que está em português.
Bom agora que já temos um ideia do que é daltonismo. Precisamos tirar isso aá teoria e aplicar no nosso dia a dia como UXers, Desginers ou Frontenders.
O que podemos fazer pra tornar a vida na web mais feliz pros Daltônicos?
Quando comecei a estudar sobre o assunto, achei que não poderia usar a cor verde e vermelha em meu projeto, o que seria bem triste porque eu gosto das duas cores e elas transmitem sentimentos interessantes. Além do que o vermelho é a cor predominante no logo do projeto que estou fazendo com o Fabinho. Mas, na verdade, podemos utilizar as cores verde e vermelha sobrepostas a outras cores, desde que haja contraste. Pra isso, vamos entender o que é contraste.
O que é contraste?
Temos várias teorias sobre o contraste, mas podemos dizer que contraste é a diferença entre duas cores, que sobrepostas facilitam a visualização.
A teoria que eu mais gostei foi a do professor Johannes Itten que lecionou em Bauhaus, onde ele não aplica regras fechadas como: a cor verde tem contraste com a cor azul.
Itten criou 7 tipos de contraste com a proposta de facilitar e torna a teoria mais praticável. Como o projeto de exemplo é um app mobile, todos os exemplos que vou utilizar pra explicar os 7 tipos de contraste, utilizaram o sistema de cor RGB pois o projeto vai rodar em dispositivos com tela.
1. Contraste de cores puras
Cores puras dentro do sistema RGB são exatamente as cores primárias vermelha, verde e azul. Essas cores sobrepostas tem um bom contraste. Mas, sobre a cor branca elas funcionam muito melhor.
2. Contraste claro-escuro
Esse tipo de contraste utiliza a luminosidade. No exemplo da obra de arte abaixo o artista utilizou a luz pra mostrar que o tecido preto está sobre o rosto da mulher.
3. Contraste quente-frio
No nosso exemplo de obra de arte, temos as cores laranja, vermelha e amarela que são as cores quentes e a azul como uma cor fria. Dessa forma o contraste deixa as cores quentes com mais destaque pro observador.
Mas temos cores que dependendo da cor de sobreposição, ela pode ser uma cor fria ou quente. Um bom exemplo é o roxo, quando aplicada junto com a cor verde se torna uma cor quente e se for aplicada a cor vermelha o observador vai sentir que o roxo é uma cor fria.
4. Contraste de cor complementar
As cores complementares juntas tem uma combinação agradável e harmônica para o observador. Pra entender um pouco melhor sobre as cores complementares precisamos dar uma olhada no círculo cromático de Itten e os 3 tipos de combinações com harmonia (Triângulos Isósceles, Harmonia com Quadrados ou Retângulos e Harmonia análoga):
Trabalhando com as cores de qualquer uma das combinações nos temos um contraste balanceado e com uma boa harmonia pro observador.
5. Contraste simultâneo
Esse contraste também tem relação com as cores complementares. Mas, o contraste simultâneo é um processo fisiológico, onde o nosso olho assim que absorve a cor procura a sua complementar e tenta reproduzi-la na sua ausência.
Sabe aquela fronha de travesseiro roxa com bolinhas azuis que você tem, que após alguns segundos olhando pra ela, se você resolver olhar pra outra parte do seu quarto e elas continuam à existir. Este é o comportamento que o nosso olho faz com cores complementares. :-)
6. Contraste de saturação
É um contraste entre cores saturadas e desaturadas. Quanto mais saturada uma cor, maior é a impressão que o objeto está se movendo. Também podemos considerar que quanto menos saturada uma cor estiver, significa que ela tem mais cinza ou é menos brilhante. Observe a foto abaixo:
Nesta foto as árvores na costa estão menos saturas e a onda está mais saturada, gerando o tipo de contraste que eu mais gosto. Também é bacana dar uma olhada na ponta da onda que está sobre o céu. Por ter um boa quantidade de brilho a ponta tem um bom destaque pro observador.
7. Contraste de quantidade/extensão
É a representação de duas cores e espaços que elas ocupam. De preferência a cor com menos brilho natural ocupa menos espaço na tela e a cor com mais briho ocupa mais espaço. Como na obra de arte abaixo:
Esses são os 7 tipos de contraste que Itten classificou.
Em muitos momentos nós vamos aplicar ao mesmo tempo um ou mais tipos de contrastes que acabamos de aprender.
Bom agora que sabemos o que é e quais são os tipos de contraste, cabe a pergunta: Como vamos testar se fizemos um bom trabalho nos nossos projetos?
Ferramentas pra testar se o seu projeto é bom pra galera Daltônica
Pra mim, a melhor forma de testar se o produto que criamos funciona bem pra daltônicos é procurar seu amigo daltônico, ou como no meu caso, o meu primo e fazer um teste de usabilidade com ele. Quando realizo os testes dessa forma, é mais rápido de identificar e definir as alterações necessárias pra deixar o site mais feliz pra daltônicos. Se você não conhecer ninguém que é daltônico, ou está sem tempo pra realizar um teste de usabildiade, vale a pena dar uma olhada nas ferramentas abaixo:
- Vischeck
- Sim Daltonism
- Color Enhancer
- Colorblind Web Page Filter
- Colorblinding
- Daltonizer
- Color Contrast Check
- Colour Blindness Simulator
- Color Oracle
Espero que o post te ajude a desenvolver seus projetos de uma forma mais feliz pra galera daltônica.
Deixe sua opinião sobre o post nos cometários, isso é muito importante pra eu melhorar nos próximos. Ah! Você conhece alguma ferramenta bacana pra fazer teste sobre daltonismo?
