Never Depend on Color Alone
If you present information using only color, a person who cannot distinguish color will not have access to that information.
The Section 508 standard concerning this problem states:
Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
Color is useful in conveying important information. But when you use only color, by saying for example, "Please click the green button," you are excluding those people in your audience who cannot decipher color alone. Instead, you should put text (e.g., "OK") on the button and say, "Please click the green OK button."
An article on how color blindness affects vision included this example. Imagine that you were faced with this image and the instructions that follow it:
Click the Green button to continue,
the Yellow button if you need help,
or the Red button if you want to quit.
Looks easy, right? But what if you instead saw one of the following:
These are actual examples of how various forms of color blindness affect vision.
Here is an example of a fairly common mistake; an actual customer survey form modified from one on a major commercial site that indicates required fields in red.
The form is easily modified to be accessible by adding a second indication of a required field. In this case, asterisks are used.
Also see: http://www.taxslayer.com/.
When we requested permission to use the screen shot, TaxSlayer.com made a simple change so that the information is conveyed both in color and with text.
When color is used to convey important information, also use context and markup to convey the same information. For example, "Books that are available appear in green and in bold font."
- Revised 508 standards (under consideration) will require "presentation of text (and images of text) in electronic documents must have a default contrast ratio of at least 5:1, except if the text is pure decoration. Large-scale text (or images of large-scale text) can allow a contrast ratio of at least 3:1
- Choose highly contrasting colors for foreground and background