G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text | WAI | W3C Skip to content

Technique G156:Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text

About this Technique

This technique relates to:

This technique applies to all technologies.

Description

Some people with cognitive disabilities require specific color combinations of foreground text and background to help them successfully understand the contents of the Web page. Most popular browsers provide the option to change colors settings globally within the browser. In this case the colors selected by the user override the foreground and background colors specified by the Web author.

In order to meet this success criterion, the Web author would design the page so that it works with browsers that have these controls, and the author does not override these controls.

Note that overriding the foreground and background colors of all text on a page may hide visual clues to the grouping and organization of the Web page, making it much more difficult to understand and use. This technique may not be appropriate when background colors are used to delineate areas of the page. This technique may be appropriate for technologies and user agents that do not alter border colors when background colors are overridden. If background colors are used to delineate areas of the page, "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" may be used to permit the user to control the colors of the main text while retaining the visual structure of the Web page.

Examples

  • A Web page is designed using HTML and CSS to specify the foreground and background colors. The user sets their own colors in the browser and they can view the content with their chosen foreground and background colors.
  • A Web page is designed using HTML and CSS. There is a link on the page to instructions on how to set colors in various browsers.

Tests

Procedure

  1. Open the Web page in a browser that allows users to change colors of HTML content.
  2. Change the foreground and background colors in the browser settings so they are different than those specified in the content.
  3. Return to the page and check that the new specified foreground text and background colors in the browser override the colors specified in the content.

Expected Results

  • Check #3 is true.
Back to Top