This document appears to be a set of slides about designing for colorblind accessibility. It discusses what color blindness is, how to choose accessible colors by considering hue, saturation, brightness and contrast. It recommends working in greyscale, naming colors correctly, and providing legends for data visualizations. The document also lists several good tools and resources for evaluating color accessibility, including color blindness simulators and tools for checking color contrast ratios.

1. Julio Potier
@boiteaweb
boiteaweb.fr
http://wp-rocket.me
WordCamp Europe 2014 - Sofia - #WCEU

2. Colour and accessibility
" How to Design for Colorblind People "

3. What can you read?

4. What can you read?
15 ?
17 ?
74 ?
21 ?

5. What is color blindness?

6. What is color blindness?

7. What is color blindness?

8. Choose the right color
4 things:
Hue
Saturation
Brightness
Contrast

9. Choose the right color
Hue
Saturation
Brightness

10. Choose the right color
Contrast
a little bit more complicated ...
Low contrast Best contrast

11. Choose the right color
Contrast can also
be achieved by
choosing
complementary
colours.
(except red & green)

12. Work in greyscale

13. Work in greyscale

14. Universal Colors
Sorry, i lied ...
http://optional.is/required/2011/06/20/accessible-color-swatches/

15. Name your Colors
?

16. Name (correctly) your Colors
?

17. Name (correctly) your Colors
?

18. Name your Colors

19. Legends and Data

20. Legends and Data

21. Legends and Data

22. Legends and Data

23. Legends and Data

24. Legends and Data

25. Legends and Data

26. Legends and Data

27. Alternatives
Gaming
Status icons etc

28. Alternatives
Gaming
Status icons etc

29. Good Tools and Ressources
http://boiteaweb.fr/colour-and-accessibility-slides-8429.html : These slides!
https://speakerdeck.com/laurakalbag/designing-for-accessibility-1 : Thx to @LauraKalbag, my inspiration
http://leaverou.github.io/contrast-ratio/ : Check your color for a good/better contrast!
http://colororacle.org/ : Color Oracle is a free color blindness simulator for Window, Mac and Linux.
http://wave.webaim.org/ : WAVE can help you evaluate the accessibility of your web content.
http://www.ryobi-sol.co.jp/visolve/en/ : A tool that transforms colors of the computer display.
http://daltonien.free.fr/daltonien/article.php3?id_article=6 (fr) : Ishihara tests
http://www.daltonize.org/2010/05/chrome-daltonize-color-accessibility-in_13.html : Chrome AddOn
http://www.vischeck.com/daltonize/runDaltonize.php : Upload you photos to simulate colorblind
https://www.dropbox.com/s/vcz5rcnium79ivd/color_blind.pdf?dl=0 : A free PDF on colorblindness
More tools on http://www.color-blindness.com/2008/12/23/15-tools-color-blindness/

30. Thank you
Julio Potier
@boiteaweb
boiteaweb.fr
http://wp-rocket.me