Techniques for WCAG 2.0

On this page:

-

# 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:

- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

## 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 Firefox and Netscape, 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.

## 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.

- BBC's Web page with instructions how to change the browser colors in most browsers

## Related Techniques

- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
- G175: Providing a multi color selection tool on the page for foreground and background colors
- C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors

## 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

- Checks #2 and #3 are true.

- Top
- Contents
- Intro
- Previous: Technique C22
- Next: Technique C24