UX & Color Blindness
3 likes3,516 views
The document discusses the impact of color blindness on individuals, highlighting that approximately 8% of men and 0.5% of women are affected by this condition, which affects daily life and specific professions. It emphasizes the importance of designing for color blindness in user experience, including strategies for enhancing readability and using color to convey meaning effectively. Various types of color vision deficiencies are outlined along with recommendations for creating visually accessible content.
UX & Color Blindness
- 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.
- 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
- 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
- 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
- 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