Couleurs & Accessibilité — BlendWebMix 2017

Comment designer pour les daltoniens en 30 minutes.

1. Couleur & accessibilité
‘‘ Comment designer pour les daltoniens,
en 30 minutes ’’

J'adore ce fond bleu !
Julio Potier @ BlendWebMix 2017

2. Que lisez-vous ?
15 ?
17 ?
74 ?
21 ?

3. C'est quoi le daltonisme ?

4. C'est quoi le daltonisme ?

5. C'est quoi le daltonisme ?
Vision normale

6. C'est quoi le daltonisme ?
Vision tritanopique

7. Il n'y a pas de
mauvaise couleur,
Il n'y a que des
mauvaises utilisations.

— Julio Potier

8. Choisir la bonne couleur
4 choses :

Teinte
Saturation
Luminosité
Contraste

9. Choisir la bonne couleur
Teinte
Saturation
Luminosité

10. Choisir la bonne couleur
Contraste
Un peu plus compliqué ...
Contraste bas Contrast correct

11. Choisir la bonne couleur
Le bon contraste
peut être trouvé
en choisissant des
couleurs
complémentaires.
(sauf rouge & vert)
Le bon contraste
peut être trouvé
en choisissant des
couleurs
complémentaires.

12. Choisir la bonne couleur

13. Travaillez en niveaux de gris

14. Travaillez en niveaux de gris

15. Couleurs universelles
Désolé j'ai menti …
http://optional.is/required/2011/06/20/accessible-color-swatches/

16. Nommez vos couleurs
?

17. Nommez (bien) vos couleurs
?

18. Nommez (bien) vos couleurs

19. Légendes et données

20. Légendes et données

21. Légendes et données

22. Légendes et données

23. Légendes et données

24. Légendes et données

25. Alternatives
Jeux
Status icons
etc

26. Alternatives
Jeux
Status icons
etc

27. Julio Potier
Security Paranoid

@SecuPress - https://secupress.me
Merci

28. Outils et 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/