Skip to lesson content
WCAG 1.4.3 · Level AAMedium10 min readColor

Insufficient Color Contrast

Overview

Text must have a contrast ratio of at least 4.5:1 against its background (3:1 for large text ≥18pt or bold ≥14pt).

Low color contrast is the most commonly detected accessibility issue on the web—WebAIM found contrast failures on over 80% of home pages. It affects far more people than teams expect: anyone with low vision, color blindness (about 1 in 12 men), aging eyes, or simply using a phone in bright sunlight. Light-gray text looks elegant in a mockup but becomes unreadable for millions of users, and it’s one of the most common citations in accessibility audits.

WCAG Criterion:1.4.3
Conformance Level:Level AA
Difficulty:Medium
Time to fix:~10 min
Category:Color

The Problem

This pattern is inaccessible — avoid it.

[ AVOID ]
/* Contrast ratio 2.1:1 — fails */ .button { color: #999; background: #fff; } .caption { color: #aaa; background: #f5f5f5; }

The Fix

Use this accessible pattern instead.

[ CORRECT ]
/* Contrast ratio 4.5:1+ — passes */ .button { color: #595959; background: #fff; } .caption { color: #767676; background: #f5f5f5; }

Step-by-step

  1. Use a contrast checker (WebAIM, browser DevTools, or ADAGuard) to measure text/background pairs.

  2. For normal text (<18pt, not bold): minimum ratio 4.5:1.

  3. For large text (≥18pt or bold ≥14pt): minimum ratio 3:1.

  4. Adjust the foreground or background color until the ratio is met.

  5. Don't rely on color alone to convey meaning — use icons, patterns, or labels too.

Common Mistakes

  • Using light gray (#999, #ccc) text on white because it “looks clean” in design tools.

  • Forgetting placeholder text, disabled states, and text set over images or gradients.

  • Conveying status with color alone (red = error) with no icon or text.

  • Checking contrast only in the design file, not the shipped CSS.

How to Test for It

  • Use the WebAIM Contrast Checker or the contrast ratio in Chrome DevTools’ color picker.

  • Run ADAGuard or axe to flag every failing text/background pair automatically.

  • Switch on a grayscale filter to catch meaning that relies on color alone.

Framework Notes

How to apply this fix in your stack.

// Use CSS custom properties so contrast is checked in one place const theme = { colorText: '#595959', colorBg: '#ffffff' };

FAQ

Related lessons