Insufficient color contrast.

The problem

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.

The fix

/* Fails: 2.85:1 and 2.13:1 */
.button { color: #999; background: #fff; }
.caption { color: #aaa; background: #f5f5f5; }

/* Passes: 7.0:1 and 4.54:1 */
.button { color: #595959; background: #fff; }
.caption { color: #707070; background: #f5f5f5; }

Step by step

1. 1Use a contrast checker (ADAGuard’s free one, or your browser’s DevTools) to measure text/background pairs.
2. 2For normal text (<18pt, not bold): minimum ratio 4.5:1.
3. 3For large text (≥18pt or bold ≥14pt): minimum ratio 3:1.
4. 4Adjust the foreground or background color until the ratio is met.
5. 5Don'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 a contrast checker, or the contrast ratio your browser’s DevTools show in the color picker.
• Run an ADAGuard scan to flag every failing text/background pair automatically.
• Switch on a grayscale filter to catch meaning that relies on color alone.

In your framework

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

Questions