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.

Accessibility and Color: Addressing Color Blindness in the User Experience

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

Published in: Design
  • Is it possible to improve your memory? How can I improve my memory recall? more info... ➤➤ https://tinyurl.com/brainpill101
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Accessibility and Color: Addressing Color Blindness in the User Experience

  1. 1. Dave Cooksey @saturdave Accessibility and Color Addressing Color Blindness in the User Experience PhillyCHI October 29, 2018
  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 John Wright on Flickr (https://www.flickr.com/photos/mtbjohn/) on June 26, 2017
  5. 5. Color theory class at the Fleisher Institute, 2013
  6. 6. The Science of Color Vision
  7. 7. image taken from Parsons Color Lesson (https://gist.github.com/auremoser/4479f13e7bdde9058a30/5e78e4ca91861e167af1b0813c23d678f089abce) on June 29 2, 2017
  8. 8. wavelength differences LIGHT OBJECT EYE surface
  9. 9. EYE pupil lens optic nerve retina BRAIN cornea LIGHT
  10. 10. RETINA cones rods FOVEA Rods Grayscale Low-light (scotopic) vision Cones Color & fine detail Short, medium, and long Blue, green, and red
  11. 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. 12. Color Blindness decreased ability to see color or differences in color Color Vision Deficiency
  13. 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
  14. 14. 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
  15. 15. “Normal” Color Vision image taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017
  16. 16. Protanopia images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017
  17. 17. Deuteranopia images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017
  18. 18. images taken from Colour Blindness Awareness website (http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/) on May 2, 2017 Tritanopia
  19. 19. Tritanopia “Normal” Vision Protanopia Deuteranopia Achromatopia
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. In USA 12 million men and 785,000 women
  24. 24. 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
  25. 25. taken from the LensMarket website (https://www.lensmarket.bg/en/x-chrom-74-for-color-blindness) on October 27, 2016
  26. 26. 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 *
  27. 27. 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
  28. 28. V1 V3V2 V5 V6 V4 optic nerve BRAIN EYE
  29. 29. apprehension EXPERIENCE learning memory desire V1 V3V2 V5 V6 V4 optic nerve BRAIN EYE
  30. 30. image taken from “The Dress” article from Wikipedia. https://en.wikipedia.org/wiki/The_dress) on May 25, 2017
  31. 31. 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?
  32. 32. 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
  33. 33. 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
  34. 34. Color & Design
  35. 35. 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
  36. 36. What I Saw
  37. 37. 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.
  38. 38. 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.
  39. 39. Color is more than branding.
  40. 40. Color is information.
  41. 41. Designing for Color Vision Deficiency
  42. 42. READABILITY Scanning and reading text * color contrast * MEANING Understanding information * color difference *
  43. 43. 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
  44. 44. image taken “Picking Colors” by Jeff Hilnbrand on Medium (https://medium.com/hh-design/picking-colors-part-1-techniques-4d67b314781d) on June 28, 2017
  45. 45. 1. Color Contrast 2. Redundant Coding 3. Simulations 4. Color Palettes 5. Data Visualization 6. Color Customization Designing for Color Deficiency
  46. 46. Foreground color Background color
 (could be pattern or photograph)
 … also font size and weight 1. Color Contrast is determined by…
  47. 47. Good contrast Good contrast Not so good contrast Not so good contrast Not so good contrast Not so good contrast Good contrast Good contrast
  48. 48. 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
  49. 49. image taken from the Contrast Ratio website (http://leaverou.github.io/contrast-ratio/) on June 29, 2017
  50. 50. image taken from the Color Contrast Check website (https://snook.ca/technical/colour_contrast/colour.html) on June 29, 2017
  51. 51. image taken from Contrast Grid from Eightshapes (http://contrast-grid.eightshapes.com/) on July 14, 2017
  52. 52. image taken from the Color Safe website (http://colorsafe.co) on June 29, 2017
  53. 53. Web accessibility. Essential for some. Useful for all.gg🧐
  54. 54. 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
  55. 55. 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
  56. 56. aka Secondary Coding 2. Redundant Coding Display information in multiple ways and not just with color
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. Check your designs in grayscale.gg
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. taken from Palette by Micah Horvat (http://micahhorvat.com/palette/) on July 14, 2017
  65. 65. There is no universally accepted color palette.gg😬
  66. 66. Communicating information with color 5. Data Visualization Start in grayscale and add color as ornamentation
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 6. Color Customization
  72. 72. 6. Color Customization
  73. 73. 1. Color Contrast 2. Redundant Coding 3. Simulations 4. Color Palettes 5. Data Visualization 6. Color Customization Designing for Color Deficiency
  74. 74. Always check designs with CVD users.gg😎
  75. 75. 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
  76. 76. This presentation can be found at slideshare.net/saturdave Thank you.
  77. 77. 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
  78. 78. 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
  79. 79. 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
  80. 80. 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
  81. 81. Color Accessibility Workflows by Geri Coady from A Book Apart https://abookapart.com/products/color-accessibility-workflows Books :: Color Accessibility

×