How to Fix Low Color Contrast

Low color contrast makes text hard to read for people with low vision, color vision deficiencies, or anyone using a screen in bright light. It's also one of the most frequently flagged issues in automated scans.

This guide is informational and not legal advice.

The required ratios

• Normal text: at least 4.5:1 against its background.
• Large text (18pt, or 14pt bold): at least 3:1.
• UI components and graphics: at least 3:1 for meaningful boundaries (WCAG 1.4.11).

How to fix it

1. Measure the current ratio

Use a contrast checker with the text color and the actual background behind it. Watch for text over images or gradients — the effective background varies.

2. Adjust the colors

Usually you darken text or lighten the background (or vice versa):

/* Before — ~3.1:1, fails AA for body text */
.note { color: #8a8a8a; background: #ffffff; }

/* After — ~5.7:1, passes AA */
.note { color: #595959; background: #ffffff; }

3. Don't forget hover, focus, and disabled states

A button that passes at rest can fail on hover. Check every interactive state.

4. Add a backdrop for text over images

If text sits on a photo, add a semi-transparent overlay or text shadow so the effective contrast stays high regardless of the image.

How to verify

Re-check each adjusted pair with a contrast tool and re-scan the page. Aim to clear the threshold with a little margin so future tweaks don't push you back under.