Why Color Contrast Matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Millions more experience reduced contrast sensitivity due to aging, cataracts, or viewing conditions (bright sunlight, old monitors). Low-contrast text is not a minor inconvenience – it makes content unreadable for a significant portion of your audience.
WCAG (Web Content Accessibility Guidelines) provides the international standard for accessible color contrast, and it is referenced in accessibility laws and regulations globally (ADA in the US, EN 301 549 in the EU, AODA in Canada).
What Is Contrast Ratio?
Contrast ratio measures the luminance difference between two colors. It is expressed as a ratio from 1:1 (identical colors, no contrast) to 21:1 (black text on white background, maximum contrast).
The formula compares the relative luminance (a weighted measure of perceived brightness) of the foreground color against the background color:
Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's luminance and L2 is the darker one's luminance. Both values are computed from the linear RGB channel values.
You do not need to calculate this manually – contrast checkers do it for you.
WCAG 2.1 Requirements
WCAG defines two compliance levels relevant to contrast:
Level AA (standard requirement)
| Content type | Minimum contrast ratio |
|---|---|
| Normal text (< 18pt / 14pt bold) | 4.5:1 |
| Large text (≥ 18pt or ≥ 14pt bold) | 3:1 |
| UI components and graphical elements | 3:1 |
Level AAA (improved)
| Content type | Minimum contrast ratio |
|---|---|
| Normal text | 7:1 |
| Large text | 4.5:1 |
What Is Exempt from Contrast Requirements
- Decorative text (pure visual decoration with no informational value)
- Text in logos and brand names
- Disabled/inactive UI elements
- Pure image content (though alt text must meet contrast if it carries information)
How to Check Contrast
In-browser developer tools
Chrome and Firefox both have built-in contrast checking. In DevTools, select a text element, look at the Accessibility tab, and the contrast ratio is shown alongside pass/fail indicators.
Design tools
Figma, Sketch, and Adobe XD have accessibility plugins that check contrast ratios as you design.
Dedicated checker
The Color Contrast Checker on this site lets you input any foreground and background color (HEX, RGB, or HSL) and immediately shows the contrast ratio, WCAG AA/AAA pass/fail status, and a preview of the text at multiple sizes.
Common Failures and Fixes
Light grey text on white background – extremely common, almost always fails. Darken the text or lighten the background.
White text on a medium-saturation color – often fails at smaller text sizes even though it looks fine at large sizes. Check at the actual font size.
Placeholder text – browser default placeholder color is typically very light and almost universally fails WCAG AA. Use color: #767676 or darker for placeholder text.
Icon-only UI – an icon without a text label is a graphical element and must meet the 3:1 ratio against its background.
Color-only information – never convey information through color alone (e.g., "errors are shown in red"). This fails WCAG 1.4.1 even if contrast is fine, because color-blind users cannot distinguish the state.
WCAG 3.0 and APCA
WCAG 3.0 (in development) introduces APCA (Advanced Perceptual Contrast Algorithm), which takes into account font weight, size, and viewing context in ways the current 4.5:1 ratio does not. APCA produces less false positives (flagging text that is actually readable) and fewer false negatives. Keep an eye on it for future projects – the current 2.1 standard remains the legal baseline.
Summary
WCAG 2.1 requires at minimum a 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components (Level AA). These requirements protect readability for people with low vision, color blindness, and situational visual impairment. Test early in the design process – retrofitting color choices is significantly harder than getting them right upfront.