Techniques for WCAG 2.0

On this page:

-

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

## Applicability

All technologies

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 Web author's CSS and HTML color schemes. This includes IE, all versions of Firefox, Mozilla, 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.

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

## 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 criteria, 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, "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 (CSS) " 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 Internet Explorer 7 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.

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

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

- Top
- Contents
- Intro
- Previous: Technique G155
- Next: Technique G157