A beautiful design that nobody can read isn't a design. WCAG's contrast rules define the minimum for text to stay legible for low-vision users, sunlit screens, and low-contrast displays. This guide explains how the ratio is computed, the difference between AA and AAA, what "large text" means, and the UI places teams keep missing.
How the ratio is computed — sRGB luminance
WCAG 2.x defines the contrast ratio as the relationship between the relative luminance of two colors. The value always lives in 1 : 1 to 21 : 1. Pure black on pure white maxes out at 21:1.
L1 = relative luminance of the lighter color
L2 = relative luminance of the darker color
ratio = (L1 + 0.05) / (L2 + 0.05)Relative luminance normalizes sRGB channels (R, G, B) to 0–1, applies gamma correction (sRGB → linear), then weights them 0.2126 / 0.7152 / 0.0722. Green carries the heaviest weight because the human retina is most sensitive to green.
Skip the math — drop two colors into Color Contrast Checker and you get the ratio plus all four AA/AAA Normal/Large grades.
AA vs AAA — two levels
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA (industry baseline) | ≥ 4.5 : 1 | ≥ 3 : 1 | ≥ 3 : 1 |
| AAA (enhanced) | ≥ 7 : 1 | ≥ 4.5 : 1 | ≥ 3 : 1 (no separate rule) |
AA is the de-facto industry baseline, written into law for many public services (US Section 508, EU EAA, Korea KWCAG). AAA is too strict for entire sites — even WCAG says it cannot be required across all content.
What "large text" means
- Normal weight: ≥ 18.66 px (14 pt).
- Bold: ≥ 14 px (≈ 11 pt).
The size that ends up on the user's screen is what counts. Smaller text needs higher contrast because thin strokes lose more pixels to anti-aliasing.
UI contrast (added in WCAG 2.1)
WCAG 2.1 (2018) added 1.4.11 Non-text Contrast: non-text UI elements also need 3:1 contrast.
- Input field borders, button outlines, checkbox borders, toggle switches.
- Focus indicators (focus rings) — essential for keyboard users.
- Chart series identified by color alone — pair with patterns or labels.
A "light gray input border (#E5E5E5) on white" hits about 1.2:1, way below the bar. #C0C0C0 gets you close to 3:1.
Common UI regressions
1. Placeholder text
The "lighter gray on gray" trap. If a placeholder serves as input guidance it needs 4.5:1. There's a reading that pure visual cues can sit at 3:1 — for consistency, default to 4.5.
2. Accent color in dark mode
A light-mode accent like #5b21b6 (Iris) drops to roughly 2:1 on a dark #1a1a1a background. Brighten it for dark mode (HSL lightness around 55%).
3. Disabled state
Disabled buttons that are too faint to see. WCAG explicitly exempts inactive components from contrast rules, but usability says aim for at least 3:1.
4. Text over images
OG images and hero banners have non-uniform backgrounds that defeat simple ratio measurement. The classic fix is a semi-transparent dark scrim behind the text — make sure it's dark enough to push the worst case past the threshold.
5. Link distinction
Inline links identified by color alone are invisible to color-blind users. The standard is color + underline. If you remove the underline, the link must contrast at least 3:1 against the body text and change on hover/focus.
APCA — the next-generation formula
WCAG 2.x assumes sRGB and stumbles on P3 / HDR color spaces and on pastels-on-white. WCAG 3 plans to adopt APCA (Advanced Perceptual Contrast Algorithm) instead.
- Reports a Lc (Lightness contrast) value from -108 to 106 instead of a ratio.
- Recommended minimum Lc depends on text size and weight — smaller text needs higher Lc.
- As of 2026, WCAG 3 is still a Working Draft. AA/AAA won't be replaced soon, but new design systems often validate against both.
A workflow that scales
- At design-system definition, measure every meaningful pair — fg/bg, accent/bg, border/bg, focus-ring/bg.
- Promote only pairs that pass AA Normal (4.5:1) into tokens. Adjust lightness on failures and re-measure.
- Dark mode gets its own tokens — never a naïve inversion. Keep the accent for identity; redesign fg/bg.
- Wire a CI guard that re-checks all pairs whenever the token file changes. Prevents regressions.
Useful tools:
- Color Contrast Checker — two colors in, instant AA/AAA grades plus a live sample.
- Color Converter — convert between HEX, RGB, HSL, CMYK. HSL makes lightness adjustments easy.
- Color Palette Generator — generate shades, tints, complements, and triads from a seed. Handy for token starter sets.
Summary
- WCAG 2.x ratio = (lighter L + 0.05) / (darker L + 0.05). Range 1:1 to 21:1.
- AA: 4.5 normal, 3 large, 3 UI. AAA: 7 normal, 4.5 large.
- Large = 18.66 px or 14 px bold (measured in CSS pixels).
- WCAG 2.1's 1.4.11 — borders, focus rings, and other non-text UI also need 3:1.
- Common fails: placeholders, dark-mode accents, disabled states, text-on-image, link color alone.
- APCA is the future (WCAG 3). Validate both for now if you can.