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

Description

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.

Examples

Example 1

The user may type hex values into the text fields. The "pick" link will open a color selection tool for the adjoining field.

The color selection tool opened for selecting a color.

Here is a working example of this technique implemented using PHP, Javascript, CSS and HTML: Color Picker Example.

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

Tests