Contrast is the most quoted, most tested, and most misunderstood part of web accessibility. It is also the only one you can settle with arithmetic. This guide covers every threshold, the exceptions people miss, and how to fix a failing colour without starting a fight with whoever owns the brand.
A ratio compares how much light two surfaces reflect, on a scale from 1:1 — two identical colours, invisible — to 21:1, pure black on pure white, the theoretical maximum. Nothing can score higher.
The number is not a simple brightness average. WCAG uses relative luminance, which weights each channel by how the human eye perceives it:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Green carries about 71% of perceived brightness, red roughly 21%, and blue under 7%. This is why a pure blue and a pure green can have identical HSL lightness and wildly different contrast against white — and why every "pick a lightness that looks right" instinct you have is unreliable. Let the contrast checker do the arithmetic.
Four numbers cover almost everything you will ever be asked about:
| Content type | Level AA | Level AAA |
|---|---|---|
| Normal text (under 24px, or under 18.66px bold) | 4.5:1 | 7:1 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 |
| UI components & meaningful graphics | 3:1 | not defined |
| Pure decoration, disabled controls, logotypes | exempt | exempt |
AA is the level referenced by most legislation and procurement requirements — including the standards incorporated into the European Accessibility Act and the US Section 508 framework. AAA is aspirational; very few sites reach it across the board, and WCAG itself does not recommend it as a general policy for whole sites.
This is where most self-assessments go wrong. WCAG defines large text as 18pt or larger, which maps to 24px at standard screen density, or 14pt (about 18.66px) and larger when bold.
Three consequences follow:
Designers often treat "large" as "bigger than body copy" and apply 3:1 to a 20px section heading. Audit tools will flag it. When in doubt, hold everything under 24px to 4.5:1 and you never have to argue about the definition.
Success criterion 1.4.11 requires 3:1 for interface components and meaningful graphics — the parts of the UI you need to perceive in order to use them. That includes:
The single most common failure in modern design systems is the light grey input border — #E5E7EB on white measures 1.24:1. It looks clean in a mockup and is effectively invisible to a significant share of users. Darkening it to #767676 gets you to 4.54:1 with almost no visual change.
WCAG exempts several categories. They are narrower than most people assume:
Text that is decorative, invisible to assistive technology, or part of a picture that contains significant other visual content. A slogan in a photograph, for example. The moment that text conveys information, the exemption evaporates.
Text that is part of a logo or brand name has no contrast requirement. Note that this covers the logotype itself — not every instance of your brand colour used as text elsewhere on the page.
Inactive interface components are exempt. Be careful here: a control that merely looks disabled but is still operable does not qualify, and a contrast this low often leaves users unable to tell whether a control is disabled at all.
The ratio must hold against the worst part of the background behind the text, not the average. WCAG has no averaging mechanism — "it's mostly dark behind the headline" is not a defence.
Three reliable fixes:
Whatever you choose, test the actual rendered result. Photographs change; a hero image swapped next quarter can silently break compliance on a page that passed last month.
The instinct is to change the colour. Almost always, you should change the value instead.
A mid-blue #4A90D9 on white measures 3.34:1 — it clears large text at 3:1 and fails normal text at 4.5:1.
#2E6FB85.14:1#1F5A9E6.97:1The hue barely moves. Nobody looking at the page perceives a different brand colour — they perceive the same blue, slightly deeper.
The pattern that works in practice: define two variants of every accent. One tuned for text and icons on light backgrounds, one tuned for large fills. Textbook design systems do exactly this with numbered ramps — the 600 step is your text-safe colour, the 400 step is your fill colour.
text-muted with a documented ratio survives a redesign. A hex pasted into twelve stylesheets does not.Perfect ratios still leave the interface unusable if information is carried by hue alone, if focus is invisible, or if motion cannot be disabled. Contrast is the easiest checkpoint to measure and therefore the most often treated as the finish line. It is the starting line.
Next: designing with colour so it survives colour blindness.
Thresholds in this guide follow the W3C Web Content Accessibility Guidelines. Ratios are computed with the WCAG relative-luminance method — the same formula used by the Pandaxq contrast checker. This guide is educational and is not a compliance certification; check the current W3C recommendation and your applicable legal standard.