Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content

Applicability

Pages that use CSS.

This technique relates to:

User Agent and Assistive Technology Support Notes

Most browsers allow the user to change the color settings to override the Web page's CSS and HTML color schemes. This is supported by all versions of Internet Explorer, Firefox, Mozilla, Netscape, and Opera after version 6.

When specified colors are overridden in Netscape and versions of Firefox before Firefox 3.0, most Javascript pop-up boxes and drop-down menus become unusable. Pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background.

Internet Explorer 6 will not override background colors unless the same background color has also been selected in the system settings.

There are no color settings in Safari so it is not possible to over-ride specified colors. Similarly where colors are not specified Safari displays the page in black text on a white background, ignoring any color preferences from within the system settings.

Description

Some Web pages use colors to identify different groupings. The objective of this technique is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use.

When an author does not specify the colors of the text and background of the main content, it is possible to change the colors of those regions in the browser without the need to override the colors with a user style sheet. Specifying the text and background colors of secondary content means that the browser will not override those colors.

With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets his needs and provides the best reading experience.

Examples

Example 1

An HTML Web page uses CSS to specify the text and background colors of all secondary content such as navigation bars, menu bars, and the table of contents. Neither the text color nor background of the main content is specified. The user sets their own color preferences in the browser so that they view the main content in colors and contrasts that work well for them. The distinction between the separate sections of the page are still visually obvious.

Example 2

A music magazine has an article that is blue text on a white background. The site provides a link near the beginning of the page which assigns a different style sheet to the page. The new style sheet does not have any colors specified for the text or background.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Change the text, link and background colors in the browser settings so they are different from the default color and different from those specified in the secondary content.

    Note: Do not select the option that tells the browser to ignore the colors specified in the page.

  2. Check that the main content uses the new text, link and background colors.

  3. Check that the colors of the text, links and backgrounds in the secondary content has not changed.

Expected Results

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.