1. Dave Cooksey
@saturdave
DesignBrew Philadelphia
Thursday, June 29, 2017
UX and
Color Blindness

2. Yours truly in Oklahoma City circa Christmas 1972

3. image taken from the “Ishihara Test” article on Wikipedia (https://en.wikipedia.org/wiki/Ishihara_test) on June 24, 2017

4. image taken from the ENFO website (http://enfo.agt.bme.hu/drupal/en/node/2781) on May 10, 2017

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper
justo sed ultricies iaculis. Sed in placerat nisi, luctus molestie sem.
Donec ante mi, vestibulum nec congue ac, luctus id ex. Cras sed tellus
eget leo eleifend faucibus quis sed massa.
• Curabitur pharetra tortor vitae erat bibendum dignissim.
• Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Aliquam vestibulum felis vitae sodales dapibus. Duis placerat, enim
scelerisque pretium venenatis, sem nisl finibus magna.
Original Comp

6. Simulation :: What I Saw

7. My Suggestion #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper
justo sed ultricies iaculis. Sed in placerat nisi, luctus molestie sem.
Donec ante mi, vestibulum nec congue ac, luctus id ex. Cras sed tellus
eget leo eleifend faucibus quis sed massa.
• Curabitur pharetra tortor vitae erat bibendum dignissim.
• Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Aliquam vestibulum felis vitae sodales dapibus. Duis placerat, enim
scelerisque pretium venenatis, sem nisl finibus magna.

8. My Suggestion #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper
justo sed ultricies iaculis. Sed in placerat nisi, luctus molestie sem.
Donec ante mi, vestibulum nec congue ac, luctus id ex. Cras sed tellus
eget leo eleifend faucibus quis sed massa.
• Curabitur pharetra tortor vitae erat bibendum dignissim.
• Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Aliquam vestibulum felis vitae sodales dapibus. Duis placerat, enim
scelerisque pretium venenatis, sem nisl finibus magna.

9. Color is more
than branding.

10. Color Blindness
Color Vision
Deficiency
aka

11. Color Vision Deficiency
is a decreased ability to see
color or differences in color.

12. 8% of men and
0.5% of women
statistics taken from Color Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/) on June 28, 2017

13. 1 in 12 men and
1 in 200 women
statistics taken from Color Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/) on June 28, 2017

14. In USA 12 million men
and 785,000 women

15. Commonly inherited condition
Acquired through injury or disease
Most likely in males & those of European descent
No cure for inherited versions
Technology can assist
Color Vision Deficiency

16. Educational activities
Buying fruit, picking out clothes, reading traffic lights
May be ineligible for certain professions
Impact on Daily Life
not including achromatopsia
*Not considered a disability*

17. 40% leave school not
knowing they are
color vision deficient
statistics taken from Color Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/) on June 28, 2017

18. EYE
cornea
pupil
lens optic nerve
rods
cones
light
BRAIN

19. RETINA
cones rods
fovea
Rods
Grayscale
Low-light (scotopic) vision
Cones
Color & fine detail
Short, medium, and long
Blue, green, and red

20. Trichromancy = “normal” vision, has 3 cones
Anomalous Trichromancy = reduced function in 1 cone
Dichromancy = missing 1 cone
Monochromancy = missing 2 cones
Achromatopsia = missing all 3 cones
Types of Color Vision
based on number of cone types

21. Protanopia = absence of red cones
Protanomaly = weakened red cones
Deuteranopia = absence of green cones
Deuteranomaly = weakness of green cones
Tritanopia = absence of blue cones
* red-green color deficiency
Types of Dichromancy
{*

22. By the Numbers
Protanopia
Protanomaly
Deuteranopia
Deuteranomaly
Tritanopia
statistics taken from “Color Blindness” article on Wikipedia (https://en.wikipedia.org/wiki/Color_blindness) on June 27, 2017
1% of men
1% of men | 0.01% of women
1% of men
6% of men | 0.4% of women
<1% of men and women

23. “Normal” Color Vision
image taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017

24. Protanopia
images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017

25. Deuteranopia
images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017

26. images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017
Tritanopia

27. Tritanopia
“Normal” Vision
Protanopia
Deuteranopia
{red-green
color
deficiency

28. Designing for
Color Blindness

29. READABILITY
Reading text
easily
good color
contrast
MEANING
Understanding
meaning
color
differentiation

30. image taken “How to Analyze Data: 6 Useful Ways To Use Color In Graphs” blogpost (https://www.r-bloggers.com/how-to-analyze-data-6-useful-ways-to-use-color-in-graphs/) on June 29, 2017
Hue Saturation Brightness

31. image taken “Picking Colors” by Jeff Hilnbrand on Medium (https://medium.com/hh-design/picking-colors-part-1-techniques-4d67b314781d) on June 28, 2017

32. image taken “Picking Colors” by Jeff Hilnbrand on Medium (https://medium.com/hh-design/picking-colors-part-1-techniques-4d67b314781d) on June 28, 2017

33. Foreground color
Background color
(could be pattern or photograph)
Font size and font weight also contribute
1. Readability
Color Contrast is determined by…

34. Good contrast
Good contrast
Not so good contrast
Not so good contrast
Not so good contrast
Not so good contrast
Good contrast
Good contrast

35. Guideline 1.4 Distinguishable: Make it easier for
users to see and hear content including separating
foreground from background.
Minimum ratio recommended (Level AA) = 4.5:1
Enhanced ratio (Level AAA) = 7:1
Web Content Accessibility
Guidelines (WCAG) 2.0

36. image taken from the Contrast Ratio website (http://leaverou.github.io/contrast-ratio/) on June 29, 2017

37. image taken from the Color Contrast Check website (https://snook.ca/technical/colour_contrast/colour.html) on June 29, 2017

38. image taken from the Color Safe website (http://colorsafe.co) on June 29, 2017

39. Decreasing ability to focus on near tasks
Changing color perception (lens yellowing)
Decreasing contrast sensitivity (pupil shrinkage)
Significant vision loss affecting everyday life is
estimated to affect 16% of people 65 - 74 and
46% of those 85+ years
Aging & Vision Decline
taken from the the "Web Accessibility for Older Users" from the W3C (https://www.w3.org/WAI/presentations/ageing/) on June 8, 2017

40. USA & Canada 16.9%
Europe 19.3%
Japan 28.5%
By 2035, USA & Canada 21.7%
An Aging Population
by 2020, Percentage of Population 65+
taken from the United Nations’ 2015 Revision of World Population Prospects (https://esa.un.org/unpd/wpp/) on June 8, 2017

41. Priority
Hierarchy
Differentiation
Action
Identity
Emotion
2. Conveying Meaning w/ Color

42. Display information in multiple
ways, not just through color.
Redundant Coding
aka Secondary Coding

43. Hyperlinks - Use font weight / style along with
color
Forms - Use labels and not just color to indicate
required / optional fields
Swatches - Use labels not just color squares
Negative Numbers - Use ‘-’ or ‘( )’ + red text
Redundant Coding
Examples

44. Charts & Graphs
from Ito & Okabe
taken from the “Color Universal Design (CUD)” website (http://jfly.iam.u-tokyo.ac.jp/color/) on June 1, 2017
Okay Better

45. Charts & Graphs
from Ito & Okabe
taken from the “Color Universal Design (CUD)” website (http://jfly.iam.u-tokyo.ac.jp/color/) on June 1, 2017
Use vivid colors
Avoid using red and green together
Use thick lines
Redundant coding
Labels not legends
Minimize colors by leveraging shapes and textures

46. Vischeck
Daltonize
corrects images for color-blind viewers
Color Oracle
Photoshop & Illustrator (View —> Proof Setup)
protanopia & deuteranopia only
Use a Color Visualizer
to simulate what color-blind users will see

47. images taken from the Vischeck website (http://www.vischeck.com/daltonize/) on May 2, 2017
“normal” vision red-green color deficiency

48. Select colors that have high contrast / work in grayscale
Run palette through a visualizer for CVD and check that
each color is distinguishable for all three types
For brightness, start with 2 extremes, black & white
then pick shades in between
Finally, check your palette with folks who are color-blind
Creating Color Palettes
from Brian Suda

49. Color-blind Safe Palettes
downloadable from Brian Suda
taken from “Accessible Color Swatches” post (http://optional.is/required/2011/06/20/accessible-color-swatches/) on June 26, 2017
“normal” vision
protanopia
deuteranopia
tritanopia
grayscale

50. Color Universal Design (CUD)
from Ito & Okabe
taken from the “Color Universal Design (CUD)” website (http://jfly.iam.u-tokyo.ac.jp/color/) on June 1, 2017

51. taken from the Color Brewer 2.0 website (http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3) on June 26, 2017
Maps
color picker resource
by Dr. Cynthia Brewer

52. 1. Start by addressing red & green
UX & Color Blindness Tips

53. 1. Start by addressing red & green
2. Check designs in grayscale
UX & Color Blindness Tips

56. 1. Start by addressing red & green
2. Check designs in grayscale
3. Allow users customize colors
UX & Color Blindness Tips

57. Color Customization

58. 1. Start by addressing red & green
2. Check designs in grayscale
3. Allow users customize colors
4. Test with real users
UX & Color Blindness Tips

59. photo taken the Alchetron website (http://alchetron.com/Edwin-H-Land-1359356-W) on July 15, 2016
It’s not that we
need new ideas,
but we need to
stop having old
ideas.
“
— Edwin H. Land

60. This presentation can be found at
slideshare.net/saturdave
Thank you.

61. Tools :: Color Contrast
Contrast Ratio from Lea Verou
http://leaverou.github.io/contrast-ratio/
Colour Contrast Check from Jonathan Snook
https://snook.ca/technical/colour_contrast/colour.html
Color Safe
http://colorsafe.co
Color Brewer 2.0 from Dr. Cynthia Brewer
http://colorbrewer2.org

62. Color-blind Safe Color Swatches from Brian Suda
http://optional.is/required/wp-content/uploads/2011/06/(optional.is)-
Color-Blind-Safe.aco
Color Universal Design (CUD) from Ito & Okabe
http://jfly.iam.u-tokyo.ac.jp/color/
Tools :: Color Palettes

63. Color Oracle from Bernie Jenny (Mac OSX, Windows, Linux)
http://colororacle.org
Photoshop & Illustrator from Adobe (protanopia & deuteranopia)
select from menu: View —> Proof Setup
Vischeck from Stanford University
http://www.vischeck.com
Daltonize from Stanford University (corrects images)
http://www.vischeck.com/daltonize/
Tools :: Simulators

64. Colors with Good Contrast
https://www.w3.org/WAI/perspectives/contrast.html
Contrast (Minium): Understanding SC 1.4.3
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-
contrast-contrast
WCAG 2.0 Resources

65. Color Accessibility Workflows by Geri Coady
from A Book Apart
https://abookapart.com/products/color-accessibility-workflows
Books :: Color Accessibility