Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX & Color Blindness

1,589 views

Published on

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.

Published in: Design
  • Be the first to comment

UX & Color Blindness

  1. 1. Dave Cooksey @saturdave DesignBrew Philadelphia Thursday, June 29, 2017 UX and Color Blindness
  2. 2. Yours truly in Oklahoma City circa Christmas 1972
  3. 3. image taken from the “Ishihara Test” article on Wikipedia (https://en.wikipedia.org/wiki/Ishihara_test) on June 24, 2017
  4. 4. image taken from the ENFO website (http://enfo.agt.bme.hu/drupal/en/node/2781) on May 10, 2017
  5. 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. 6. Simulation :: What I Saw
  7. 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. 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. 9. Color is more than branding.
  10. 10. Color Blindness Color Vision Deficiency aka
  11. 11. Color Vision Deficiency is a decreased ability to see color or differences in color.
  12. 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. 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. 14. In USA 12 million men and 785,000 women
  15. 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. 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. 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. 18. EYE cornea pupil lens optic nerve rods cones light BRAIN
  19. 19. RETINA cones rods fovea Rods Grayscale Low-light (scotopic) vision Cones Color & fine detail Short, medium, and long Blue, green, and red
  20. 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. 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. 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. 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. 24. Protanopia images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017
  25. 25. Deuteranopia images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017
  26. 26. images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017 Tritanopia
  27. 27. Tritanopia “Normal” Vision Protanopia Deuteranopia {red-green color deficiency
  28. 28. Designing for Color Blindness
  29. 29. READABILITY Reading text easily good color contrast MEANING Understanding meaning color differentiation
  30. 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. 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. 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. 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. 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. 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. 36. image taken from the Contrast Ratio website (http://leaverou.github.io/contrast-ratio/) on June 29, 2017
  37. 37. image taken from the Color Contrast Check website (https://snook.ca/technical/colour_contrast/colour.html) on June 29, 2017
  38. 38. image taken from the Color Safe website (http://colorsafe.co) on June 29, 2017
  39. 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. 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. 41. Priority Hierarchy Differentiation Action Identity Emotion 2. Conveying Meaning w/ Color
  42. 42. Display information in multiple ways, not just through color. Redundant Coding aka Secondary Coding
  43. 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. 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. 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. 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. 47. images taken from the Vischeck website (http://www.vischeck.com/daltonize/) on May 2, 2017 “normal” vision red-green color deficiency
  48. 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. 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. 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. 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. 52. 1. Start by addressing red & green UX & Color Blindness Tips
  53. 53. 1. Start by addressing red & green 2. Check designs in grayscale UX & Color Blindness Tips
  54. 54. 1. Start by addressing red & green 2. Check designs in grayscale 3. Allow users customize colors UX & Color Blindness Tips
  55. 55. Color Customization
  56. 56. 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
  57. 57. 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
  58. 58. This presentation can be found at slideshare.net/saturdave Thank you.
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. Color Accessibility Workflows by Geri Coady from A Book Apart https://abookapart.com/products/color-accessibility-workflows Books :: Color Accessibility

×