How to Fix Low Color Contrast

Make text meet the WCAG 4.5:1 contrast ratio so it's readable for everyone.

Medium Medium Impact 20 min

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

Check each text/background pair against the 4.5:1 threshold (3:1 for 18px+/bold).

Darken or lighten

Adjust the text or background colour until it passes — usually darkening grey body text is enough.

Code Fix

css

Before (broken)

.muted { color: #b9b9b9; background: #ffffff; }  /* 1.9:1 — fails */

After (fixed)

.muted { color: #595959; background: #ffffff; }  /* 7:1 — passes AA & AAA */

Platform-Specific Instructions

WordPress

Adjust colours in the theme customizer / global styles; watch out for low-contrast button and placeholder text.

Next.js

Fix the token values in your design system / Tailwind config so the whole app inherits passing colours.

Check with our tool

Contrast Ratio Checker

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit