WCAG Color Contrast Explained: The 4.5:1 Rule Without the Jargon

WCAG requires a contrast ratio of at least 4.5:1 between normal text and its background (Level AA) — 3:1 for large text and UI components, 7:1 for the stricter AAA level. These are the numbers behind accessibility law, and checking any pair takes seconds in the contrast checker, which computes the official formula live.

What the ratio measures

Contrast compares how bright two colors appear, not how different they look. Each color gets a relative luminance — a 0-to-1 brightness value computed from its RGB channels, weighted the way human vision weights them (green counts most: L = 0.2126R + 0.7152G + 0.0722B, on linearized values). The ratio is then:

ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

That yields 1:1 for identical colors and 21:1 for black on white. Hue barely matters — a saturated red and a saturated blue can have terrible contrast with each other if their brightness is similar, which is why “it looks colorful” is not the same as “it’s readable.”

The thresholds, precisely

Requirement	Ratio	Applies to
AA — normal text	4.5:1	body copy, labels, links under 24px
AA — large text	3:1	≥24px, or ≥18.66px bold
AA — UI & graphics (WCAG 2.1)	3:1	input borders, icons, focus indicators, chart elements
AAA — normal text	7:1	enhanced level
AAA — large text	4.5:1	enhanced level
Exempt	—	logos, decorative text, disabled controls

Why it has legal weight: the European Accessibility Act — applying to e-commerce, banking and other services since June 2025 — requires conformance with EN 301 549, which incorporates WCAG 2.1 Level AA. In the US, ADA web lawsuits and Section 508 procurement likewise use WCAG as the yardstick. AA is the line to clear; AAA is credit, not obligation.

Checking your colors: the 2-minute workflow

1. Open the contrast checker and enter your text and background colors (HEX, RGB or the picker).
2. Read the ratio and the four pass/fail verdicts (AA/AAA × normal/large).
3. Test the real pairs from your UI: body-on-background, link-on-background, button-label-on-button, placeholder-on-input. The last two are where most sites fail.
4. Don’t forget states: hover, focus and error colors need to pass too.

Worked example: this site’s bright brand blue #1d87f1 on white scores 3.46:1 — passes for large headlines, fails for body text. The fix wasn’t changing the brand: buttons and links use the darker #166fde/#185ab4 shades of the same hue, which clear 4.5:1. That exact pattern — bright for graphics, darkened for text — solves most “brand color fails” cases.

Fixing failures without redesigning

• Darken, don’t abandon. Generate the ramp of your color in the shades generator and test shades until one clears 4.5:1 — the hue stays recognizably yours.
• Grays are the usual suspects. Placeholder and helper text at #999 (2.8:1) fails; #767676 is about the lightest passing gray on white.
• Size up instead. Text at ≥24px (or 18.66px bold) only needs 3:1 — sometimes the fix is typography, not color.
• Check both themes. A pair passing in light mode can fail inverted in dark mode; ratios don’t transfer automatically.

Common contrast mistakes

1. Testing only body text — buttons, placeholders, focus rings and informative icons have requirements too (3:1 as UI components).
2. Judging by eye on a good monitor — your calibrated screen in a dim office is the best case; the standard exists for sunlight, cheap panels and aging eyes.
3. White text on bright accents — the classic near-miss (white on this site’s bright blue: 3.46:1); darken the accent one step.
4. Forgetting text over images/gradients — measure against the lightest area the text can sit on, or add a scrim.
5. Chasing AAA everywhere — 7:1 constrains palettes hard; AA everywhere beats AAA somewhere.

Quick summary

Normal text needs 4.5:1, large text and UI need 3:1, AAA asks 7:1 — measured as the luminance ratio between foreground and background on a 1-to-21 scale. The AA level carries legal weight via the EU Accessibility Act and WCAG-based rulings elsewhere. Check every real color pair in the contrast checker, and fix failures by darkening your hue’s shade — not by abandoning your brand.

Related tools: shades & tints generator · color converter · HEX to RGB. Formula and thresholds are from WCAG 2.1 (W3C Recommendation) — the checker implements them exactly.