Accessible color contrast: what WCAG 2.2 requires and how to pass
Hundreds of millions of people have a color vision deficiency, and everyone reads low-contrast text more slowly. Contrast is the cheapest accessibility win there is — and the easiest to see once the numbers are next to the samples.
The numbers
| Element | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt / 14pt bold) | 3:1 | 4.5:1 |
| UI components & icons | 3:1 | — |
What those thresholds look like, on the same white background:
How the ratio is calculated
Each color is converted to relative luminance (a weighted, gamma-corrected mix of its red, green and blue). The ratio is (Llighter + 0.05) / (Ldarker + 0.05). Black on white is 21:1; a mid gray on white is around 4.5:1. Try any pair in the contrast checker.
Fixing a failing pair
- Keep the hue; change the lightness. Darken text or lighten background in small steps until it passes.
- If the brand color must stay, use it for large text, borders or backgrounds, and choose a darker shade for body text. Color pages on ColorSwoop list shades for this reason.
- Never rely on color alone: add icons, labels or underlines for links and states.
Color blindness
Red-green deficiencies are the most common. Here is a palette that leans on red and green as its only distinction, and what happens to it:
Every palette page on ColorSwoop has a Color blindness simulation section: switch between protanopia, deuteranopia, tritanopia and grayscale to see the palette as those viewers do, and read which pairs become hard to tell apart. Palettes with clear lightness steps, like most minimal and gradient palettes, are naturally safer.
Checklist before launch
- Body text ≥ 4.5:1 in light and dark mode.
- Buttons and form borders ≥ 3:1 against their surroundings.
- Focus indicators visible and ≥ 3:1.
- Information never conveyed by color alone.
- Run the palette through the color-blindness simulation once.
FAQ
What contrast ratio is required for WCAG AA?
4.5:1 for normal text, 3:1 for large text (at least 18pt, or 14pt bold) and for user-interface components and graphical objects.
What is WCAG AAA?
The enhanced level: 7:1 for normal text and 4.5:1 for large text. Aim for it on body copy when you can.
Does color contrast apply to placeholder text and icons?
Icons and UI controls need 3:1. Placeholder text is still text and needs 4.5:1 if it conveys information.
Is dark mode held to the same ratios?
Yes. 4.5:1 for body text and 3:1 for large text and controls, measured against whatever the background actually is. Off-white on near-black passes comfortably; mid-gray on near-black often does not.