Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Julio Potier 
@boiteaweb 
boiteaweb.fr 
http://wp-rocket.me 
WordCamp Europe 2014 - Sofia - #WCEU
Colour and accessibility 
" How to Design for Colorblind People "
What can you read?
What can you read? 
15 ? 
17 ? 
74 ? 
21 ?
What is color blindness?
What is color blindness?
What is color blindness?
Choose the right color 
4 things: 
Hue 
Saturation 
Brightness 
Contrast
Choose the right color 
Hue 
Saturation 
Brightness
Choose the right color 
Contrast 
a little bit more complicated ... 
Low contrast Best contrast
Choose the right color 
Contrast can also 
be achieved by 
choosing 
complementary 
colours. 
(except red & green)
Work in greyscale
Work in greyscale
Universal Colors 
Sorry, i lied ... 
http://optional.is/required/2011/06/20/accessible-color-swatches/
Name your Colors 
?
Name (correctly) your Colors 
?
Name (correctly) your Colors 
?
Name your Colors
Legends and Data
Legends and Data
Legends and Data
Legends and Data
Legends and Data
Legends and Data
Legends and Data
Legends and Data
Alternatives 
Gaming 
Status icons etc
Alternatives 
Gaming 
Status icons etc
Good Tools and Ressources 
http://boiteaweb.fr/colour-and-accessibility-slides-8429.html : These slides! 
https://speakerd...
Thank you 
Julio Potier 
@boiteaweb 
boiteaweb.fr 
http://wp-rocket.me
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Colours and Accessibility (a11y) - WordCamp Europe 2014 Sofia

Download to read offline

How to Design for Colorblind People
Thanks to WP-Rocket.me

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Colours and Accessibility (a11y) - WordCamp Europe 2014 Sofia

  1. 1. Julio Potier @boiteaweb boiteaweb.fr http://wp-rocket.me WordCamp Europe 2014 - Sofia - #WCEU
  2. 2. Colour and accessibility " How to Design for Colorblind People "
  3. 3. What can you read?
  4. 4. What can you read? 15 ? 17 ? 74 ? 21 ?
  5. 5. What is color blindness?
  6. 6. What is color blindness?
  7. 7. What is color blindness?
  8. 8. Choose the right color 4 things: Hue Saturation Brightness Contrast
  9. 9. Choose the right color Hue Saturation Brightness
  10. 10. Choose the right color Contrast a little bit more complicated ... Low contrast Best contrast
  11. 11. Choose the right color Contrast can also be achieved by choosing complementary colours. (except red & green)
  12. 12. Work in greyscale
  13. 13. Work in greyscale
  14. 14. Universal Colors Sorry, i lied ... http://optional.is/required/2011/06/20/accessible-color-swatches/
  15. 15. Name your Colors ?
  16. 16. Name (correctly) your Colors ?
  17. 17. Name (correctly) your Colors ?
  18. 18. Name your Colors
  19. 19. Legends and Data
  20. 20. Legends and Data
  21. 21. Legends and Data
  22. 22. Legends and Data
  23. 23. Legends and Data
  24. 24. Legends and Data
  25. 25. Legends and Data
  26. 26. Legends and Data
  27. 27. Alternatives Gaming Status icons etc
  28. 28. Alternatives Gaming Status icons etc
  29. 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. 30. Thank you Julio Potier @boiteaweb boiteaweb.fr http://wp-rocket.me
  • thierrypigot

    Sep. 28, 2014

How to Design for Colorblind People Thanks to WP-Rocket.me

Views

Total views

1,645

On Slideshare

0

From embeds

0

Number of embeds

586

Actions

Downloads

7

Shares

0

Comments

0

Likes

1

×