Design acessível, Daltonismo e a cegueira das cores

Daltonismo é um distúrbio da visão que impede com que a pessoa consiga perceber a diferença entre algumas cores. É também conhecido como cegueira das cores e formalmente chamada de discromatopsia ou discromopsia. A forma de daltonismo mais comum é a dificuldade de distinguir entre o verde e o vermelho. É um distúrbio de origem genética mas que pode ser causado por lesões nos olhos ou até mesmo no cérebro. Este problema é muito mais comum em homens do que mulheres e estima-se que cerca de 8% de toda a população mundial de homens são daltônicos.

Imagem que mostra o teste de Ishihara onde pessoas com daltonismo vêem o número 21 ao invés do 74 Existem basicamente 3 variações de daltonismo, a deuteranopia, que é a dificuldade de enxergar cores verdes, a protanopia que é a dificuldade de enxergar cores vermelhas e a tritanopia (mais rara) que é a dificuldade de enxergar cores azuis. Um dos métodos para se diagnosticar se você é ou não daltônico é através do teste de Ishihara, como na imagem que eu coloquei para ilustrar este texto. Se você que enxerga, mas não conseguiu ver o número 74 na imagem, basicamente você é daltônico. Existem outros métodos mas este é o mais famosos deles. Curiosamente, a maioria dos daltônicos não sabe que possuem este distúrbio da visão.

WCAG – Assegure que texto e gráficos são compreensíveis se vistos sem cores

A diretriz de número 2.1 do WCAG diz,“assegure de que toda informação comunicada com cores também esteja disponível sem cores”. Na prática isso quer dizer que a cor não deve ser a única forma de identificar elementos com significado no site, como por exemplo links, menus, textos etc, ou seja, tudo aquilo que eu precise interagir de alguma maneira. Um exemplo disso são as mensagens de erro em formulários: “os campos destacados em vermelho não foram preenchidos ou precisam ser corrigidos. Preencha corretamente estes campos e clique em enviar novamente.” Se o contorno em vermelho de um campo de formulário é a única forma de comunicar que um campo foi preenchido incorretamente, significa então que o formulário não é suficientemente acessível para pessoas com daltonismo.

Mito do design vermelho

Um dos mitos que há em torno do daltonismo é a de que o designer não deve usar vermelho ou verde em nenhuma hipótese para compor uma interface, senão o site não será acessível. Bom, isto é um mito. A verdade é que não significa que a pessoa não enxerga nada no lugar da cor, o que significa é que ela não consegue distinguir cores em relação as outras. Em qualquer campo do design, o que não deve ser feito é limitar a identificação de elementos de interação exclusivamente a diferenças de tonalidades de cores. Todos os elementos de interação devem ter mais de uma forma de se distinguirem entre si que não seja exclusivamente por cores.

Links devem ter cara de links

O exemplo clássico mais aplicável na web sobre uso prudente de cores são os links textuais que colocamos nos textos. Para você entender melhor o que eu quero dizer, veja o exemplo abaixo de uma imagem com 3 estilos decorativos de links diferentes uns dos outros.

Imagem que mostra 3 estilos diferente de CSS aplicados ao um trecho de texto. De um lado é exibido estes estilos como visto por uma visão considerada como normal e do outro o mesmo trecho é exibido como visto por uma pessoa daltônica.

No exemplo da imagem acima, o terceiro estilo de link é praticamente indiferenciável do restante do texto. E o segundo estilo de link se parece apenas com um negrito e não com link. Ou seja, o estilo de texto sublinhado, a primeira opção, é a melhor forma de representar um link. A dica para estilizar links é que links devem ter cara de links. Sério. Em um menu por exemplo, que recebe um destaque diferenciado por causa do posicionamento, contornos etc, não necessariamente precisa ser sublinhado. Mas desde que todo o contexto deixe bem claro que trata-se de links de menu. Agora no meio do conteúdo propriamente dito, não há como fugir do sublinhado como forma simples de indicar a todos os usuários o que é um link e o que não é.

Ferramentas que podem ajudar você

Imagem do site Revolução Etc simulando a visão de uma pessoa com tritanopia Existem algumas ferramentas que você pode usar para testar seus sites para saber se eles são acessível a pessoas com daltonismo. E como qualquer ferramenta automatizada o que prevalece é o bom senso. Uma ferramenta muito conhecida para testar se seu site possuiu contraste suficiente para pessoas com daltonismo é o Vischeck.

Imagem do site Revolução Etc simulando a visão de uma pessoa com protanopia Entretanto eu costumo usar um programa chamado Color Oracle com versões que rodam tanto no Windows e Linux quanto Macs. Ele faz exatamente o que o Vischeck faz, você seleciona o tipo de distúrbio de visão e o Color Oracle altera as cores do seu monitor de acordo com as limitações de cores de deuteranopia, protanopia e tritanopia. Eu o acho mais eficiente porque você pode usar ele não somente em páginas web, mas também em desenhos vetoriais, Photoshop e qualquer coisa.

Imagem do site Revolução Etc simulando a visão de uma pessoa com deuteranopia O que você precisa observar na simulação feita pelo Color Oracle é se todos os textos e links são legíveis e possuem contraste suficiente para serem compreendidos. Só isso. Os 3 testes devem ser satisfatórios. Um outro exercício simples de ser feito é usar algum programa de edição de imagem e transformar seu site em preto e branco para verificar se os elementos possuem um bom contraste entre si. Isso não significa que seu site será acessível para daltônicos, até mesmo porque o contexto de preto e branco é ausência completa de cores (o que é de longe o caso do daltonismo), mas serve como exercício para verificar o contraste do seu site em 4 contextos diferentes.

  • Tiago Floriano

    eu vi um 21 na imagem!!! :O

  • http://www.salvadorcamino.com Salvador Camino

    Muito interessante. Vlw

  • Rafael Oliveira

    Boa a dica co Color Oracle, não o conhecia. É bastante útil para esse tipo de teste.

  • Pingback: Tiago Floriano Webdesigner » Design acessível e daltonismo…()

  • Anderson Kaminishi

    Oi, Post muito Interessante e Importante!

    Recomendo aos leitores visitar esta comunidade:

    http://www.designacessivel.net

  • Raphael

    21 na imagem.. mais eu já sabia que eu era daltônico.. Pior de tudo que eu sou designer.

  • Pingback: University Update - Linux - Design acessível, Daltonismo e a cegueira das cores()

  • Alexander Blagus

    É um asunto fascinate, eu não vi 74 nenhum (talvez um 21) e meus amigos me tiraram um barato por causa disso (ainda mais que anteontem fiz 29 anos).

    Enfim, quero compartilhar que, quando começo um novo layout, quase sempre o faço em escala de cinzas para só depois aplicar a cor. Nem faço isso só pelos daltônicos (dentre os quais eu me incluo), mas principalmente para saber se o contraste ficará bom. Já trabalhei com pessoas mais velhas que tinham muito mais dificuldades com contrastes tênues do que com cores.

    Carai, como poderei ser designer e daltônico ? O que eu faço, procuro outra profissão ??

  • Felippe

    Caramba, parabéns pelo post!

    Muito útil e importante, poucas pessoas lembram de pessoas com esses problemas.

    Forte abraço!

  • http://muitapimenta.blogspot.com TP

    Caramba eu sou daltonico O.o, também vi apenas o 21.

  • José Antonio

    Vale dizer que o Scribus, genérico do InDesign, mas open source (para Linux, Mac e Windows) tem o modo "preview daltônico" na paleta de cores. O designer verifica como um daltônico veria a cor.

  • Lua

    O nome correto do teste é Ishihara, mas o artigo está muito bom! Parabéns.

  • Hilder Santos

    Muito boa dica, Henrique! Obrigado!

    Ainda bem que lá no Pimenta está tudo ok com as cores… :) Ufa! :D

    Abraço!

  • thiago oliveira

    Cara que bom que eu nao estou sozinho… também vi o 21!

    ahUAuhHUAHU

    Abraços

    ps: tbm sou daltônico…

  • TP

    Pra quem quiser confirmar no link abaixo tem mais testes, não encherguei nada neles e minha mulher do lado via tudo.

    http://chost.sites.uol.com.br/Principal/teste_de_

  • http://www.erosmania.com.br/ Inside

    Ufa, eu vi o 74 =]

    []'s

  • Alessander Thomaz

    Eu vi o 74 forçando a amizade.

    Mas vejo mesmo o 24, com umas tonalidades rosadas que confunde o primeiro número, fico na dúvida se é um dois ou um 7. Mas perguntei para umas meninas do meu lado e viram isso também.

    Eu sou dautônico ou a imagem é assim mesmo?

    Abraços,

    Alessander

  • Alessander Thomaz

    Vi em outro pc, vi o 74 mais nitido.

    Era o monitor que eu estava vendo que estava ruim.

    Achei estranho pois já fiz esses testes antes, descobrir ser daltonico tão tarde seria estranho.

    Abraços,

    Alessander

  • Pingback: ctrlF5 » Blog Archive » Eu vejo uma web diferente de vocês?()

  • Pingback: Saiba como anda a acessibilidade visual de seu site()

  • Thiago

    Não souuu… haeueaheuehuea …

    Fácil de ver o 74

  • Pingback: Edição 18 - Acessibilidade()

  • Pingback: Google e os padrões web » Revolução Etc()

  • Pingback: Novas funcionalidades do Photoshop CS4 incluem opções de acessibilidade para daltônicos | Fotografar->Vender->Viajar()

  • Pingback: Como eu entrei no mundo do desenvolvimento para web! ≈ Revolução Etc()

  • yan

    Ufa, Sorte que eu não sou daltonico… Vi o 74 muito nitido na imagem, emfim, belo post e parabens :D

    Abraços

    yan

  • Sandro

    Eu vi o 21, mas tbm já sabia…

  • http://www.lucascavalcanti.com.br Lucas Cavalcanti

    Eu sou daltônico e o meu nível de daltonismo não foi colocado ai a cima, não sei se porque é raro ou você esqueceu. Entre esse deuteranopia, protanopia, tritanopia o meu é o combo deles hehehe.
    Sabes dizer se existe alguma outra, pois eu tenho não enxergo quase todas as cores. Só aquelas que as tonalidades são vivas e padrões como vermelho, verde,azul, amarelo, rosa. Também é bom lembrar que depende de tudo, quando a iluminação do lugar em mais baixa ou muito clara, confunde muito e chego a dizer diferentes nomes para a mesma cor. E também se estiver perto de outros objetos como tonalidades parecidas me confundem muito.