// Accessibility
Color Contrast and WCAG: A Practical Guide for Web Designers
WCAG color contrast requirements explained — AA vs AAA ratios, how to test them, and how to fix contrast failures without breaking your design.
Why color contrast matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Beyond color blindness, low contrast affects elderly users, people using screens in bright sunlight, and anyone with a non-ideal display.
WCAG 2.1 defines minimum contrast ratios that are legally required in many jurisdictions (ADA in the US, Equality Act in the UK, EN 301 549 in the EU for government websites).
WCAG contrast ratio requirements
WCAG 2.1 Level AA: normal text requires 4.5:1 contrast ratio. Large text (18pt+ or 14pt+ bold) requires 3:1. UI components and graphical objects require 3:1 against adjacent colors.
Level AAA: normal text requires 7:1. Most organizations target AA — AAA for normal text is often impractical for design systems.
- AA normal text: 4.5:1 minimum
- AA large text: 3:1 minimum (18px+ regular or 14px+ bold)
- AA UI components: 3:1 against adjacent colors
- AAA normal text: 7:1 minimum
- Decorative images and disabled UI components: exempt
How to test and fix contrast
Chrome DevTools shows contrast ratio in the color picker. WebAIM Contrast Checker, Colour Contrast Analyser (desktop app) work as standalone tools. To fix a failing ratio: reduce lightness (L value) on the foreground color in HSL space — often fixes the ratio with minimal visual change.
WebEnture's Accessibility Agent crawls your site and automatically checks all text/background color combinations against WCAG 2.1 AA ratios, flagging failures with the affected element and a suggested fix.