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.


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.


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.

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


  • 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…/handbook.pdf

Adobe CS5 Help page on Soft_Proof for Color Blindness in Photoshop and Illustrator

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

ColorPOKI3 (Works only on Mac OSX)

Printed color references ( A terrific page full of great resources)

More Additional Resources

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

As Seen By The Color Blind

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

Color Theory for the Color-Blind

Interesting article of strategies for the color blind designer.

The Wikipedia page on 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.

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