How to read WCAG contrast ratios

If you have ever opened a contrast checker and stared at a number like 4.83 : 1 for a design, you are not alone. The ratio looks technical, the thresholds feel arbitrary, and the rules about when which threshold applies are not obvious from the WCAG page itself. This article walks through what the number actually measures, why the standard thresholds are what they are, and how to read a real contrast result without second-guessing yourself.

The number is a luminance ratio

A WCAG contrast ratio is the ratio between the relative luminance of two colors — the lighter one over the darker one, plus a small offset to account for screen reflectance. Luminance is a physical measurement of how much light comes off a pixel, weighted by human eye sensitivity (we see green much more than blue, so green contributes more to the luminance value than blue does).

The ratio runs from 1 : 1 (two identical colors, invisible) to 21 : 1 (pure black on pure white). Every other combination falls somewhere in between. The metric is symmetric — black on white reads 21 : 1 and so does white on black, because the formula puts the lighter luminance on top regardless of which color is foreground.

This matters for two reasons:

• A design pair that passes contrast at one point in your visual hierarchy passes at every point. Light and dark mode of the same palette can produce identical numbers.
• The contrast does not depend on hue, only luminance. Pure red on pure green looks vibrant — and vibrationally awful — but the contrast ratio is only about 2.9 : 1, well below the 4.5:1 threshold for body text. The eye distinguishes them by hue, but a person with red-green color blindness or low vision relies on luminance, and that signal is weak.

What the thresholds actually mean

WCAG 2.1 defines four named thresholds for text and one for non-text UI:

• AA Normal Text — 4.5 : 1. The minimum for body text below 18 point (or 14 point bold). Success criterion 1.4.3. This is the floor for any public-facing site that wants to claim WCAG conformance.
• AA Large Text — 3 : 1. For text 18 point and above (or 14 point bold and above), which works out to roughly 24px (or 19px bold) in CSS.
• AAA Normal Text — 7 : 1. Success criterion 1.4.6. Recommended for sites where readability is critical — long-form reading, government services, healthcare, anything serving low-vision readers as a primary audience.
• AAA Large Text — 4.5 : 1. Same number as AA Normal — meaning a color pair that barely passes AA for body text passes AAA for headings.
• Non-text Contrast — 3 : 1. Success criterion 1.4.11, added in WCAG 2.1. Applies to UI components, focus indicators, meaningful icons, charts, and the visual states of interactive controls.

The thresholds are not arbitrary. WCAG 2 inherited them from research by Lovie-Kitchin and Whittaker on the contrast required to read text at 1.5x the size that someone with 20/40 vision can detect at all — which is a reasonable proxy for "comfortable, sustained reading by a typical reader". The 4.5:1 number falls out of that research; the 3:1 relaxed threshold for large text accounts for the lower contrast that bigger letterforms can survive.

The choice of 4.5 over a round 5 is also deliberate: the original derivation was approximately 4.6, and 4.5 was a slight rounding-down to make designs that hit the threshold not feel artificially constrained. WCAG 2.0 published in 2008 with this number, and it has been the dominant accessibility standard ever since.

How to read a real result

When the contrast checker shows you a number, here is the practical reading order:

1. Is the text body copy or large? Below 18pt (or 14pt bold) is body. Above is large. The threshold halves at the boundary.
2. What level am I targeting — AA or AAA? AA is the legal compliance baseline in most jurisdictions. AAA is for sites where reading is the product.
3. Is the result above the threshold? That is your answer.

A few worked examples on a 16px body font:

• 4.83 : 1 — passes AA Normal, fails AAA Normal. Good enough for body copy on a typical website. Most marketing sites and dashboards target this.
• 3.2 : 1 — passes AA Large only. Fine for headings but not for body copy. A common trap for low-contrast aesthetic palettes.
• 7.5 : 1 — passes AAA Normal. Solid for any audience, including readers with low vision. Most "accessible by default" design systems aim here.
• 2.9 : 1 — fails everything except possibly the non-text 3:1 threshold (and only just). Reword the design.

Two pairs that come up constantly and are worth memorising:

• Mid-grey #767676 on white is exactly 4.5:1 — the AA Normal floor.
• Mid-dark grey #595959 on white is 7:1 — the AAA Normal threshold.

If you cannot easily remember the 4.5/3/7/4.5 grid, remember those two greys. Anything brighter on a white background fails AA; anything darker than #767676 on white passes AA Normal.

When does each threshold apply?

This is the corner of WCAG that trips up most designers:

Note that disabled controls are exempt, which is sometimes used as an excuse to make form controls illegible-by-default. WCAG's reasoning is that disabled controls communicate "you cannot use this right now", and the user should not need to read them. If your design uses low contrast on a control to mean idle but enabled, that is not a disabled control, and the 3:1 minimum applies.

Common mistakes

A few patterns that seem reasonable but fail accessibility audits:

Light grey on white for "secondary" text. A muted body-copy treatment like #a5a5a5 on white scores about 2.6:1 — failing both AA and AA Large. The aesthetic instinct ("less important text should look less prominent") is fine; achieving it via low contrast is not. Use a smaller font with full-strength color, or use a darker grey that still meets 4.5:1 (around #767676 and below).

Brand color on its own background. A button whose label is the brand color on a tinted version of the same brand color — for instance #3b82f6 text on #dbeafe — almost always fails 4.5:1 because the two colors share too much luminance. Use white or near-white text on the saturated brand color, or full-strength brand text on white.

Placeholder text. Browser default placeholder colors (around #757575 on white) are right at the 4.5:1 boundary, and most designs further mute them — pushing the contrast below AA. WCAG 2.1 makes placeholder contrast a body-text concern, not a UI-component concern, so the 4.5:1 threshold applies. If a placeholder is visible, it is text, and it has to clear 4.5:1.

Focus rings on light backgrounds. A blue focus ring that looks fine on white may fail 3:1 on light grey. The non-text 3:1 minimum applies to whichever background the focus ring sits against, including hover and pressed states.

WCAG 2 vs APCA — what about the new metric?

You may have seen designers and accessibility researchers talking about APCA — the Accessible Perceptual Contrast Algorithm — as a replacement for the WCAG 2 ratio. APCA is in draft for WCAG 3 and uses a perceptual lightness scale (rather than a luminance ratio) plus weight and size factors. It is more accurate for hard cases, particularly mid-tone palettes and dark mode where WCAG 2 sometimes feels off.

But APCA is not a published standard yet. For 2026, the legal compliance metric is still WCAG 2.1 / 2.2 AA. APCA is a useful second opinion when WCAG 2 gives you a number that does not match what you can see — but you cannot ship a site claiming WCAG conformance based on APCA alone.

The practical workflow

For most projects, the contrast workflow looks like this:

1. Pick a primary text/background pair early. Aim for AA Normal (4.5:1) at minimum, or AAA Normal (7:1) if the site is reading-heavy.
2. Run every secondary text treatment, every button, every form-control state through a contrast checker. The one on this site lives in your browser; nothing about your colors is sent to a server.
3. For interactive states (hover, focus, pressed), check both the new state's text contrast against the new background, and the visual change against the original background — the change itself needs to pass non-text 3:1 if it is the only signal of state.
4. Run an automated accessibility scanner (axe, Lighthouse, Pa11y) on the built site. Contrast is one of the few WCAG criteria that automated tools catch reliably, so the false-positive rate is low.

Two things automated tools cannot do: judge whether something is body text or large text (when CSS uses fluid typography), and judge whether a graphic is meaningful or decorative. Those calls are yours to make.

The summary

• A WCAG contrast ratio is the ratio of relative luminance between the lighter and darker color, from 1:1 to 21:1.
• Body text needs 4.5:1 for AA, 7:1 for AAA. Large text (18pt+, or 14pt bold+) gets a relaxed 3:1 / 4.5:1 threshold.
• UI components, focus rings, and meaningful icons need 3:1 against their surroundings (WCAG 2.1, criterion 1.4.11).
• Memorise #767676 (4.5:1 on white) and #595959 (7:1 on white) as anchors.
• Disabled controls, logos, and decorative text are exempt — but use those exemptions sparingly.
• WCAG 2.1/2.2 AA is the compliance baseline; APCA is a useful second opinion but not yet a published standard.

Most contrast failures are not subtle — they are designs where the contrast number was never checked. A two-minute pass through every visible text/background pair will catch nearly all of them, before anyone has to file a bug.