WCAG Color Contrast Explained
Under WCAG 2.2 level AA, normal body text needs a contrast ratio of at least 4.5:1 against its background. Large text, meaning 24px and up or about 18.66px bold, needs 3:1, and so do icons, form field borders and focus indicators. Level AAA raises the text figures to 7:1 and 4.5:1. The ratio compares the relative brightness of two colors and runs from 1:1, where both are identical, to 21:1, black on white. Most accessibility policies and audits use AA as the target.
The contrast requirements in one table
| What | AA minimum | AAA minimum | Criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| Icons, input borders, focus rings, chart elements | 3:1 | None set | 1.4.11 |
| Logos, decorative graphics, disabled controls | Exempt | Exempt | n/a |
The large-text thresholds come from print sizes: WCAG defines large as 18 point, or 14 point bold. One CSS point is 1.333 pixels, so the on-screen equivalents are 24px and 18.66px. Bigger and heavier strokes stay legible at lower contrast, which is why the bar drops.
How the contrast ratio is calculated
Each color is first converted to relative luminance, a number from 0 for black to 1 for white. The red, green and blue channels are linearized to undo the gamma curve built into sRGB, then weighted: green counts for about 72% of perceived brightness, red about 21% and blue only about 7%. The ratio is then:
(lighter luminance + 0.05) / (darker luminance + 0.05)The 0.05 added to both stands in for ambient light reflecting off the screen, and it is why the maximum is 21 rather than infinite. Because of the channel weights, two colors that look equally strong can behave very differently. White text on a saturated blue such as #2563eb reaches 5.17:1 and passes, while white on a bright green such as #22c55e manages only 2.28:1 and fails.
Examples that pass and fail
| Text | Background | Ratio | Normal text AA |
|---|---|---|---|
| #595959 grey | White | 7.00:1 | Pass (AAA too) |
| #767676 grey | White | 4.54:1 | Pass, just |
| #777777 grey | White | 4.48:1 | Fail |
| #aaaaaa grey | White | 2.32:1 | Fail |
| White | #ff7a00 orange | 2.61:1 | Fail |
| Black | #ff7a00 orange | 8.04:1 | Pass |
| White | #15803d green | 5.02:1 | Pass |
Two lessons stand out. #767676 is about the lightest grey that still passes on white, and one step lighter fails. And for mid-brightness colors like orange, dark text often works far better than white, even though designers instinctively reach for white.
How to fix a color that fails
- Darken or lighten the text, not the brand. Keep the hue and saturation and move only the lightness. The Color Contrast Checker does this search for you and suggests the nearest passing shade.
- Flip the text color. On yellows, oranges, light greens and cyans, near-black text usually passes with room to spare.
- Keep a text-safe variant of the brand color. Many design systems use the pure brand color for large surfaces and a darker variant of it for text and links. The Color Palette Generator gives you the shades to choose from.
- Make the text large and bold. If a heading must stay in a lighter color, 24px regular or 18.66px bold only needs 3:1.
- Put a backdrop behind text on images. Contrast on a photo varies pixel by pixel. A semi-opaque dark overlay or a solid caption bar gives you one known background to test against.
What contrast rules do not cover
Logos and brand names are exempt, as is purely decorative text and text in disabled controls. Text that is part of a photograph, such as a street sign, is also exempt. Placeholder text in form fields is not exempt, and pale grey placeholders are among the most common audit failures. Contrast also does not replace other cues: links in body text should be distinguishable by more than color alone, which is why underlines remain the safest choice.
Dark mode and the future APCA method
The WCAG 2 formula applies to dark themes the same way. Very high contrast in dark mode, such as pure white on near-black at 18.73:1, can cause a halo effect for some readers, so many dark themes use an off-white such as #e0e0e0, which still scores above 14:1 on #121212.
A newer method called APCA is being developed for a future WCAG 3. It weighs font size and weight directly and treats light-on-dark differently from dark-on-light, which matches perception better. It is not yet a standard you can be audited against. Laws and procurement rules, including the European Accessibility Act through EN 301 549 and the US Department of Justice's 2024 ADA Title II rule, reference WCAG 2.1 AA, and WCAG 2.2 uses the same contrast criteria. Passing 2.2 AA with some margin is the practical target.
Quick checklist
- Body text, captions, labels and placeholders: 4.5:1 or more.
- Headings at 24px, or 18.66px bold: 3:1 or more.
- Icons that carry meaning, input borders and focus rings: 3:1 against what surrounds them.
- Check hover, focus, visited and error states, not just the default.
- Check text over images against the darkest overlay you will actually ship.
If a design file gives you colors as RGB or HSL, convert them with the Hex to RGB Converter first. For sizing the text itself, our guide to px vs rem vs em explains why font sizes in rem respect readers who enlarge their default text.