G175: Providing a multi color selection tool on the page for foreground and background colors

The objective of this technique is to include a control on a Web page or set of Web pages that allows users to specify preferred foreground and background colors for the content. This technique can be implemented using any technology that allows users to store preferences that can be used across pages. Using this technique, an author includes a color picker control on the site which allows users to select and save foreground and background color preferences for use on other pages in a site. Pages are designed to look for these preferences and adapt accordingly when saved settings are found.

Many users with cognitive disabilities have trouble with standard black text on a white background. Sometimes, they can read the text a lot better using different colors for the text and background and sometimes these color combinations are very specific and not what would be expected by someone else (for instance brown on blue).

Some of these users will have difficulty setting colors using the browser's color settings or the operating systems color settings. Providing a tool on the web page that provides a wide range of foreground and background colors will allow them to easily change the colors without digging into the browser settings.

Resources are for information purposes only, no endorsement implied.

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

• 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
• C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors

Procedure

1. Check that there is a control on the page that is identified as a color selection tool.

2. Check that the color selection tool provides a variety of colors choices for the text and background.

3. Select new colors for the text and background using the tool.

4. Check that the content is updated to use the selected color combinations.

Expected Results

• Checks #1 and #4 are true.