Skip to main content

Using color for enhancement

Lotus Notes checkpoint 4.2

Use color as an enhancement, not as the only way to convey information or indicate an action.

Rationale

Techniques

Testing

 

Rationale

If an application or Web page conveys information by color alone, users who cannot identify or distinguish colors will not be able to make use of the information. For example, asking users to click the red button is not useful if they can't distinguish the red button from other buttons on the screen. The application needs to provide another way of making the information available.

An image with insufficient foreground and background color contrast may also cause problems for some users. An image containing light text on a dark background or dark text on a light background would provide good contrast. Users have no control over the color or contrast of images that contain text.

Note: This checkpoint for color does not apply to links changing color after activation. Users can adjust the colors for their links in their browsers. This checkpoint also does not apply to using color to show where a user is on a navigation bar or within a Web site. Color used as redundant information is acceptable and encouraged.

Back to top

Development techniques

Use one or more of the following techniques to meet Checkpoint 4.2 from the Lotus Notes Accessibility Checklist:

  • In addition to using color, provide a brief text description. In the example below, the list item displayed in red indicates a racer who made the Olympic team. This item is also displayed in bold text as a redundant cue to the red color. Even though there is an additional cue besides the color, a screen reader would not provide this information to the user.

    These are the results of the race. Racers listed in red also made the Olympic team.

    • John Doe
    • Jack Sprat
    • Billy Bob

    One method of correcting this example is to add explanatory text to each item as follows:

    These are the results of the race. The second place finisher, highlighted in red, also qualified for the Olympic team.

    • First Place: John Doe
    • Second Place: Jack Sprat
    • Third Place: Billy Bob
  • It is not sufficient to use attributes such as bold or italic in addition to color. While these attributes may provide additional information to users who cannot identify or distinguish colors, the attributes do not provide sufficient information for someone using a screen reader. Include a character such as an asterisk in addition to color. For example, in Lotus Notes, unread documents are displayed in the color red and with an asterisk.

Screen shot from Lotus Notes Mail showing red line and asterisk for unread mail, and black with no asterisk for read mail

Recommended techniques

The techniques above are required; the following techniques are recommended to enhance accessibility:

Do not use graphics files as a background for a form. While this may add to the visual appeal of the form for some users, the background may make it difficult or impossible for some users with visual impairments to read the data on the form. Many users need high contrast between the background and foreground objects in order to read the documents. To enable users to turn off patterned backgrounds:

  • Open the Form Properties box and select the Form Background tab.
  • Under Options, select the option "Allow users to change these properties".

If an image contains text, use either light text on a dark background or dark text on a light background to provide good contrast. For example, the first image on the left uses good contrast, light text on a dark background, while the second image on the right uses poor contrast, medium blue text on a slightly darker blue background.

good contrast example - white text on black backgroundbad contrast example - blue text on a dark blue background

There are many free resources that provide information about effective color contrast including:

Back to top


Testing techniques

Test the application to ensure that it complies with accessibility requirements.

Tools

No tools are required to test this checkpoint.

Techniques

The following techniques are required to verify this checkpoint:
  Action Result
1. Verify text and images with color using the following methods.

  • Carefully read each page and look for any text describing an object by its color. If any such references are made, verify that the text also identifies the object another way, so that it can be identified in the absence of color.
  • Visually inspect color text and images to ensure that there is no significant information conveyed solely by virtue of the color that would not also be clear in the absence of color.
  • Optional: Consider printing black and white copies of the pages that contain color text and images to make any errors more apparent during the test.
 Pass:

  • All information is still meaningful if color is removed. For example, instructions to press the red button to submit a form are accessible because the red button also includes the text label "Submit".
  • Images that contain text are readable.

Fail:
  • Color is the only indication of what to do on the screen. In the example below, the form uses only the color red to highlight all required entry fields. Required fields cannot be distinguished when the screen is printed in black and white.
    example using color to identify required fields
  • Images that contain text have poor contrast, so the text cannot be read.
2. This step applies only if the application uses the Web interface.
Test the Web application color images by turning off images in the browser. If the color of the image is significant to understanding the page, then the alternate text associated with the image should provide enough information to make the page usable. For example, if the page instructions say "press the red button", then the alternative text should say "red button".
Use the appropriate configuration dialogs for your Web browser to turn off images. Instructions for Microsoft Internet Explorer are listed below.
  1. In Internet Explorer, go to Tools - Internet Options - Advanced.
  2. Under Accessibility, select "Always expand alternative text for images."
  3. Under Multimedia, deselect "Show pictures."
 Pass:

  • Images with color have alternative text that conveys the meaning of the image (e.g., alternative text is "Red Button").

Fail:
  • Images with color do not have sufficient alternative text, so they are not discernible without color.

Back to top


©2001, 2008 IBM Corporation

Last updated February 08, 2008.

Previous

Checklist

Next