FeaturesPricingAudit GuideFree StatementDashboard →

Fix Low Color Contrast Issues

Learn how to fix low color contrast to meet WCAG AA and AAA standards. Includes tools, code examples, and color combination testing.

6 min read
serious severityWCAG Level AAWCAG 2.1 Success Criterion 1.4.3Auto-detectable

What Is It?

Color contrast ratio is measured on a scale from 1:1 (no contrast) to 21:1 (maximum contrast). WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

Affected users: Low vision users (including 265 million people with moderate to severe vision loss globally), color blind users, users on bright screens or mobile devices

Why It Matters

Approximately 8% of men and 0.5% of women have color blindness. Low contrast affects everyone on bright days or with screen glare. High contrast improves readability for all users.

Good news: Automated tools can suggest color adjustments, but designers should review to maintain brand identity while improving contrast.

How to Detect This Issue

Use a contrast checker tool like WebAIM or Stark plugin. Test your color combinations. Inspect element and check computed colors. Test with a color blindness simulator.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<p style="color: #aaa; background: #fff;">Light gray text on white background</p>
After (accessible)
<p style="color: #333; background: #fff;">Dark gray text on white background</p>

Contrast ratio improved from 2.1:1 (fails WCAG AA) to 11.4:1 (exceeds AAA). Always test with actual user text, not just placeholder text.

React / Next.js

Before
<button style={{background: "#77c", color: "#abc"}}>Submit</button>
After
<button style={{background: "#0047ab", color: "#fff"}}>Submit</button>

The new combination has a 7.5:1 contrast ratio, meeting AAA standards. Use CSS variables for consistent color system across your app.

WordPress

Before
Theme with light gray text (#ccc) on off-white background (#f5f5f5)
After
Theme with dark text (#222) on off-white background (#f5f5f5) with minimum 7:1 contrast ratio

Test colors in WordPress customizer or theme options. Use a contrast checker plugin to verify before publishing.

Shopify Liquid

Before
Product title in brand color #999 on white background (3:1 contrast)
After
Product title in brand color #1a5490 on white background (8:1 contrast)

Adjust Shopify theme CSS or use custom CSS in theme settings. Test in both light and dark modes if your theme supports them.

Common Mistakes

✗

Only testing contrast in design mockups, not accounting for real content

✗

Assuming dark mode automatically has good contrast

✗

Using placeholder colors that differ from production colors

✗

Ignoring contrast for buttons, links, and form inputs

✗

Testing only normal vision; not testing with color blindness simulators

Frequently Asked Questions

What contrast ratio should I aim for?
Aim for WCAG AA minimum (4.5:1 for normal text, 3:1 for large text). Strive for AAA (7:1 and 4.5:1) when possible for better accessibility for all users.
How do I test color contrast?
Use WebAIM Color Contrast Checker, Contrast Ratio by Lea Verou, or browser plugins like Stark, Accessibility Insights, or axe DevTools. Test your actual color combinations.
Does contrast apply to images with text?
Yes. Images containing text must also meet contrast requirements. Consider using real text overlays instead of text baked into images.
What about brand colors that don't meet contrast standards?
Use brand colors as accents, but ensure text on colored backgrounds is dark or light enough. Light brand colors work better as backgrounds for dark text.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides