It’s estimated that between 8% and 12% of the world’s population has some form of color blindness, or color vision deficiency as it is more accurately known. While not considered a serious medical condition or a disability, color vision deficiency can make aspects of everyday life difficult. This talk discusses the science of color vision and covers 6 areas where designers can improve their designs for color vision deficient users.

1. Dave Cooksey
@saturdave
Accessibility and Color
Addressing Color Blindness
in the User Experience
PhillyCHI
October 29, 2018

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 John Wright on Flickr (https://www.flickr.com/photos/mtbjohn/) on June 26, 2017

5. Color theory class at
the Fleisher Institute, 2013

6. The Science of
Color Vision

7. image taken from Parsons Color Lesson (https://gist.github.com/auremoser/4479f13e7bdde9058a30/5e78e4ca91861e167af1b0813c23d678f089abce) on June 29 2, 2017

8. wavelength
differences
LIGHT
OBJECT
EYE
surface

9. EYE
pupil
lens
optic nerve
retina BRAIN
cornea
LIGHT

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

11. taken from the “Seeing Color” article on ASU’s Ask a Biologist website (https://askabiologist.asu.edu/rods-and-cones) on July 19, 2016

12. Color Blindness
decreased ability to see color
or differences in color
Color Vision Deficiency

13. Achromatopsia
3
grayscale
0 1 2
0 cones
Monochromancy
200 colors
1 cone
Dichromancy
40,000 colors
2 cones
Trichromancy
8,000,000 colors
3 cones

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

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

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

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

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

20. Tritanopia
“Normal” Vision
Protanopia Deuteranopia
Achromatopia

21. Prevalence
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
Protanopia
Protanomaly
Deuteranopia
Deuteranomaly
Tritanopia

22. 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

23. 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

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

25. Most commonly inherited condition
Acquired through injury or disease
Most likely in males & those of European descent
No cure — but technology helps manage
Color Vision Deficiency

26. taken from the LensMarket website (https://www.lensmarket.bg/en/x-chrom-74-for-color-blindness) on October 27, 2016

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

28. 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

29. V1
V3V2
V5 V6
V4
optic nerve
BRAIN
EYE

30. apprehension
EXPERIENCE
learning
memory
desire
V1
V3V2
V5 V6
V4
optic nerve
BRAIN
EYE

31. image taken from “The Dress” article from Wikipedia. https://en.wikipedia.org/wiki/The_dress) on May 25, 2017

32. image taken from “Is That Dress White and Gold or Blue and Black?” from The New York Times (https://www.nytimes.com/interactive/2015/02/28/science/white-or-blue-dress.html) on May 25, 2017.
The Dress in Shadow? The Dress in the Photo The Dress in Bright Light?

33. image taken from “The Science of Why No One Agrees on the Color of This Dress” from Wired (https://www.wired.com/2015/02/science-one-agrees-color-dress/) on May 25, 2017

34. EYE
cornea
pupil
lens
retina
fovea
rods
cones
optic nerve
V1
V2
V3
V4
V5
V6
BRAINLIGHT
OBJECT
wavelength
differences
chromatic axis
surface
EXPERIENCE
apprehension
learning
memory
desire

35. Color & Design

36. 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.
Design Comp Text

37. What I Saw

38. How About Bolded Links?
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.

39. Or Underlined Links?
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.

40. Color is more
than branding.

46. Color is
information.

47. Designing for
Color Vision
Deficiency

48. READABILITY
Scanning and
reading text
* color contrast *
MEANING
Understanding
information
* color difference *

49. 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

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

51. 1. Color Contrast
2. Redundant Coding
3. Simulations
4. Color Palettes
5. Data Visualization
6. Color Customization
Designing for Color Deficiency

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

53. Good contrast
Good contrast
Not so good contrast
Not so good contrast
Not so good contrast
Not so good contrast
Good contrast
Good contrast

55. 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

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

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

58. image taken from Contrast Grid from Eightshapes (http://contrast-grid.eightshapes.com/) on July 14, 2017

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

60. Web accessibility.
Essential for some.
Useful for all.gg🧐

61. 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

62. 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

63. aka Secondary Coding
2. Redundant Coding
Display information in multiple
ways and not just with color

64. Hyperlinks - Use font weight / style along with color
Forms - Use labels and not just color to indicate
required / optional fields
Error Messaging - Use icons / highlighting with color
Swatches - Use labels not just color squares
2. Redundant Coding
Examples

69. image taken from John Wright on Flickr (https://www.flickr.com/photos/mtbjohn/) on June 26, 2017
image taken from the Amazon website (https://www.amazon.com/Apple-Airport-Express-MB321LL-A/dp/B0015YJOK2) on June 24, 2017

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

77. Check your
designs in
grayscale.gg

82. 4. Color Palettes
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
downloadable from Brian Suda

83. 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

84. 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

85. taken from Palette by Micah Horvat (http://micahhorvat.com/palette/) on July 14, 2017

86. There is no
universally
accepted color
palette.gg😬

87. Communicating information with color
5. Data Visualization
Start in grayscale and add
color as ornamentation

88. 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

89. 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

90. 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

91. 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

92. 6. Color Customization

93. 6. Color Customization

94. 1. Color Contrast
2. Redundant Coding
3. Simulations
4. Color Palettes
5. Data Visualization
6. Color Customization
Designing for Color Deficiency

95. Always check
designs with
CVD users.gg😎

96. 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

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

98. 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
Contrast Grid from Eightshapes
http://contrast-grid.eightshapes.com/
Color Safe
http://colorsafe.co
Color Brewer 2.0 from Dr. Cynthia Brewer
http://colorbrewer2.org

99. 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

100. 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

101. 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

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