How to Fix Colour Contrast Issues (WCAG 2.2)

Applies to: SC 1.4.3 Contrast (Minimum), Level AA · SC 1.4.11 Non-text Contrast, Level AA

Low-contrast text was the most common detected failure in the WebAIM Million 2026 (detected with WebAIM's WAVE tool), found on 83.9% of home pages (WebAIM).

The requirements

• Normal text: contrast ratio of at least 4.5:1 against its background.
• Large text (at least 18pt, or 14pt bold, which is roughly 24px / 18.66px bold): at least 3:1.
• UI components and meaningful graphics (input borders, focus indicators, icons that convey information): at least 3:1 against adjacent colours (SC 1.4.11).
• Exceptions: disabled controls, purely decorative text, logos/brand names, and incidental text in images (W3C Understanding 1.4.3).

How to fix

1. Find failures: run an automated scan, then check states that scanners often miss: hover/focus, text over images or gradients, placeholder text, and text shown only after interaction.
2. Measure: use a checker such as WebAIM Contrast Checker.
3. Fix at the token level: change the colour variable in the theme or design system rather than individual elements, so the fix applies everywhere.
4. Text over images: add a solid or semi-opaque overlay behind the text, or move the text off the image.
5. Re-test all states and both light and dark modes.

:root { --text-muted: #595959; } /* 7.0:1 on #fff; #999 is only ~2.8:1 */

CMS-specific steps

• WordPress (block themes): Appearance › Editor › Styles › Colors to change the palette globally. The block editor shows a contrast warning for some colour combinations, but don't rely on it alone. (Global Styles docs)
• Shopify: Online Store › Edit theme › Theme settings › Colors. Depending on your theme this holds a color palette (newer themes) or color schemes. Check every scheme or color override used by every section.
• Webflow: Edit the colour variables in the Variables panel (older global swatches now appear there), then check classes in the Style panel that override them.
• Squarespace (version 7.1): Site styles › Colors › Edit palette. Section colour themes can introduce new combinations, so check each theme you use.
• Wix: In the Wix Editor, Site Design › Color theme; in Wix Studio, Site Styles › Colors. Page backgrounds and sections with their own colours can introduce new combinations, so check each one.

Menu names can change between platform versions (steps checked October 2026). If a path doesn't match, check your platform's current help pages.

WordPress, Shopify, Webflow, Squarespace and Wix are trademarks of their respective owners. Glimscope is not affiliated with or endorsed by any of them.

What automated tools can and can't tell you: Automated checkers (including axe-core, which our monitor uses) can flag many instances of this issue, but they cannot judge everything. A human still has to check meaning and context. For scale: Deque reports that in its own sample of first-time audits, its automated tests found 57.38% of issues by volume (Deque report). That is Deque's figure for its sample, not a detection rate for any one tool, and it means a large share of issues still needs manual testing. Contrast of text over images and gradients is a common gap for automated tools. Automated tests find only some accessibility issues; manual testing is still required. Not legal advice.

Manual checklist

• Hover, focus, active, and visited states pass
• Text on images or video passes at its lowest-contrast point
• Focus indicators and input borders reach 3:1
• Information is not conveyed by colour alone (SC 1.4.1)