WCAG Color Contrast Requirements: Complete Guide with Examples
Color contrast is one of the most common — and most fixable — accessibility failures on the web. This guide covers every WCAG 2.1 and 2.2 contrast requirement with pass/fail examples, calculation methods, and practical fixes for developers and designers.
Why Color Contrast Matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Additionally, low vision affects around 246 million people worldwide. Poor color contrast creates genuine barriers for these users — and also degrades readability for everyone in bright sunlight, on low-quality displays, or when reading under fatigue.
Under WCAG 2.1 Level AA, color contrast is measured as a ratio between the relative luminance of two colors. A ratio of 1:1 means identical colors (invisible text). A ratio of 21:1 is the maximum — pure black on pure white.
WCAG Contrast Requirements at a Glance
| Content Type | Level AA | Level AAA |
|---|---|---|
| Normal text (under 18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ / 14pt+ bold) | 3:1 | 4.5:1 |
| UI components (buttons, inputs, icons) | 3:1 | — |
| Focus indicators (WCAG 2.2) | 3:1 | — |
| Decorative text (purely aesthetic) | Exempt | Exempt |
| Logos and brand names | Exempt | Exempt |
How Contrast Ratio Is Calculated
The contrast ratio is calculated using relative luminance values. Relative luminance is a measure of how bright a color appears to the human eye, on a scale from 0 (black) to 1 (white).
The formula is: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance.
You do not need to calculate this manually. Free tools like browser DevTools, the WebAIM Contrast Checker, and our automated scanner at FixMyWeb calculate this instantly.
Common Color Combinations: Pass or Fail?
Gray Text on White — The Most Common Failure
Many designs use subtle gray text for secondary content, captions, and placeholder text. The most common failure pattern:
#999999on white: 2.85:1 — FAILS (needs 4.5:1 for normal text)#767676on white: 4.54:1 — PASSES Level AA#595959on white: 7.0:1 — PASSES Level AAA
The minimum gray that passes WCAG AA for normal text on white is approximately #767676.
Blue Links on White
- Default browser blue
#0000FFon white: 8.59:1 — PASSES - Common brand blue
#4A90D9on white: 3.3:1 — FAILS for normal text - Accessible blue
#0057B8on white: 5.9:1 — PASSES
White Text on Colored Backgrounds
- White on
#28a745(green): 2.67:1 — FAILS - White on
#155724(dark green): 9.42:1 — PASSES - White on
#0d6efd(Bootstrap blue): 3.26:1 — FAILS for normal text - White on
#0a58ca: 4.54:1 — PASSES
What About Placeholder Text?
Placeholder text in form inputs is frequently overlooked. Browsers default to very light gray placeholder text (around #aaaaaa on white, which is approximately 2.3:1 — well below the 4.5:1 threshold).
Fix placeholder text with CSS:
input::placeholder {
color: #767676; /* minimum passing gray on white */
}Note: Placeholder text technically falls under an exception (it could be considered "inactive user interface component"), but best practice is to ensure it meets the 4.5:1 ratio.
UI Components and Non-Text Contrast (WCAG 1.4.11)
WCAG 2.1 added Success Criterion 1.4.11, which extends contrast requirements to visual interface components and graphical objects. This includes:
- Form controls: The border or outline of input fields, checkboxes, and radio buttons must have 3:1 contrast against their adjacent background.
- Focus indicators: Custom focus rings must have 3:1 contrast against the adjacent colors (upgraded to specific size requirements in WCAG 2.2).
- Icons conveying information: Icons used without text labels must meet 3:1 contrast.
- Graphs and charts: Meaningful data visualizations must meet 3:1 contrast requirements.
Dark Mode Considerations
Dark mode websites must also meet contrast requirements. Common failures in dark mode:
- Dark gray text on dark backgrounds (e.g.,
#888on#1a1a1a: 2.9:1 — fails) - Colored text that passed in light mode but fails in dark mode
- Input borders invisible against dark surfaces
Test both light and dark modes explicitly. Use the prefers-color-scheme CSS media query and verify contrast for each theme independently.
Tools for Checking Color Contrast
Browser DevTools
Modern browsers have built-in contrast checkers. In Chrome DevTools, click any element, go to the Styles panel, click any color swatch, and the Color Picker will show the contrast ratio and WCAG pass/fail status.
Automated Scanner
FixMyWeb automatically checks every text element on your page against WCAG 1.4.3 (text contrast) and 1.4.11 (non-text contrast). Our scanner reports the exact contrast ratio found, the required ratio, and which elements fail — with links to their location in the page.
Design Tools
Figma includes a built-in contrast checker. There are also browser extensions (Axe DevTools, WAVE, Colour Contrast Analyser) for real-time checking while designing.
Fixing Contrast Failures Without Breaking Your Design
Contrast requirements do not mean everything must be black and white. You can maintain brand colors by:
- Darken the foreground color: Shift the text color toward black until it passes. Often a subtle change is enough.
- Lighten the background: Shift the background toward white while keeping the hue.
- Increase text size: Large text (18pt or 14pt bold) only requires 3:1. Making secondary text slightly larger can bring a failing combination into compliance.
- Add a text shadow or background: Placing a semi-transparent background behind text over images can create sufficient contrast without changing the image.
Run a Free Contrast Audit
Color contrast is the most commonly automated accessibility check — and one of the fastest to fix. Scan your website with FixMyWeb to find every contrast failure across your entire page in under 60 seconds.