Implementing Rule C
§ 1194.22 Web-based intranet and internet information and applications.
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
What Colors Are Used For
The most common usages of color to convey information are for:
Identifying Links
Links can sometimes be indistinguishable from the body text, if there is no change in:
- contrast: link text is noticeably darker or lighter than the body text when viewed in greyscale; or
- font style: link text is bold or italic, as opposed to normal-styled body text; or
- font size: link text is larger or smaller than the body text; or
- text decoration: link text is underlined or has a different background color from the body text.
Someone using a speech browser would hear the links; however, someone using a visual browser, but lacking the capability of distinguishing between the link colors and the body text colors, might be unable to notice the links, unless the mouse passed over them and caused a message to flash into the browser's status bar.
Examples of Good Link Presentation
Example: Link with more contrast than the body text: The Link. This usage does require some thinking: first the difference in text contrast needs to be associated with a link.
Example: Link using a different font style (bold) from the body text: The Link.
Example: Link using a different font size (larger) than the body text: The Link.
Example: Link using a different text style, in this case, underlining: The Link.
Example: Link with a different background color: The Link.
Highlighting Required Form Fields
Another common usage of color to convey information is the usage of colored text to indicate which form fields are required to be filled in. The most common color used is red. However, someone unable to distinguish red from grey or black text will be unable to notice that the fields are required. While the user would eventually find out this information after submitting the form, the purpose of indicating that the fields are required is to ensure that the user inputs the fields prior to submitting the form, to avoid having to deal with a constant stream of message boxes.
Example:
One way to get around this is to use a symbol, such as an asterisk, placed next to the field name, to indicate that the field is required. The asterisk can be colored or not (but should be visible).
Example:
Coloring Backgrounds
Whether the background is a table cell or a button, the user cannot be directed to select or view it based on color. Not all users will be able to distinguish between colors. Therefore, some other method of indicating that information needs to be used.
Backgrounds, in General
The usage of colored backgrounds, not just for emphasizing differences between elements, but for default coloring of the entire page, can result in readability problems if there is not adequate contrast. The headers and body text - which is information conveyed through color! - would not be distinguishable if the text and background colors do not contrast adequately with each other.
Example:
This is a block of text without adequate contrast.
The text in the above block read: "This is a block of text without adequate contrast".
Buttons
The button text itself - whether created as a form
<input> element, or embedded in a graphic, or presented as alternate
text for an image - should clearly indicate the usage of each button.
The user should not be directed to click a button based on seeing its color.
In addition, there should be adequate contrast between the text and the background.
Examples:
Colored buttons with no text and no alt text:
Colored buttons with both text and alt text:
Table Cells
Table cells that are colorized to mean something must also have something else to
indicate the meaning. An asterisk or other symbol - which are identified
somewhere in the table description - should be used to point out information.
Another possibility is to use the <em> or <strong>
tags. One should not use font styles to distinguish between cell contents, because
if styles are turned off, that information would not be available.
Example: Colorized table cells without other indicator
| ordinary item | very important item |
Example: Colorized table cells with other indicator
| ordinary item | * very important item |
Indicating Bullet Classes
I also discussed this topic in Implementing Rule A. Again, colors cannot be given to bullets to indicate different meanings for the bullets. If colors are used, all should be the same for the same list. If different colors for bullets in the same list are necessary, and those different colors convey meaning, then alternative text is needed to indicate the meaning of the color, such as by using an asterisk or other symbol at the start of the bulleted item's text. This symbol needs to be presented in the text of the bulleted item, not in the style.
Testing for Color Contrast
If you have a multi-colored image, convert it to greyscale and see if the image is still readable.
More information on color vision can be found in our Color Vision Resources section.
Skip links to other Section 508 Rules and return to main content