Visual Contrast Method

Test & Audit

Visual Contrast of Text

Short description of guidanceProvide sufficient contrast between foreground text and its background.

Method 1

Content does not specify text or background color, and is not relying upon technology that changes those defaults.

See G148

Method 2

Procedure

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

Expected Results

#5 is true.

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:

R = RsRGB ^ 2.218
G = GsRGB ^ 2.218
B = BsRGB ^ 2.218

and RsRGB, GsRGB, and BsRGB are defined as:

RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255

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:

if Lf < Lb then P = ( Lf ^ 0.40 − Lb ^ 0.44 ) * 161.8
else P = ( Lb ^ 0.44 − Lf ^ 0.40 ) * 161.8

where

Lf is the relative luminance of the foreground color, and
Lb is the relative luminance of the background color.

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.