O documento discute o daltonismo no desenvolvimento web, apresentando os principais problemas enfrentados por pessoas daltônicas, como CAPTCHAs de cores, seletores de cores e gráficos de cores, além de ferramentas para testar a acessibilidade de cores.

1. Daltonismo no
Desenvolvimento Web
O que é o daltonismo, problemas mais frequentes
encontrados e como resolvê-los
Lucas Silva

2. CALMA JOVEM!
Os slides estão
disponibilizados em
bit.ly/daltonismo-abcdev e
no meu twitter após a talk

3. Quem sou eu?
● Front-End;
● Designer;
● Músico;
● Ex-criador de memes;
● Cozinheiro;
● Lavador de louça;
● e 1001 outras utilidades.
@lucas_dejsilva

4. Daltonismo
(Discromatopsia)
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

5. Hora de aventura: Fome de vermelho, ep 38, 5ª
temporada.

6. 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.”

8. 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.”

9. Problemas mais
frequentes

10. 1- CAPTCHA
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

11. 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.

12. CAPTCHA
Visão Normal Visão com Protanopia

13. 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?

14. ReCAPTCHA
www.google.com/recaptcha

15. 2- Seletor de Cor
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

16. Seletor de Cor

17. Seletor de Cor
Seletor de cor do Microsoft Word

18. Seletor de Cor
Seletor de cor do Google Docs

19. Seletor de Cor
www.jqueryrain.com/demo/jquery-color-picker

20. 3- Gráficos
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

21. Gráficos
Visão Normal Visão com Protanopia

22. Gráficos
Gráficos do Google Analytics em 2012.

23. Gráficos
Gráficos do Google Analytics em 2016.

24. Gráficos
Gráficos do Google Forms em 2016.

25. Gráficos
Gráficos no Visual Website Optimizer antes de 2012.

26. Gráficos
Gráficos no Visual Website Optimizer em de 2012.

27. 4- Tabelas
Comparativas
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

28. Tabelas Comparativas
Tabela em uma matéria do uol.com.br

29. Tabelas Comparativas
Comparativo de celulares no tudoparacelular.com

30. 5- Games
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

31. Games
Telas do jogo Wordfeud.

32. Games
Telas do jogo Trainyard

33. Games
Telas do jogo Trainyard

34. Ferramentas para
teste
Sobre CAPTCHA Seletor
de Cor
Gráficos Tabelas
Comparativas
Games Ferramentas
para teste

35. NoCoffe Vision Simulator
Extensão para o Google Chrome

36. Color Safe
http://colorsafe.co/

37. Color Safe
http://leaverou.github.io/contrast-ratio

38. Photoshop
Photoshop CC 2015

39. Obrigado!
!
bit.ly/daltonismo-abcdev
github.com/lucasjs
twitter.com/lucas_dejsilva