Color Contrast & WCAG: How to Test and Fix Accessibility
Understand with AI
Discuss with your preferred AI assistant
Have low-contrast text — by far the most common automatically-detectable WCAG failure.
The minimum contrast ratio body copy must clear to meet WCAG 2.1 Level AA.
Men have some form of color blindness, plus everyone reading in glare or dim light.
Color contrast is one of the most common — and most easily fixed — accessibility failures on the web. Roughly four in five accessibility issues found on home pages relate to low-contrast text. If your headlines, body copy, links, or buttons don't have enough contrast against their background, a meaningful share of your audience simply can't read them comfortably, and search engines increasingly treat accessibility as a quality signal.
This guide explains what color contrast is, how the WCAG contrast ratio is calculated, the exact thresholds you need to hit, and a practical workflow for fixing failing colors without throwing away your brand palette.
What Is Color Contrast?
Color contrast is the difference in perceived brightness (luminance) between two colors — typically text and the surface it sits on. The greater the difference, the easier the text is to read. The Web Content Accessibility Guidelines (WCAG) express this difference as a contrast ratio between 1:1 (identical colors, invisible) and 21:1 (pure black on pure white).
Crucially, contrast is about luminance, not hue. Two very different colors — like red and green — can have almost identical luminance and therefore poor contrast, which is exactly why they're a problem for many people with color vision deficiency.
How the WCAG Contrast Ratio Is Calculated
WCAG uses a precise, repeatable formula so any two checkers agree on the same number. The calculation has three steps:
- Convert each color to relative luminance. Each of the red, green, and blue channels is normalized to 0–1, linearized with a gamma curve, then weighted (0.2126 R, 0.7152 G, 0.0722 B) — green carries the most weight because the human eye is most sensitive to it.
- Add a small offset. The lighter and darker luminance values each get +0.05 to model ambient light reflecting off the screen.
- Divide. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), producing a value between 1 and 21.
A contrast checker does this math instantly so you never have to. The important part is knowing which thresholds you must clear.
WCAG Contrast Thresholds You Need to Hit
WCAG defines two conformance levels — AA (the legal and practical baseline for most sites) and AAA (enhanced). The minimum ratio depends on text size:
| Use case | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 24px, or under 18.66px bold) | 4.5:1 | 7:1 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 |
| UI components & graphics (icons, borders, charts) | 3:1 | — |
Aim for AA across the board. Treat AAA as a goal for body-heavy reading experiences like documentation, news, and long-form blogs.
Why Contrast Matters for Accessibility and SEO
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and a far larger group reads on dim phone screens, in bright sunlight, or with age-related vision changes. Adequate contrast helps all of them. Beyond inclusivity, accessibility carries real business weight: it reduces legal exposure under standards like the ADA and the European Accessibility Act, and it overlaps with the page-experience signals Google rewards. Accessible pages tend to be cleaner, faster, and more readable — qualities that correlate with lower bounce rates and better rankings.
How to Fix Failing Color Contrast
1. Adjust luminance, not hue
You usually don't need a new color — just a darker or lighter version of the one you have. Keep the hue to preserve your brand and shift the lightness until you clear 4.5:1.
2. Fix the foreground first
Backgrounds are often fixed by layout or imagery. Nudging the text color is the least disruptive change, which is why a good checker suggests an adjusted foreground that reaches AA on the same background.
3. Don't rely on color alone
Pair color with another cue — an underline on links, an icon on an alert, a label on a chart segment — so meaning survives even when contrast or color perception is poor.
4. Re-test in context
Check text over images, on hover and focus states, and in dark mode. Each is a separate color pair with its own ratio.
Common Color Contrast Mistakes
- Gray-on-white body text that looks elegant in a design mockup but fails AA in the browser.
- Placeholder text and disabled states so faint they're unreadable for everyone.
- Light-colored links that meet AA against the background but not against surrounding text.
- Text laid over busy hero images without a scrim or overlay to guarantee contrast.
- Assuming a brand color is fine for buttons without checking the label-on-button ratio.
Expert Tips
Tune lightness, keep the hue
You rarely need a brand-new color. Hold the hue and shift the lightness darker or lighter until the pair clears 4.5:1 — your palette stays intact and the text becomes readable.
Never signal by color alone
Back up every color cue with a second signal — underline links, add an icon to alerts, label chart segments — so the message survives for users with low vision or color blindness.
Frequently Asked Questions
What is a good color contrast ratio?
For normal body text, aim for at least 4.5:1 to meet WCAG AA, and 7:1 for the stricter AAA level. Large text (24px and up, or 18.66px bold) and UI elements like icons and borders need at least 3:1. Higher is always safer.
What's the difference between WCAG AA and AAA?
AA is the widely adopted baseline that most accessibility laws and audits expect — 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level — 7:1 for normal text and 4.5:1 for large text — recommended for content where reading is the primary task.
Does color contrast affect SEO?
Indirectly, yes. Contrast itself isn't a direct ranking factor, but it's a core part of accessibility and page experience. Readable, accessible pages tend to keep users engaged longer and align with the quality signals search engines reward, while poor contrast can hurt usability metrics.
How do I check contrast for text over an image?
Test the text color against the specific pixels behind it — usually the lightest or darkest area it overlaps. The most reliable fix is to add a solid or semi-transparent overlay (a scrim) behind the text so the contrast ratio is predictable regardless of the image.