Web Accessibility

Use of Color: Make Your Web Pages Color Sensitive

Checkpoint 2.1 [Priority 1] Ensure that all information conveyed with color is also available without color, for example from context or markup.

According to most statistics, color blindness is a problem for 8 to 12% of males of European origin and about half a percent of females. Color blindness is most commonly a lack of distinction between the colors red and green. It is not generally a lack of seeing all colors. If you're using colors to make distinctions, you should be aware that red and green can be hard for a person with color deficiencies to tell apart. Red text in particular is often seen as a brown hue. If you're curious to see how colorblind or color deficient people view the world, check out the How do things look to colorblind people site.

Tips:

• Keep your backgrounds simple. White or light colors usually work best. Your background should not compete with the content of the page for the users attention. Select text colors which will contrast well with the background color or picture.
• To make your web page more accessible, ensure that information is not conveyed through color alone. For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links, icons, etc.).
• Desaturate your images to see if they still have impact. Desaturating the images removes all the color from the image. While this is not how most color blind people see the images, it will give you a quick and easy way to tell if the image is still useful. Maps are particularly difficult, as the red lines for "freeways" might look identical to the green lines for "dirt roads".
• Try to avoid placing red and green together. Especially on items like navigation buttons, the text can actually blend into the background, making it very hard to read.

Example of a page using poor color choices:

In this example, the background color is too dark and the text is too light to provide a sufficient contrast. Using a much lighter background color with a much darket text color will render the page more readable.

Quicktest! To test whether your document still works without colors, examine it with a monochrome monitor or browser colors turned off. Also, try setting up a color scheme in your browser that only uses black, white, and the four browser-safe greys and see how your page holds up.

Quicktest! To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are too small or indistinct to hold up well.