fix_eyebrowAccessibility audit shipped a bug: body text is #ccc on #fff — contrast 1.6:1, fails WCAG AA. Fix body color to `oklch(0.40 0 0)` (~7.4:1 against white, passes AAA). Use the modern OKLCH pattern from B5 — not a hex.
Color contrast: 4.5:1 for body, 3:1 for large text
100 XP8 min
Theory
The numbers WCAG requires
For WCAG AA (the legal baseline in most countries):
| Type | Minimum contrast |
| Body text | 4.5 : 1 |
| Large text (18pt regular, 14pt bold) | 3 : 1 |
| Interactive UI elements (buttons, focus rings) | 3 : 1 |
| Decorative (logos, disabled state) | none required |
For WCAG AAA (stricter — required for some government sites), bump body to 7:1.
Computing contrast
Contrast ratio is a function of relative luminance, not just "how different are the colors." Tools that compute it: Chrome DevTools color picker, axe, WebAIM contrast checker.
/* ✗ Light gray on white — 2.3:1, fails AA */
body { color: #aaa; background: #fff; }
/* ✓ Mid gray on white — 4.6:1, passes AA */
body { color: #767676; background: #fff; }
/* ✓ Dark gray — 7.2:1, passes AAA */
body { color: #595959; background: #fff; }The common trap: placeholder text
input::placeholder { color: #ccc; } /* 1.6:1 — invisible to low-vision users */WCAG considers placeholder text content. It must hit 4.5:1 against the input background.
Dark mode
Dark mode has the SAME requirements. Light gray text on a near-black background frequently fails. Test both modes.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 10 lessons in each track are free. No card needed for those.