WCAG Contrast Ratios: 4.5:1, 3:1 and 7:1 Explained

Which ratio applies to what

Most explanations stop at text. Two success criteria are involved, and 3:1 appears in both of them for different things:

Level AA is what accessibility policies and procurement rules usually point to. AAA is not expected for whole sites; W3C itself notes that AAA cannot be met for all content.

Working the formula by hand

The ratio compares the relative luminance of the two colours, a measure of how bright each looks to the eye, from 0 (black) to 1 (white). Here is the full calculation for the dark teal Tooleem uses for text on light backgrounds, #0B7A70, against white.

Step 1: convert each channel to a 0–1 value

Step 2: linearise each channel

Screens store colour with a gamma curve, so each value is turned back into linear light. Values at or below 0.04045 are divided by 12.92; everything above goes through the power formula:

Red is just above the 0.04045 cut-off, so even it uses the power formula. Before May 2021 the WCAG definition said 0.03928; W3C changed it and notes that the difference has no practical effect.

Step 3: weight the channels

The eye is far more sensitive to green than to blue, and the weights say so:

White has a luminance of exactly 1.

Step 4: the ratio

So #0B7A70 on white is 5.21:1: it passes AA for all text sizes and fails AAA for normal text. The 0.05 added to both sides models the light a screen reflects; it is why the scale runs from 1:1 to 21:1 rather than to infinity.

Why 4.48:1 is a fail

Many checkers display one or two decimals, and many people round in their head. WCAG is explicit that the thresholds must be compared with the unrounded value: its own example is that 4.499:1 does not meet 4.5:1. Neighbouring greys show how narrow the line is:

#767676 is the lightest neutral grey that passes on pure white, which is why it turns up in so many design systems. It only works on pure white, though, as the next sections show.

Non-text contrast: the other 3:1

Success criterion 1.4.11, added in WCAG 2.1, asks for 3:1 against adjacent colours for two kinds of non-text content:

• Visual information needed to identify a control and its state: the border of a text field when the border is the only thing that shows where the field is, a checkbox outline, the indicator that shows a toggle is on, and the focus indicator when the control has keyboard focus.
• Parts of graphics needed to understand the content: a single-colour icon with no text label, the lines in a line chart, the slices of a pie chart when you need to tell them apart.

“Adjacent” means what touches the element. For a text field with a white inside, a grey border and a white page around it, the border is measured against the white page.

Two exceptions apply: inactive (disabled) components, and controls whose appearance is left entirely to the browser. Once you restyle a browser control, the exception is gone.

Where no minimum applies

Criterion 1.4.3 names three exceptions for text. They are narrower than they are often taken to be:

Five failures that pass a quick glance

1. Placeholder grey. A popular placeholder grey, #9CA3AF, measures 2.54:1 on white. Placeholder text is in scope, so it needs 4.5:1. #6B7280 (4.83:1) passes.
2. The same grey on a tinted card. #767676 passes on white (4.54:1) but drops to 4.12:1 on a light grey card such as #F3F4F6. Test each text colour on every background it actually sits on.
3. A light brand colour used for text. Bright turquoise #1ED4C5 is 1.86:1 on white, unusable for text there, yet 9.58:1 on a dark navy such as #0F172A. A brand colour is not good or bad; the pairing is.
4. Text over images and gradients. Measure against the lightest part of the background behind light text (or the darkest part behind dark text), not the average. An overlay or a solid band behind the text fixes most cases.
5. Hover, focus and visited states. WCAG applies to text shown on hover or focus as well. A link that turns pale on hover has to pass in its hover colour too.

Fixing a brand colour that fails

Keep the hue, lower the lightness, and re-measure. The table darkens #1ED4C5 by scaling its three channels down in 5% steps and measures each result against white:

This is the trade-off behind Tooleem’s own palette: the bright turquoise is used on dark backgrounds, and a darker teal (#0B7A70, 5.21:1) carries text on light ones.

What about WCAG 3 and APCA?

WCAG 2.2, a W3C Recommendation since October 2023, is the version policies point to today. WCAG 3.0 is still a Working Draft. Contrast methods discussed for it, such as APCA, can be interesting for design work, but passing them is not a substitute for meeting the 2.x ratios above.