WCAG contrast ratio: 4.5:1, 3:1 and 7:1, with the formula and fixes

What contrast ratio WCAG asks for

A contrast ratio compares how bright two colours are. It runs from 1:1 (no difference at all) to 21:1 (black on white). WCAG is a list of testable requirements called success criteria, grouped into conformance levels A, AA and AAA. Three WCAG 2.2 success criteria set the contrast numbers, and the table lists them by level.

4.5:1 for body text and 3:1 for large text are the Level AA numbers from success criterion 1.4.3, so they are the pair to remember. Level AAA is stricter, and the W3C does not recommend requiring it as a general policy for whole sites, because some content cannot meet every AAA criterion (see the WCAG 2.2 conformance requirements). The numbers above come from the W3C's pages: Understanding 1.4.3 Contrast (Minimum), Understanding 1.4.6 Contrast (Enhanced) and Understanding 1.4.11 Non-text Contrast.

How the ratio is calculated

The formula is in the WCAG 2.2 glossary, under contrast ratio and relative luminance. First each colour gets a relative luminance, a number from 0 (darkest black) to 1 (lightest white). Then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour and L2 the luminance of the darker one.

You will see 0.03928 in older write-ups where the glossary now says 0.04045. The W3C changed it in May 2021 and says it has no practical effect on the calculations in the context of these guidelines.

Large text, UI components and the exceptions

WCAG calls text "large scale" when it is at least 18 point, or 14 point bold. In CSS terms, 18 point is 24 px, and 14 point bold is about 18.7 px. Larger text with wider strokes is easier to read at lower contrast, so it gets the lower threshold.

The text rules also cover placeholder text, and text that appears on hover or keyboard focus. Some things have no requirement at all: text that is pure decoration or not visible to anyone, text in an inactive component such as a disabled button, text that is part of a picture with other significant visual content, and logos or brand names.

Non-text contrast works differently. The 3:1 in 1.4.11 applies to the parts of a control you need to see to find it and know its state, for example the border of a text field when that border is what marks the field out, and to the parts of a graphic needed to understand it. It also applies to the visible focus indicator. It does not apply to inactive components, or to controls whose appearance the browser decides and the author has not changed.

Why 4.499:1 does not pass 4.5:1

The W3C's Understanding 1.4.3 page is explicit: the 3:1 and 4.5:1 ratios are thresholds, and the computed value should not be rounded. Its own example is that 4.499:1 would not meet 4.5:1. This matters because a ratio shown to one decimal place can hide a fail. A grey that fails can look like it passes.

#777777 is 4.478:1. Rounded to one decimal it reads 4.5, yet it fails normal text. One step lighter in each channel is the difference between a pass and a fail, and #767676 is the lightest neutral grey that passes 4.5:1 on white.

Fixing a failing colour with a small change

A common fix is to darken the text a little on a light background, or lighten it on a dark one. Keep the hue and move the colour in small steps towards black (on a light background) or towards white (on a dark one) until the ratio clears the threshold. Stop at the first step that passes, so the change stays small.

A light grey such as #AAAAAA on white is 2.323:1. If that grey is large text, #949494 is enough for 3:1. To reach 7:1 (Level AAA for normal text) the lightest neutral grey is #595959.

Sometimes the problem is the background rather than the text. White text on a mid green such as #4CAF50 is only 2.780:1. Changing the text colour alone, the lightest neutral grey that passes is #333333 (4.546:1). If the brand needs white text, darken the button instead, and then measure again.

What automated checks can and cannot see

A checker can measure a clean text colour on a flat background. It cannot always work out the background behind text that sits on a photo or a gradient, or under another element. When a checker such as axe cannot work out the background colour, it reports the text as needing a manual review instead of a pass or a fail. Colour checks read the colours the page has at the moment the scan runs. Text that only appears, or only changes colour, on hover or keyboard focus is therefore only measured if that state is active during the scan, so check those states by hand. Automated checks find many issues but not all, so a manual review is still needed.

Kerbwise runs a text contrast check among its other checks. For text it can measure on a flat background, it explains the problem in plain language and gives the CSS change, with the new ratio shown beside the old one. Text it cannot measure, such as text over images or gradients, is usually listed for a manual review.

This article is general information, and WCAG is a W3C standard, not a law. Which standard applies to a given site depends on the site and where it operates, and that is a question for a lawyer. Not legal advice.