colours and accessibility (a11y) - wordcamp europe 2014 sofia
DESCRIPTION
How to Design for Colorblind People Thanks to WP-Rocket.meTRANSCRIPT
Julio Potier
@boiteaweb
boiteaweb.fr
WordCamp Europe 2014 - Sofia - #WCEU
http://wp-rocket.me
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:
HueSaturationBrightnessContrast
Choose the right color
Hue
Saturation
Brightness
Choose the right color
Contrasta little bit more complicated ...
Low contrast Best contrast
Choose the right colorContrast can also be achieved by choosing complementary colours.
(except red & green)
Contrast can also be achieved by choosing complementary colours.
Work in greyscale
Work in greyscale
Universal ColorsSorry, 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 iconsetc
Alternatives
Gaming
Status iconsetc
Good Tools and Ressourceshttp://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/
Julio Potier
@boiteaweb
boiteaweb.fr
Thank you
http://wp-rocket.me