Color: When color is used to convey information

Many people have some form of color vision deficiency. Color blind people typically lack certain color sensors in their retinas. This means that they cannot distinguish between certain colors depending on which sensors they lack.

Color is one of the main components in Web pages. Sometimes we use it to simply liven up the site a little, but it is sometimes used to convey meaning. It is good to use color, but the key is not to use color alone if you are conveying meaning.

This information is applicable to not only people with color deficiencies, but also to those who are completely blind. Screen readers are not able (at this point) to convey color information to the users; therefore, the use of color to convey information also affects the blind.

A quick trip to this Web site will give you a sense of how colorblind people experience the Web:

Visi-Check Colorblind Information

Example of how you might address a color issue on your site:

Let's say we are creating a questionnaire form that has three fields, two of which are required. In order to highlight the required fields, I decide to use red text for required and black for those that are not required. This may be a problem for some color deficient people. One way to avoid this problem is to use an asterisk * before a required field. This is beneficial for both color deficient users and blind users. Colorblind users will be able to see the asterisk, and blind users will hear the asterisk spoken before the required field. For example:

All required fields are marked in red with an asterisk:

Color Contrast

In addition to the concern of using colors alone to convey information, Web page designers need to be aware of the colors that they choose to create their pages. There needs to be enough contrast in the combination of foreground and background colors on the Web page so the users will be able to see all of the information presented. The easiest way to avoid this problem is to choose highly contrastive colors for the foreground and background. For example, don't use red text on a pink (or similar hue) background.

You can use the Visi-Check site to test your pages for contrast:

Visit the Visi-Check Site

Back to top

Navigate to other How To pages with the links below.