Web Accessibility Testing

Use of Color

Definition

Sufficient color contrast means that for text content, all foreground/background color combinations provide sufficient contrast for low-vision users or users with color blindness.

Reliance on color means that all elements must be visually identifiable by properties other than color, including shapes, patterns, and text.

Why is this an accessibility issue?

Some people are unable to distinguish between colors at certain parts of the color spectrum.  If content doesn't have sufficient contrast, it can be difficult or impossible for the user to tell the foreground from the background, rendering the content illegible.

Also, if elements are identified or referenced only by color, some users may not be able to effectively interact with those elements. In addition to color, elements should have other distinguishing properties, such as shape, pattern, and text.

Testing Methodology

Color Contrast

  • Document background/foreground color combinations in the application;
  • Using a color contrast tool, evaluate the color combinations for compliance, OR
  • Calculate color contrast using ratios defined by WCAG 2.0

Reliance on Color

Visually determine whether any elements require a color reference for identification (e.g., "Please click the red button"; "Select the green checkbox")

Tools

Conformance

A website or application meets color contrast accessibility criteria if:

  • All background and foreground color combinations contrast at a 4.5:1 ratio for 14 point text or smaller;
  • All background and foreground color combinations contrast at a 3:1 ratio for text larger than 14 points
  • All elements are described and identifiable by properties other than color, such as shape, pattern, and text.
  • No other accessibility barriers result from the site or application's implementation of color.