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.
7. image taken from Parsons Color Lesson (https://gist.github.com/auremoser/4479f13e7bdde9058a30/5e78e4ca91861e167af1b0813c23d678f089abce) on June 29 2, 2017
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
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
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
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
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
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.
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
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
54.
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
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
65.
66.
67.
68.
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
70.
71.
72.
73.
74.
75.
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
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
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
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
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