Lesson 9 / 26
Color contrast
Meet WCAG colour contrast ratios, check them with tools and avoid relying on colour alone to convey meaning.
WCAG contrast ratios
AA (minimum for most sites): 4.5:1 for normal text, 3:1 for large text (18pt/24px or 14pt bold). AAA (enhanced): 7:1 and 4.5:1. Never rely on colour alone to convey information; add text labels, patterns or 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.