Color Tips

Colors can cause all manner of accessiblity problems for users with vision disabilities.

Here are some tips on how to use color in the design of your Web site:

Color Deficiencies

About 8% of men and 0.04% of women suffer from some form of color deficiency. So, if your Web site primarily attracts a male audience, it is very important that you design a Web site to ensure usability for the 8% of men that are color deficient.

The most common form of color deficiency is red-green, which is the inability to distinguish between red and green. The second most common form is blue-yellow. So avoid using color combinations that could cause problems for color deficient users.

The most severe form of color blindness is achromatopsia - the inability to see any color - and is often associated with other problems such as amblyopia (lazy eye), nystagmus, photosensitivity, and extremely poor vision.

Contrasting Colors

Color deficient users may have difficulties in perceiving certain color combinations. Don't assume that the color lightness you see will be the same as the lightness perceived by color deficient users.

It's recommended that you lighten your light colors and darken your dark colors to increase the visual accessibility of your Web site.

Test your Web pages with a monochrome monitor setting. If the elements of the page are clear, a color deficient user will probably be able to view your Web site effectively.

British Telecom's Transforming Images (Safe Web Colours for colour-deficient vision)" Web site illustrates how users with different color deficiencies have a hard time distinguishing certain color combinations.

Conveying Meaning with Colors

Make sure you don't use color alone to label content areas, convey meaning, or give directions to users. Color deficient users may have problems seeing the colors you're using to convey meaning with. So, I recommend that you always use text to assist color deficient users.

Color is, however, an important part of life for most people, so while you can use a variety of colors on your site, don't cluster sensitive colors (say, red and green) right next to each other, or demand that colors be used as one of the main navigational tools.

Always provide clear textual options... some people still have monochrome monitors!

Red-Green Colorblindness Test

The most common type of color deficiency is red-green.

The Vischeck color blindness simulator is a useful tool that enables you to view a copy of your Web page as it would appear to someone with red-green color deficiency.

Vischeck is a way of showing you what things look like to someone who is color blind. You can try Vischeck online - either run Vischeck on your own image files or run Vischeck on a Web page. You can also download programs to let you run it on your own computer.