Most teams check one contrast ratio — body text against its background — and call the page accessible. There are at least three ratio rules, and the two people forget are where audits fail.
Contrast is the accessibility rule teams think they've handled. Someone runs the body text through a checker, it clears 4.5:1, and the page gets marked compliant. Then a real audit — often a legal one, since WCAG AA is a procurement and regulatory requirement across the EU, UK, and US public sector — finds the button nobody checked, the focus ring that's invisible, the placeholder text that fails. Contrast compliance isn't one number. It's a small set of ratio rules, and the ones people skip are exactly where the failures cluster.
The three ratio rules
WCAG 2.1 AA defines contrast as a ratio between two relative luminances. The guideline text is precise about the thresholds:
"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:... Large-scale text and images of large-scale text have a contrast ratio of at least 3:1."
— W3C, "Understanding SC 1.4.3: Contrast (Minimum)"
So: normal text needs 4.5:1, large text (roughly 18pt, or 14pt bold) needs 3:1, and — the one most designers never learned — UI components and meaningful graphics need 3:1 as well. Three rules. Most teams remember one.
What counts as a "UI component"
This is the rule that trips audits. Buttons, form-field borders, checkboxes, toggle states, and focus indicators are all "user interface components," and their meaningful boundaries need 3:1 against what's behind them. A text input with a pale-grey border sitting on white at 2:1 fails — the field itself is invisible to a low-vision user even if the text inside it passes. People check the words and forget the box the words live in.
The hover and focus trap
Contrast has to hold in every state, not just at rest. A button that clears 4.5:1 normally and drops to 3:1 on hover is non-compliant in its hover state — and interactive states are exactly when contrast tends to slip, because designers pick hover colours for "feel" rather than running them through a checker. If you change a colour on interaction, both the resting and the changed colour have to pass. Test the states, not just the default.
The logo exemption, correctly understood
WCAG exempts logotypes and inactive (disabled) components from the contrast rules, and this exemption is widely misread in both directions. Yes — your brand wordmark can use its official colours even if they'd fail as text, because it's a logo. No — that exemption does not extend to your headings, buttons, or body copy just because they use brand colours. The carve-out is narrow: the logo itself, and genuinely disabled controls. Everything a user is meant to read or operate is in scope.
Contrast is necessary, not sufficient
Passing every ratio still doesn't mean the page works for everyone, because contrast and colour-differentiation are different problems. A red error state and a green success state can both clear 4.5:1 against white and still be indistinguishable to someone with red-green colour vision deficiency, which affects roughly one in twelve men. Contrast handles "can they see it against the background"; it says nothing about "can they tell these two states apart." You need both — which is why never relying on colour alone (add an icon, a label, a pattern) sits right alongside the ratio rules.
Where this is heading: APCA
WCAG 2.1's simple luminance-ratio formula is known to be imperfect — it can be too strict on some dark-mode combinations and too lenient on others, because human contrast perception isn't a clean ratio. The proposed successor, the Accessible Perceptual Contrast Algorithm (APCA), models perception more accurately and is being developed for WCAG 3.0. It isn't a ratified standard yet, so today you build to WCAG 2.1 AA — but it's worth knowing the ground will shift, and that a design which barely passes the old formula may land differently under the new one.
Check every state, not just the text
Make contrast checking mechanical and complete. Run text and, crucially, UI-component and focus-state colours through a WCAG contrast checker — every state, not just the resting one. Preview the interface under different colour-vision types with a color blindness simulator to catch the red-green failure that a passing ratio hides. And for charts, badges, and graphical content where the "text" is baked into an image, an image contrast checker catches what a CSS-only audit misses. Compliance is three rules across every state — not one number on the body copy.
← All articles