SlideShare a Scribd company logo
1 of 39
Download to read offline
Daltonismo no
Desenvolvimento Web
O que é o daltonismo, problemas mais frequentes
encontrados e como resolvê-los
Lucas Silva
CALMA JOVEM!
Os slides estão
disponibilizados em
bit.ly/daltonismo-abcdev e
no meu twitter após a talk
Quem sou eu?
● Front-End;
● Designer;
● Músico;
● Ex-criador de memes;
● Cozinheiro;
● Lavador de louça;
● e 1001 outras utilidades.
@lucas_dejsilva
Daltonismo
(Discromatopsia)
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
Hora de aventura: Fome de vermelho, ep 38, 5ª
temporada.
Daltonismo
“O daltonismo (também chamado de
discromatopsia ou discromopsia) é
uma perturbação da percepção visual
caracterizada pela incapacidade de
diferenciar todas ou algumas cores,
manifestando-se muitas vezes pela
dificuldade em distinguir o verde do
vermelho.”
Daltonismo no desenvolvimento web - ABC Dev 2017
Diretriz 1.4: Distinguível, da WCAG
“1.4.1 Utilização da Cor: A cor não é
utilizada como o único meio visual de
transmitir informações, indicar uma
ação, pedir uma resposta ou distinguir
um elemento visual.”
Problemas mais
frequentes
1- CAPTCHA
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
CAPTCHA
Completely Automated Public Turing test to tell Computers and Humans Apart.
Teste de Turing público completamente automatizado para distinguir entre
computadores e pessoas.
CAPTCHA
Visão Normal Visão com Protanopia
CAPTCHA
● A quantidade de spam que você está recebendo realmente vale perder
conversões?
● Se a resposta for sim, o seu CAPTCHA é amigável para todos os usuários,
inclusive para aqueles que são deficientes visuais?
● CAPTCHAs são para robôs, não para seres humanos. Infelizmente, tudo o que
uma pessoa pode codificar para tentar evitar os robôs de entrarem em um site
é algo que o outro pode encontrar um caminho. A verdadeira consideração é:
estamos apenas empurrando o problema com spam para os nossos clientes?
ReCAPTCHA
www.google.com/recaptcha
2- Seletor de Cor
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
Seletor de Cor
Seletor de Cor
Seletor de cor do Microsoft Word
Seletor de Cor
Seletor de cor do Google Docs
Seletor de Cor
www.jqueryrain.com/demo/jquery-color-picker
3- Gráficos
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
Gráficos
Visão Normal Visão com Protanopia
Gráficos
Gráficos do Google Analytics em 2012.
Gráficos
Gráficos do Google Analytics em 2016.
Gráficos
Gráficos do Google Forms em 2016.
Gráficos
Gráficos no Visual Website Optimizer antes de 2012.
Gráficos
Gráficos no Visual Website Optimizer em de 2012.
4- Tabelas
Comparativas
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
Tabelas Comparativas
Tabela em uma matéria do uol.com.br
Tabelas Comparativas
Comparativo de celulares no tudoparacelular.com
5- Games
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
Games
Telas do jogo Wordfeud.
Games
Telas do jogo Trainyard
Games
Telas do jogo Trainyard
Ferramentas para
teste
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste
NoCoffe Vision Simulator
Extensão para o Google Chrome
Color Safe
http://colorsafe.co/
Color Safe
http://leaverou.github.io/contrast-ratio
Photoshop
Photoshop CC 2015
Obrigado!
!
bit.ly/daltonismo-abcdev
github.com/lucasjs
twitter.com/lucas_dejsilva

More Related Content

Daltonismo no desenvolvimento web - ABC Dev 2017