Color Contrast and Accessibility

Most accessibility questions need a person to judge them. Contrast is the exception: two colors go in, one number comes out, and the Web Content Accessibility Guidelines (WCAG) say which numbers are enough. The Contrast Checker does the arithmetic; this guide explains what it is measuring and why the thresholds sit where they do.

The four rules that involve color

WCAG 2.1 has four success criteria about color and contrast. Level A is the minimum, AA is what most policies ask for, and AAA is the strictest.

Both text criteria carry the same exceptions. Text in “an inactive user interface component”, text that is “pure decoration” or “not visible to anyone”, and text that is “part of a picture that contains significant other visual content” have no contrast requirement, and neither does “text that is part of a logo or brand name”.

The non-text rule covers two things: the “visual information required to identify user interface components and states”, such as the border of a text field or the check in a check box, and the “parts of graphics required to understand the content”, such as the lines of a chart.

What counts as large text

WCAG’s definition of large text is “at least 18 point or 14 point bold”. Points are a print measure, so the W3C’s Understanding document translates them for screens: “1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.”

Weight matters as much as size. Text at 20 pixels in a regular weight is not large under this definition; the same text in bold is.

How the ratio is worked out

The ratio compares how bright two colors are, measured in a particular way. It takes two steps.

1. 1

   Each color gets a relative luminance, from 0 for the darkest black to 1 for the lightest white. For ordinary screen colors, WCAG's formula is L = 0.2126 × R + 0.7152 × G + 0.0722 × B, after each channel has been converted from its 0–255 value to a linear light level.

2. 2

   The two luminances are compared as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker one.

The weights in the first step are why green text looks so much brighter than blue text of the same “strength”: green contributes about ten times as much as blue. The 0.05 in the second step, the W3C explains, “is based on Typical Viewing Flare”: an allowance for the stray light that falls on any real screen.

The result runs from 1:1, two identical colors, to 21:1, black on white. WCAG’s definition adds that where “no background color is specified, then white is assumed.”

Why 4.5:1

The number is not arbitrary. The W3C’s Understanding document explains that 3:1 is “the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision”, and that the higher figure is used “to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.”

"A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1." — W3C, Understanding 1.4.3

That is where the AAA figure comes from as well. The same document notes that 20/40 “is commonly reported as typical visual acuity of elders at roughly age 80.”

No rounding up

A ratio of 4.49:1 fails the 4.5:1 rule. The W3C is explicit that the ratios are thresholds and “the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).” The Contrast Checker follows this in two ways: the figure it shows is cut off at two decimals rather than rounded, and the pass or fail beside each criterion is decided on the exact value.

Color alone is never enough

Contrast is about brightness; criterion 1.4.1 is about something else. It says color must not be “the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” A form that marks mistakes only by turning a border red fails it, however strong the red’s contrast is, because some readers cannot tell that red from the gray it replaced.

The fix is a second signal: an icon, a word, an underline, a pattern. The Color Blindness Simulator shows an approximation of how a screenshot reads under three kinds of color vision deficiency, which makes a color-only signal easy to spot. The Color Blindness guide explains what those deficiencies are.

Checking a pair of colors

1. 1

   Enter the text color and its background in the Contrast Checker, as HEX values or with its color pickers. The Color Converter turns an RGB or HSL value into HEX first.

2. 2

   Read the ratio and the criteria. Each pass or fail is named with its success criterion and level, so you can see whether a pair meets AA for normal text, only for large text, or AAA.

3. 3

   Check the pairs people forget: placeholder text in form fields, links against body text, text over images, and the border of a field against the page.

4. 4

   For text over a gradient, check it against the part of the gradient that gives the lowest ratio, not the average. In the Gradient Generator you choose the colors yourself, so those end colors are the ones to check.

Building a palette from one color is where most contrast problems start, because tints of a brand color drift toward the background. The Palette Generator produces the related shades from one value; each pair you plan to put text on is worth a pass through the Contrast Checker before it is used.

What a passing ratio does not tell you

A ratio is one fact about two colors. It does not say that the text is large enough to read comfortably, that the font is clear, or that anything else on the page works. Thin, light fonts can pass on paper and still be hard work, and a passing ratio says nothing at all about keyboard use, labels, headings or the many other things WCAG covers. Contrast is the part of accessibility that can be checked with a calculator; it is not the whole of it.

The rules have also held still for a while. WCAG 2.2, the W3C’s newest Recommendation, carries all four criteria and all three definitions word for word, and the W3C states that “sites which conform to WCAG 2.2 also conform to WCAG 2.1.”

Questions

How this guide was made

Try the tools

Vivek Kumar runs ScreenTail from New Delhi. He has worked with computers for about 25 years and studied Computer Science. He is not a display engineer or a color scientist, and each guide says where its facts come from so you can check them.