Skip to main content
SlapMyWeb
Slap a site

Accessibility fix

How to Fix Low Color Contrast

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

Difficulty
Medium
Impact
Medium
Time
20 min

Before

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

After

.muted { color: #595959; background: #ffffff; }  /* 7:1: passes AA & AAA */
Before and after code for: How to Fix Low Color Contrast

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 it

  1. Measure the failing pairs

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

  2. Darken or lighten

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

The code

Beforecss
.muted { color: #b9b9b9; background: #ffffff; }  /* 1.9:1: fails */
Aftercss
.muted { color: #595959; background: #ffffff; }  /* 7:1: passes AA & AAA */

On your platform

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.

Sources

Check your site with our free tool

Contrast Ratio Checker

More fixes

Accessibility

How to Add Labels to Form Inputs

Associate a visible label with every input so screen-reader users can fill your forms.

Accessibility

How to Fix a Missing Lang Attribute

Declare the page's language so assistive technology pronounces it correctly.

Accessibility

How to Fix Tap Targets That Are Too Small

Make buttons and links big enough and far enough apart to hit on a phone.

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
Free foreverNo signupLive scan progress