principlejavascriptMajor
Color contrast — WCAG AA and AAA requirements for text
Viewed 0 times
WCAG 2.1 Level AA
color contrastcontrast ratioWCAG AAWCAG AAAlow vision4.5:1
Problem
Low contrast between text and background colors makes content unreadable for users with low vision, cataracts, or in bright ambient lighting. Developers pick colors visually without measuring contrast ratios.
Solution
Use a contrast ratio checker (e.g., WebAIM Contrast Checker, browser DevTools, axe) to verify text meets WCAG minimums.
WCAG AA (minimum):
Normal text (<18pt / <14pt bold): 4.5:1
Large text (≥18pt / ≥14pt bold): 3:1
UI components and graphical objects: 3:1
WCAG AAA (enhanced):
Normal text: 7:1
Large text: 4.5:1
// CSS custom properties pattern for design tokens
:root {
--color-text-primary: #1a1a1a; / contrast 16.1:1 on white /
--color-text-muted: #595959; / contrast 7.0:1 on white — AAA /
--color-text-disabled: #767676; / contrast 4.54:1 — AA minimum /
/ Never use lighter than #767676 on white for body text /
}
WCAG AA (minimum):
Normal text (<18pt / <14pt bold): 4.5:1
Large text (≥18pt / ≥14pt bold): 3:1
UI components and graphical objects: 3:1
WCAG AAA (enhanced):
Normal text: 7:1
Large text: 4.5:1
// CSS custom properties pattern for design tokens
:root {
--color-text-primary: #1a1a1a; / contrast 16.1:1 on white /
--color-text-muted: #595959; / contrast 7.0:1 on white — AAA /
--color-text-disabled: #767676; / contrast 4.54:1 — AA minimum /
/ Never use lighter than #767676 on white for body text /
}
Why
Approximately 300 million people have color vision deficiency. Low contrast also degrades reading comfort for all users in suboptimal lighting conditions.
Gotchas
- Contrast ratio applies to text and meaningful icons — decorative elements are exempt
- Placeholder text in inputs must also meet 4.5:1 (commonly forgotten)
- Contrast ratios change when using opacity — always measure the rendered color, not the CSS value
- Dark mode requires separate contrast validation — light mode passing doesn't guarantee dark mode passes
Context
Choosing text, background, border, and icon colors in any UI
Revisions (0)
No revisions yet.