To fix poor colour contrast, identify failing text/background pairs with a contrast checker (aim for at least 4.5:1 for normal text, 3:1 for large text under WCAG AA), then darken text or lighten backgrounds in your CSS or theme settings. Re-test every changed pair and re-scan.
Low contrast — light grey text on white, or white text on pale buttons — is hard to read for many users and fails WCAG. Fixing it is usually a CSS or theme colour tweak once you know which pairs fail.
Check your website
See how your site handles how to fix poor colour contrast — free, no account needed.
Business impact
Poor contrast makes your site harder to use for older visitors, mobile users in bright sunlight, and millions with low vision. It is one of the most common WCAG failures and a straightforward compliance fix.
Why this happens
Contrast ratio compares relative luminance of text and background. WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). Failures often come from: brand colours chosen for aesthetics only; placeholder text styling; button hover states; text over images without overlay; and disabled form fields styled too faint.
How to confirm the issue
Manually: use WebAIM Contrast Checker or browser DevTools → Accessibility pane → inspect contrast ratios.
With Plexa Trust: look for "Possible Low Color Contrast"; re-scan after CSS/theme updates.
Step-by-step fix
Run a contrast checker on homepage, forms, and key landing pages.
List every failing foreground/background pair.
Adjust colours in theme settings or CSS variables.
Fix buttons, links, footer text, and form placeholders — not only body copy.
Add a semi-transparent overlay when text sits on photos.
Re-test each changed pair and re-scan.
Platform-specific fixes
WordPress
Adjust theme colours in Customizer → Colors, or edit theme CSS variables.
Check button and link colours separately from body text.
Block editor: verify custom colour picks meet contrast minimums.
Shopify
Theme settings → Colors — adjust text, background, and button colours.
Test product cards and sale badges — often low contrast.
Custom CSS
Update CSS custom properties (--text-color, --link-color, etc.).
Use oklch() or darker hex values until checker passes 4.5:1.
Tailwind / design systems
Replace text-gray-400 on white with text-gray-600 or darker.
Document accessible colour pairs in your design tokens.
How to verify the fix
Test contrast at the design stage, not after launch.
Check focus states and hover states — not only default state.
WCAG AA (4.5:1) is the standard most organisations target.
Common mistakes
Light grey placeholder text (#999 on white) — almost always fails.
White text on light hero images without a dark overlay.
Fixing body text but leaving footer and form labels failing.
Frequently asked questions
What contrast ratio do I need?
WCAG AA: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). AAA is stricter (7:1).
How do I check contrast?
WebAIM Contrast Checker, Stark plugin, or Chrome DevTools accessibility inspection.
Do links need higher contrast than body text?
Links must meet the same minimum ratio against their background. Do not rely on colour alone to identify links — use underlines too.
What about text on images?
Measure contrast against the part of the image behind the text, or add a solid/gradient overlay.
Can I use brand colours that fail?
Adjust shade (darker/lighter) until the ratio passes while staying on-brand.
Do icons need contrast?
Interactive icons need 3:1 against adjacent colours. Decorative icons are exempt.
Is contrast a legal requirement?
In many jurisdictions, yes — accessibility laws reference WCAG as the standard.
How do I confirm it worked?
Contrast checker passes on all pairs; Plexa Trust finding clears on re-scan.
Think you've fixed it?
Run a free scan to verify the issue is resolved. Upgrade to Pro on Plexa Trust for the full audit, monitoring alerts, and score history.
Verify with a free scan