Color Contrast & Readability
Contrast is the difference in perceived brightness between text (or an important graphic) and its background. Too little contrast and the content becomes hard or impossible to read — not just for users with low vision, but for anyone reading on a low-quality screen, in bright sunlight, or simply tired at the end of the day. The Web Content Accessibility Guidelines (WCAG) turn that fuzzy idea into a concrete, testable number.
WCAG contrast ratio requirements
Level | Normal text | Large text (≥18pt / 14pt bold) |
|---|---|---|
AA (minimum) | 4.5 : 1 | 3 : 1 |
AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Contrast ratios range from 1:1 (identical colors, no contrast at all) to 21:1 (pure black on pure white, maximum contrast). AA is the widely adopted baseline most sites target and most legal accessibility requirements reference; AAA is a stricter tier reserved for content where readability really can't be compromised, and is harder to satisfy with a colorful design.
Why contrast matters beyond compliance
Treating contrast as a checkbox to tick for legal reasons misses most of its value. Good contrast measurably helps:
Who benefits | How |
|---|---|
Low-vision and color-blind users | Text remains distinguishable from its background even when colors are perceived differently or less sharply. |
Everyone, in bright environments | Outdoor sunlight and glare wash out low-contrast text on any screen, regardless of the reader's vision. |
Older users | Contrast sensitivity naturally declines with age — text that was legible at 25 may not be at 65. |
Anyone, when tired or distracted | Higher contrast reduces the cognitive effort needed to parse text, which matters for every reader, not only ones with a diagnosed condition. |
Tools for checking contrast
You don't need to calculate contrast ratios by hand. Practical options:
Tool | Notes |
|---|---|
Browser DevTools | Chrome, Firefox, and Edge all show a contrast ratio (and pass/fail against AA/AAA) directly in the color picker when you inspect a text element. |
WebAIM Contrast Checker | A standalone web tool — paste in a foreground and background color and it reports the exact ratio and which WCAG levels it satisfies. |
Automated accessibility audits | Tools like Lighthouse and axe flag insufficient contrast automatically across a whole page, which is useful for catching regressions. |
Worked example: a failing vs passing combination
/* Fails AA: light gray text on white is roughly 2.3:1 */
.text-muted-bad {
color: #b0b0b0;
background: #ffffff;
}
/* Passes AA (4.5:1+) for normal text: darker gray keeps the same
"muted" feel while staying legible */
.text-muted-good {
color: #595959;
background: #ffffff;
}
/* Passes AAA (7:1+): near-black on white, for content where
readability must not be compromised */
.text-strict {
color: #1a1a1a;
background: #ffffff;
}