Designing for Color Blindness and Color Universal Design (CUD)

illustration for colorblindess blogThis week’s post is part 2 in what will be an on going series on accessible design.

COLOR BLINDNESS

Individuals who are color blind have difficulties in distinguishing between combinations and or/pairs of colors.

“The most common broad category of color-blindness is often called red-green color-blindness, but this does not mean that these people cannot see reds or greens. They simply have a harder time differentiating between them. Not all reds and greens are indistinguishable. It would be easy for someone with a red-green deficiency to tell the difference between a light green and a dark red, for example. A lot depends—at least in part—on how dark the colors are. If the red is approximately as dark as the green, there is a greater likelihood that the colors will be confused.?” From WebAIM

Online images that can create problems for color blind individuals often have color combinations that they can not perceive. In addition, they may have problems with images that have low contrast.

When designing for accessibility make sure that the colors that are used are not the only method for conveying important information. For example, if you are designing a map that shows routes in specific colors make sure that you also annotate the routes to increase the accessibility of the relevant information.

COLOR UNIVERSAL DESIGN

I recently learned about Color Universal Design from the new Adobe CS5 help manual and quickly found some amazing resources online.  The new Adobe CS5 Photoshop and Illustrator provide tools to allow you to test for CUD-compliance.

Color Universal Design (CUD) is a user-oriented design system that  ensures that graphical information is conveyed accurately to people with various types of color vision, including people with color blindness. Several countries have guidelines that require CUD-compliant graphics in public spaces.

You can find out more about Color Universal Design below.

http://www.cudo.jp/e/

The core principles are excerpted from the Color Universal Design web page above:

Core Principles of COLOR UNIVERSAL DESIGN

  • Choose color schemes that can be easily identified by people with all types of color vision, in consideration with the actual lighting conditions and usage environment.
  • Use not only different colors but also a combination of different shapes, positions, line types and coloring patterns, to ensure that information is conveyed to all users including those who cannot distinguish differences in color.
  • Clearly state color names where users are expected to use color names in communication.
  • Moreover, aim for visually friendly and beautiful designs.

Color Universal Design Handbook can be downloaded here
www.eizo.com/global/products/flexscan/color…/handbook.pdf

Adobe CS5 Help page on Soft_Proof for Color Blindness in Photoshop and Illustrator
http://help.adobe.com/en_US/creativesuite/cs/using/WS151986BD-6D68-4880-9123-CC0D8B7033F5.html

Here are two additional color palette tools that you can download for a small fee.

ColorPOKI3 (Works only on Mac OSX)
http://www.classicteck.com/colorpoki.html

Printed color references ( A terrific page full of great resources)
http://www.visibone.com/colorblind/

More Additional Resources

WEBaim(web accessibility in mind) is a site I return to again and again as  a resource on accessibility.

http://webaim.org/articles/visual/colorblind

As Seen By The Color Blind

Great site on color theory. I’m now following them on twitter.

http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind

Color Theory for the Color-Blind

Interesting article of strategies for the color blind designer.

http://www.digital-web.com/articles/color_theory_for_the_colorblind/

The Wikipedia page on color blindness.

http://en.wikipedia.org/wiki/Color_blindness

AccessKeys: AccessColor: Online Tools for Color Contrast

Last but not least, Here is an online  tool that tests the color contrasts and color brightness between foreground and background elements.

Past the URL to be tested in at the bottom of the page.

http://www.accesskeys.org/tools/color-contrast.html

Thanks for your attention! Let me know if the tools are helpful.

Share