WCAG Color Contrast: What 4.5:1 Means and How to Pass It
What the WCAG contrast ratios actually require, why gray text keeps failing, and how to fix a failing color pair without ditching your brand palette.
Gray text on a white background. Designers love it, and it fails accessibility audits more than anything else on the web. Take #777777 on white: the contrast ratio is 4.48:1, just under the 4.5:1 that WCAG AA demands. Nudge it two steps darker to #767676 and it passes at 4.54:1. That’s how thin the line is. The Color Contrast Checker shows you which side of it your colors are on.
What the ratio actually measures
The WCAG formula converts each color to relative luminance — how bright it appears to the human eye — and divides the lighter value by the darker one, with a small constant added to both. The scale runs from 1:1 (identical colors) to 21:1 (black on white).
One quirk worth knowing: the eye doesn’t weigh color channels equally. Green contributes about 71% of perceived brightness, red about 21%, and blue only 7%. That’s why pure blue text (#0000ff) on black passes nothing, while pure green (#00ff00) on black sails past AAA. Two colors that look “equally vivid” can behave completely differently in a contrast check.
The four numbers worth memorizing
- 4.5:1 — AA for normal text. The baseline for body copy.
- 3:1 — AA for large text, and also for UI components like button borders and icons.
- 7:1 — AAA for normal text.
- 4.5:1 — AAA for large text.
Large text means at least 24px at regular weight, or 18.66px if it’s bold. A 32px hero headline only needs 3:1, which is why muted headline colors can be fine while the same shade in a paragraph is a violation.
AA is the level that laws actually reference — the European Accessibility Act, which came into force in June 2025, points to it, and so does most ADA-related guidance in the US. AAA is a stretch goal. Nice for long-form reading, rarely achievable for every brand color.
Where designs usually fail
WebAIM runs an automated audit of the top million home pages every year, and low-contrast text has been the most common failure in every edition — it shows up on roughly four out of five pages. The usual suspects:
- Placeholder text in forms, which browsers render in light gray by default
- Text over hero images, where the “background” is whatever the photo happens to be
- Brand orange or teal buttons with white labels (#ff6600 on white manages only about 2.9:1)
- Footer links in gray on a slightly different gray
None of these look broken on a bright office monitor. On a phone in sunlight, or through 60-year-old eyes, they disappear.
Fixing a failing pair without a redesign
You almost never need a new palette. Keep the hue, adjust the lightness. Darken the text a step or two, or lighten the background, and re-test after each nudge — the checker updates as you type, so this takes seconds. If the brand color is sacred, use it for large headings and accents, where 3:1 is enough, and pick a darker variant for body text.
And check dark mode separately. A pair that passes on white can fail after you invert it, because luminance doesn’t flip symmetrically.
Paste your two colors into the Color Contrast Checker and you’ll know in a second whether they pass AA, AAA, or neither — no signup, nothing leaves your browser.