WCAG contrast ratio explained: AA, AAA and the formula

The WCAG contrast ratio compares how light two colours are, on a scale from 1:1 (identical) to 21:1 (black on white). To meet level AA, normal text needs at least 4.5:1 against its background and large text needs 3:1; the stricter level AAA asks for 7:1 and 4.5:1. The contrast checker I built calculates the ratio for any pair of colours and shows each pass or fail, and this guide explains where the numbers come from.

The thresholds: AA and AAA

Three success criteria in WCAG 2.1 and 2.2 deal with contrast:

• 1.4.3 Contrast (Minimum), level AA: 4.5:1 for normal text, 3:1 for large text.
• 1.4.6 Contrast (Enhanced), level AAA: 7:1 for normal text, 4.5:1 for large text.
• 1.4.11 Non-text Contrast, level AA: 3:1 for the parts of controls and graphics people need to see, such as input borders, icons, focus indicators and chart lines, against the colours next to them.

Level AA is the one most accessibility laws and policies point to. The thresholds are exact minimums, so a pair at 4.47:1 fails; it cannot be rounded up. A few reference points: the grey #767676 on white scores 4.54:1, the lightest neutral grey that passes AA, while #777777 scores 4.48:1 and fails. Pure red #FF0000 on white is 4.00:1, fine for large text but not for body copy, and #595959 on white just reaches 7:1 for AAA.

What counts as large text

WCAG defines large text as at least 18 point, or 14 point bold. On the web a point is 4/3 of a CSS pixel, so that means at least 24px regular or about 18.66px bold. Anything smaller, including most body text, captions, labels and placeholder text, needs the full 4.5:1. Very thin or decorative typefaces are harder to read than their size suggests, so give them extra contrast rather than relying on the large-text allowance.

How the ratio is calculated

The ratio is built from each colour's relative luminance, its brightness as the eye perceives it, from 0 for black to 1 for white. First, each red, green and blue value from 0 to 255 is divided by 255 and converted from the gamma-encoded sRGB value to linear light: values at or below 0.04045 are divided by 12.92, and higher values become ((c + 0.055) / 1.055) raised to the power 2.4. Older versions of the text printed 0.03928 as the cut-off, which makes no difference for ordinary 8-bit colours. Then the channels are weighted:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Green counts most because our eyes are most sensitive to it, which is why yellow text on white fails so badly. Finally, with L1 the lighter colour and L2 the darker one:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Black on white gives 1.05 / 0.05 = 21. The ratio is symmetrical, so swapping text and background gives the same number. The popular grey #6B7280 on white works out at about 4.83:1, enough for AA but not AAA. A newer method called APCA, proposed for a future WCAG 3, scores contrast differently, but it is not yet a standard.

What the rule covers

The text criteria do not apply to logos and brand names, to text in disabled controls, to purely decorative text, or to text that is incidental within a photo with lots of other content. Everything else counts, including text over images and gradients, which must pass at its weakest spot, not on average. Hover, focus and visited states need checking too, and if your site has a dark mode, its colour pairs are a separate set to test.

Fixing a failing pair

The usual fix is changing lightness while keeping the hue: darken the text or lighten the background until it passes. When a pair fails, the contrast checker finds the nearest text colour of the same hue that reaches 4.5:1, and the 7:1 version when one exists, with one click to use it. For text over photos, add a semi-transparent dark overlay behind it rather than hoping the image stays dark enough. The colour scheme generator shows ratios as you build a palette, as described in How to choose a colour palette that works, and the colour-blindness simulator checks the other half of the problem: contrast does not help if the only difference between two states is red versus green.