← BACK TO ALL SECTIONS
SECTION 07 / 08
COLOR, DECODED
07 / 08

Accessibility & Contrast

Pretty palettes that nobody can read are bad design. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background. Real designers check this before shipping.

RATIO 16.5 : 1
✓ PASSES WCAG AAA
Body text on background , readable for everyone, including users with low vision.
RATIO 1.6 : 1
✗ FAILS WCAG AA
Body text on background , invisible to many users. Never ship this.

The WCAG contrast standards

WCAG AA is the minimum legal standard. 4.5:1 for normal text, 3:1 for large text.
WCAG AAA is the gold standard. 7:1 for normal text, 4.5:1 for large text.
Large text = 18pt+ or 14pt+ bold. Smaller text needs higher contrast.
UI elements (buttons, form borders) need 3:1 against their background.
TRY IT
Live contrast checker
Background
Text color
The quick brown fox
Smaller body text reads like this on the chosen background.
CONTRAST RATIO
15.8
WCAG AA
PASS
NORMAL ✓ LARGE ✓
WCAG AAA
PASS
NORMAL ✓ LARGE ✓