Don't Believe Your Eyes! How to Design for Colour Blindness

We often take colour for granted when choosing palettes for our designs, assuming the appearance will be the same for everyone.

In reality, the choices that look good to people with good colour vision could cause serious usability problems for people affected by various forms of colour-blindness; a type of disability that affects the perception of colour and occurs in a surprisingly large percentage of the population.

If you're a web designer, app designer, or game designer, this talk is for you! Geri will teach you how to create designs that are accessible to people with colour-blindness without sacrificing aesthetics.

Transcript

1. DON’t BELIEVE YOUR EYES! HOW TO DESIGN FOR COLOUR BLINDNESS
2. HELLO!
5. ACCESSIBILITY
7. ALMOST NEVER SEEN AS IT REALLY IS… IN VISUAL Perception, A COLOUR IS THIS FACT MAKES COLOUR THE MOST RELATIVE MEDIUM IN ART . JOSEF ALBERS
9. WHAT EXACTLY IS COLOUR BLINDNESS?
10. 8% OF MALES
11. HOW IT AFFECTS PEOPLE
12. “My design teacher, John Solowski, pointed it out to me in first year 
 at Ryerson.” RAY FENNELLY PHOTO BY STACEY CROUCHER http://flic.kr/p/6pFdwE
13. PHOTO BY STACEY CROUCHER http://flic.kr/p/6pFdwE
14. WHY BOTHER?
15. RESPECT.
17. VS
19. HOW DOES IT HAPPEN?
20. LENS RODS RETINA OPTIC NERVE (TO BRAIN) RODS CONES
21. 1,000,000 COLOURS
22. 10,000 COLOURS
23. WHAT DOES IT LOOK LIKE?
24. NORMAL
25. PROTANOPIA
26. DEUTERANOPIA
27. TRITANOPIA
28. THE BASICS
29. HUE SATURATION LIGHTNESS
30. HUE
31. SATURATION
32. LIGHTNESS
33. TINTS SHADES
34. CHOOSING COLOURS
35. CONTRAST
36. CONTRAST
37. TEXT TEXT TEXT TEXT LIGHT AND DARK CONTRAST POOR CONTRAST EFFECTIVE CONTRAST
38. COMPLEMENTARY CONTRAST TEXT TEXT
39. COOL AND WARM CONTRAST COOL WARM
40. COOL AND WARM CONTRAST TEXT TEXT TEXT TEXT COOL AND WARM CONTRAST WARM CONTRAST
41. CONTRAST OF SATURATION NOT SO EFFECTIVE TEXT TEXT
44. “UNIVERSAL” COLOURS?
45. Original 1 2 Simulation Protan Deutan Tritan 3 4 5 6 7 8
46. colorbrewer2.org
47. TIPS & TRICKS
48. COLOUR NAMES BE SURE TO INCLUDE
49. (CC) MICAH TAYLOR http://flic.kr/p/7QoR4h PURCHASING CLOTHING
56. PHOTO BY NATALIE DUBÉ http://on.be.net/1HudPvD
58. COLOUR: SIZE: XS S M L XL V-NECK TEE $28.99 ADD TO BAG Light Green
59. GRAPE SMOKE ? ? ? ? ? ? ? ? ?
61. DESIGNING INFOGRAPHICS
62. 0 100 200 300 400 2007 2008 2009 2010 Region 1 Region 2 Region 3 Region 4
63. 0 100 200 300 400 2007 2008 2009 2010 Region 1 Region 2 Region 3 Region 4
64. LONDON NEW YORK LONDON NEW YORK NORMAL DEUTERANOPIA
65. LONDON NEW YORK LONDON NEW YORK NORMAL DEUTERANOPIA
67. Data 1 Data 2 Data 3
68. NORMAL PROTANOPIA
70. phone Last name First name REQUIRED FIELDS ARE INDICATED IN RED
71. * phone Last name First name * REQUIRED FIELD
72. phone (REQUIRED)
77. COMPLIANCE
78. WEB CONTENT ACCESSIBILITY GUIDELINES A AA AAA
79. AA 4.5 : 1
80. AAA 7 : 1
82. CONTRAST RATIO ARE COLOURS COMPLIANT? This is example text. 
 Some of it bolded. Some of it italicized. 4.72 NO
83. CONTRAST RATIO ARE COLOURS COMPLIANT? This is example text. 
 Some of it bolded. Some of it italicized. 9.9 YES
84. leaverou.github.io/contrast-ratio
85. five.wave.webaim.org
88. PROVIDE ALTERNATIVES
89. NORMAL HIGH CONTRAST
90. REDEsIGNING SIMPLY REDEsIGNING SIMPLY ACCESSIBLE
91. CREATE A COLOUR GAME PLAN
93. DEVELOP COLOUR CONCEPTS
94. New palette
95. CONSIDER POTENTIAL COLOUR USAGE
97. RUN INITIAL TESTS
100. MAKE EDITS (if NEEDED)
102. IMPLEMENT COLOURS in style guide and prototype
105. RUN A FINAL CONTRAST CHECK
106. THE HUMAN TOUCH
109. NOT A “TREND”
110. “NOT POSSIBLE”
111. “I’m trying” is a damn sight better answer than “because I didn’t have to.” MAT MARQUIS
112. “AIM FOR THE STARS” DEREK FEATHERSTONE
113. ACCESSIBLE TO ALL
114. hellogeri.com @hellogeri
115. fivesimplesteps.com