Low-contrast text, pale grey on white, light text on a busy background, looks stylish to some designers and is invisible to many readers. Color contrast is a core accessibility requirement, governed by the WCAG guidelines, and getting it right makes your content readable for everyone, including the large share of users with low vision or reading on a phone in sunlight. This guide explains the standards, why they matter, and how to check your colors.
What color contrast means
Contrast is the difference in brightness between text and its background, expressed as a ratio from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read. WCAG, the Web Content Accessibility Guidelines, sets minimum contrast ratios that text must meet to be considered accessible. It is a measurable, objective standard, not a matter of taste, which is what makes it easy to check and fix.
The WCAG contrast ratios
WCAG defines two levels, AA (the common legal and practical standard) and AAA (enhanced), with different thresholds for normal and large text:
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
“Large text” means roughly 18px bold or 24px and up. AA is the standard most sites aim for and that accessibility laws typically require; AAA is a stricter target for critical content.
Why contrast matters
The most important reason is people: around one in twelve men and many older users have some color-vision or low-vision impairment, and countless able-sighted users struggle with pale text on bright screens or outdoors. Good contrast makes your content usable for all of them. There is also a legal dimension, accessibility standards are mandated in many jurisdictions, and a business one: text people can actually read keeps them on the page. Poor contrast quietly costs you readers you never hear from.
Contrast and SEO
Contrast is not a direct ranking factor, but it connects to SEO through user experience. Google increasingly rewards pages that are genuinely good for users, and text nobody can read fails that test, driving up bounce and driving down engagement. Accessibility and SEO both push in the same direction: clear, legible, well-structured content. Fixing contrast is a small change that improves the experience for a meaningful slice of your audience, which is exactly the kind of quality signal that helps over time.
Common contrast mistakes
A few patterns fail again and again: light grey body text on white (trendy but often below 4.5:1); text placed over a photo or gradient without an overlay, so contrast varies wildly across the image; brand colors used for text that look fine to the designer but fail the ratio; and pale placeholder or “muted” text that drops well under the threshold. Each is easy to fix once you measure it, and easy to miss if you only judge by eye.
Contrast is not just for body text
Text is the obvious case, but WCAG also expects sufficient contrast for other elements people need to see. Interactive components and their states, button borders, form-field outlines, focus indicators, and meaningful graphics like icons and chart lines should meet a 3:1 ratio against their surroundings so users can perceive and operate them. A pale grey “Search” button on a white background, or a focus ring so faint keyboard users cannot tell where they are, fails for the same reason low-contrast text does. When you audit a page, check the buttons, links, form fields and icons alongside the paragraphs, they are part of the same accessibility picture, and easy to overlook because designers judge them by look rather than by measured contrast.
Check your contrast ratio
Do not guess whether a color pair passes, measure it. Our free color contrast checker takes a text color and a background color and shows the exact contrast ratio, plus a clear pass/fail against AA and AAA for normal and large text, with a live preview. Test your body text, links, buttons and muted text; if a pair fails, darken the text or lighten the background until it passes. It takes seconds and removes all the guesswork.
The takeaway
Color contrast is a measurable accessibility requirement: WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at AA, and text that fails is unreadable for a real share of your audience. It is not a direct ranking factor, but legible, accessible content supports the user experience Google rewards. Check every important color pair with the color contrast checker, and explore the rest of our free SEO tools.