Test & Audit

Visual Contrast of Text

Provide sufficient contrast between foreground text and its background.

Method 1 - User Defaults

Content does not specify text characteristics or background color, and is not relying upon technology that changes those defaults from an end-user’s prefered settings.

Content uses default user agent (e.g., browser) text characteristics and background color and does not rely upon technology (e.g., CSS) that changes those defaults.

Method 2 - Relative Contrast Lookup

Procedure

  1. Using source code inspection or an “eye dropper” type tool, obtain representaive sRGB values for the the forground text and the background color.
  2. Calculate the relative lumance of the text (Rt) and background (Rb).
  3. Calculate the relative contrast using the luminance computed in the previous step of the text (Rt) and background (Rb).
  4. Compare this calculated value against lookup table.
  5. Check that the relative contrast ratio meets or excedes the required value.

Expected Results

Glossary

relative luminance

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white

Note:

For the sRGB colorspace, the relative luminance (L) of a color is defined as L = 0.2126 * R + 0.7156 * G + 0.0722 * B where R, G and B are defined as:

and RsRGB, GsRGB, and BsRGB are defined as:

The “^” character is the exponentiation operator.

relative contrast

The perceived relative visual contrast (P) between a foreground color and a background color expressed as a percentange is definded as:

where

Note:

Relative contrast ranges from 0 to ???? and 25% is the point of invisibility (i.e., no perceptable contrast) for many people.

The “^” character is the exponentiation operator.