How to Fix Low Color Contrast
Make text meet the WCAG 4.5:1 contrast ratio so it's readable for everyone.
Low colour contrast means text does not stand out enough from its background to be read comfortably. WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text and interface components. Measure the pair, then darken the text or lighten the background until it passes — usually a token change rather than a redesign.
Why It Matters
Light-grey text on white looks elegant in a design tool but is unreadable for low-vision users and in sunlight. WCAG requires a contrast ratio of at least 4.5:1 for normal text (3:1 for large text). It's a top accessibility-audit failure and an easy CSS fix.
How to Fix
Measure the failing pairs
Darken or lighten
Code Fix
css.muted { color: #b9b9b9; background: #ffffff; } /* 1.9:1 — fails */.muted { color: #595959; background: #ffffff; } /* 7:1 — passes AA & AAA */Platform-Specific Instructions
Adjust colours in the theme customizer / global styles; watch out for low-contrast button and placeholder text.
Fix the token values in your design system / Tailwind config so the whole app inherits passing colours.
Fixed that one.
Now find the rest.
A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.
Run a free audit