Technique 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 1.4.8: Visual Presentation (Sufficient).

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

Other sources

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.

    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.