colours and accessibility (a11y) - wordcamp europe 2014 sofia

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