Creating Accessible Images
Color and Contrast

Color

The accessibility rule is to ensure that you do not use color alone to convey meaning. This phrase is a bit nebulous to some people. What does it mean to convey meaning with color alone? Let's take a look at this map of the London Underground:

A person who can see colors will have no trouble distinguishing between the red line, the dark blue line, the light blue line, and so on. A person who cannot see color well, due to color-blindness or low vision, will probably not be able to distinguish the different routes as easily. Someone who is blind will not be able to see them at all. Let's take the colors away from this image:

How would you know which line to take to get to Waterloo? Before we go too far, you should know that individuals who are color-blind can see colors (with the exception of a few rare cases), so the above grayscale drawing is not representative of color-blindness. It is merely an example of an image in which color is being used to convey meaning. When the colors are removed, the different routes are almost impossible to distinguish.

Let's take a look at an example of how to circumvent this potential problem. The WebAIM Training CD site uses colored tabs to denote the categories of links in the top navigation.

If a lighter color had been chosen for the background of the resources tabs, the text would be difficult to read.

The method that we used on the WebAIM Training site to avoid confusion was to put a bracket over the categories, and give the bracket a title. The brackets organize the tabs according to workshops and resources. Even when there is no color at all on this page, the meaning of the colors is still accessible.

Test your web pages to ensure that none of the meaning is lost when you remove the colors. You can do this by printing out the page on a black and white printer, making sure that your printing preferences are set to print background colors. You can also do as we did on this page, by taking a screenshot of the page and then removing all color within a graphics program such as Corel PhotoPaint or Adobe PhotoShop. To do this in Windows, open up the page that you wish to check, then hit the print screen button (often labeled as Prnt Scrn ). Then open a new file in your graphics program and use the paste command (Ctrl + V). Finally, change the image into a grayscale image.

Contrast

Take another look at the black and white version of the training site.

Aside from the fact that this is just a screen shot of the page in which the text is considerably smaller and a bit blurrier than on the actual page, you'll notice that all of the text is easily distinguishable from the background colors around it. Where there is a light background, there is dark text. Where there is a dark background, there is light text. People with low vision will not have difficulty distinguishing between the different contrast levels of the text and backgrounds.

If I had chosen a lighter color for the background of the resources tabs, the text would be difficult to read.

Just be careful when you choose background colors that they will not decrease the contrast level to the point of making text unreadable.