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, color vision deficiency can make aspects of everyday life difficult. Educational activities involving color can be challenging for color-blind children. And mundane tasks like buying fruit, picking out clothing, and reading traffic lights can be frustrating for adults who are color-blind. Given the increasing number of interactive digital displays in everyday life, the list of challenging experiences for color-blind people will continue to grow exponentially.
In this presentation we will explore the science of color vision and color blindness, and discuss how color matters to usability and accessibility. UX designers will walk away knowing how to make their designs better by keeping color blindness in mind.
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
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.
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
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
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
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
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
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
54.
55.
56. 1. Start by addressing red & green
2. Check designs in grayscale
3. Allow users customize colors
UX & Color Blindness Tips
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
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