How to Fix Color Contrast Issues (WCAG 1.4.3)

Insufficient color contrast appears on more than 80% of homepages we scan. It's the second most common WCAG violation after missing alt text — and unlike alt text, it requires actual design decisions to fix.

This guide covers WCAG Success Criterion 1.4.3 Contrast (Minimum) and how to make your site pass.

The Rule

WCAG 2.1 Level AA requires:

• Normal text: 4.5:1 contrast ratio minimum
• Large text: 3:1 contrast ratio minimum
• UI components and graphics: 3:1 (this is SC 1.4.11 — Non-text Contrast)

Large text is 18pt (approximately 24px) regular, or 14pt (approximately 18.66px) bold.

Level AAA raises these to 7:1 and 4.5:1 respectively. Most sites target AA.

Test Any Color Pair Instantly

Use our free color contrast checker to test any foreground/background combination. It shows live preview and pass/fail for AA Normal, AA Large, AAA Normal, and AAA Large.

Common Violations

Muted gray body text

The classic "subtle" design choice: light gray text on white. #999999 on #ffffff gives you 2.85:1 — well below the 4.5:1 threshold. To pass AA, you need to go at least as dark as #767676.

Colored links inside body text

If your link color has insufficient contrast against the background, or if your link is only distinguished from surrounding text by color (no underline), you have a problem. You can meet WCAG 1.4.1 (Use of Color) either by providing 3:1 contrast between link text and surrounding text plus another visual indicator on hover, or by always underlining links.

Placeholder text in form fields

Designers love subtle placeholder text. Browsers often render placeholders at 50-60% opacity, which usually fails contrast requirements. Placeholder text counts — it must meet contrast ratios too.

White text on light images (hero sections)

Hero sections with text overlaid on a photo are everywhere. If your photo is light in the area behind the text, white text will fail. Solutions:

• Add a dark overlay (a semi-transparent rgba(0,0,0,0.5) layer)
• Add a text shadow
• Use a solid background behind the text block
• Darken the image

Disabled button states

Buttons in disabled state are often styled with reduced contrast. WCAG technically exempts "inactive user interface components" from contrast requirements — but if users can't tell a button is disabled vs. enabled because both are low contrast, you still have a usability problem.

How to Audit Your Whole Site

A color contrast checker tests one pair at a time. To find every contrast issue across your site, you need an automated scanner that knows which text is on which background. That's what our free WCAG scan does — it uses axe-core to detect every contrast failure on up to 10 pages in under 2 minutes.

The scan returns each failing element, the computed contrast ratio, and the required minimum. The $29 remediation guide tells you exactly what to change, including suggested replacement colors that meet the requirement while staying close to your brand.

Design System Fixes

If you maintain a design system, the fix is usually a few color token changes:

1. Define a --text-muted token that passes AA. Do not go below #767676 on white backgrounds.
2. Define a --link-color token with 4.5:1 against your body background.
3. Audit every shade variant — don't let designers drop in random #ccc values.
4. Set minimum contrast rules in Stylelint or Design Tokens. Automate enforcement.

Once your design system passes, new pages tend to inherit compliance automatically.

Summary

• Normal text: 4.5:1 minimum (Level AA)
• Large text (18pt+ or 14pt+ bold): 3:1 minimum (Level AA)
• UI components and informational graphics: 3:1 (SC 1.4.11)
• Test pairs with our color contrast checker
• Scan your whole site for every contrast issue with a free wcagrepair.com scan

Contrast issues are cheap to fix and hugely impactful. A designer with the right tokens can eliminate hundreds of violations in an afternoon.