Making Colors Visible for All

  • Published on
    18-Dec-2014

  • View
    549

  • Download
    2

Embed Size (px)

DESCRIPTION

This chart is to raise awareness about designing for colorblind audience and provides some recommendations to increase the accessibility of design for colorblind users. Colorblindness is a decreased ability to see color or tell colors apart from one another. Approximately one in every twelve men and one in 200 women in the world are colorblind."

Transcript

  • 1. Making Colors Visible for ALL @MaryamAshoori Feb 2014
  • 2. RED
  • 3. Coca-Cola RED
  • 4. Different readings of the same color
  • 5. We perceive what we expect. Our perception is biased by our experience, the context, and our goals. In visual perception a color is almost never seen as it really is[] This fact makes color the most relative medium in art. Joseph Alberts, Interaction of Color, 1963
  • 6. Lets get back to our RED square
  • 7. 99% of all colorblind people are redgreen color blind "Red-green" color blindness is observed among one out of twelve Caucasian (8%), one in 20 Asian (5%), and one in 25 African (4%) males.* * http://jfly.iam.u-tokyo.ac.jp/color/
  • 8. Red-green color blind Non color blind Deuteranope (green cone cells defective)
  • 9. Why does that matter? 1 in 12 men (8%)* * NHS Choices 1 in 200 women (0.5%)
  • 10. Step 1: Test if you are color blind Take the online test: http://www.color-blindness.com/ishihara-38-plates-cvd-test/ What People With Regular Vision See *.Ishihara Test for Color Blindness What Red-Green Color Blind People See
  • 11. Step 2: Test if your computer is color blind Test for computer color accuracy http://goo.gl/lJi5bk Example: *.Ishihara Test for Color Blindness
  • 12. Step 3: Test your design for color accessibility Colorblind Simulator http://aspnetresources.com/tools/colorBlindness Colorblind Web Page Filter http://colorfilter.wickline.org/ Vischeck http://www.vischeck.com/vischeck/vischeckImage.php Accessibility Validation in Photoshop WAVE http://wave.webaim.org/ Sim Daltonism (for Mac) http://michelf.ca/projects/sim-daltonism/ Contrast-A: Accessible Color Combinations http://www.dasplankton.de/ContrastA/
  • 13. Print a copy of the screen in black and white to verify color is not the only way to identify or distinguish information. *. IBM Software Accessibility Checklist
  • 14. Step 4: Follow the color accessibility guidelines Web Content Accessibility Guidelines (WCAG) 2.0 Guideline 1.4 : http://www.w3.org/TR/WCAG20/#visual-audio-contrast Your companys Software Accessibility Checklist Color Universal Design Organization (CUDO) http://jfly.iam.u-tokyo.ac.jp/color/
  • 15. Make texts and objects as THICK or BIG possible. as
  • 16. Example: Choosing the wrong colors for a chart can make it literally unreadable for a colorblind user. 6 4 2 Series 1 Series 3 Add a little pattern or texture to different parts of a chart to make for easier visual differentiation. 6 4 0 2 0 Series 1 Series 3
  • 17. Example: When designing forms, avoid labeling required fields only with colored text
  • 18. Colorblind barrier-free color palette * http://jfly.iam.u-tokyo.ac.jp/color/
  • 19. Avoid using pure red Use vermilion or orange instead (255,0,0) (213,94,0) (230,159,0)
  • 20. Avoid using pure green Use Bluish Green instead (0,255,0) (0,158,115)
  • 21. Avoid combination of colors with low saturation or low brightness.
  • 22. Colorblind users can perceive brightness shifts Non colorblind Protanopia-type
  • 23. Avoid the situation where texts and objects are obscured with the background. Hi There! Non colorblind Deuturanopia-type
  • 24. Keep the number of colors to a minimum Use combinations of different symbols with a few, vivid colors rather than a single symbol with various colors.
  • 25. When color matters, include color names and show examples *. H&M
  • 26. Avoid using complicated color names *. Banana Republic
  • 27. What if the hover doesnt work? *. Gap.
  • 28. Avoid color-specific instructions Click the green button to purchase! Label your buttons clearly and reference them in the site copy by function, not color, to avoid confusion. Amazon.ca
  • 29. When color customization is supported, provide a variety of color selections capable of producing a range of contrast levels.
  • 30. Related resources from WCAG 2.0 guidelines : Lighthouse International: Effective Color Contrast Vischeck Internetworking: Designing for the Color-Challenged: A Challenge AWARE Color Laboratory Colorblind Web Page Filter Firelily Designs: Color Vision, Color Deficiency Wikipedia: Color Blindness Microsoft: Can Color-Blind Users See Your Site? BT Inclusive Communication: Choosing safe colours Causes of Color: How do people inherit colorblindness? How often?: Genetics How to make figures and presentations that are friendly to Colorblind people The Color Tutor application
  • 31. Making Colors Visible for ALL @MaryamAshoori Feb 2014