Lesson 8 / 25

Color contrast

Ensure text is readable for low-vision users and not reliant on color alone.

WCAG contrast ratios

AA (minimum for most sites): 4.5:1 for normal text, 3:1 for large text (18px+). AAA (enhanced): 7:1 and 4.5:1. Never rely on color alone to convey info—use text labels, patterns, icons.

Test and tools

Use WebAIM Contrast Checker, Stark (Figma), or browser DevTools. Aim for 4.5:1 minimum. Test with Deuteranopia (red-green) and Protanopia (other red-green variant) simulators.

Color blindness considerations

8% of males have red-green color blindness. Use patterns or text labels alongside color to convey status (pass/fail, error/success).

AAA requirements

7:1 for normal text, 4.5:1 for large text. Rarely required but ideal for maximum accessibility.