How to Fix Color Contrast WCAG 2.2

Why this matters

Low contrast makes text unreadable for people with low vision, color blindness, or who are using their screen in bright sunlight. It is one of the most common WCAG violations and one of the easiest to fix. It also affects your SEO — Google measures page usability as a ranking factor.

Code examples

<p style="color: #999999; background: #ffffff;">This text fails — ratio is only 2.8:1</p>
<p style="color: #aaaaaa; background: #eeeeee;">This also fails — ratio is 1.9:1</p>

<p style="color: #595959; background: #ffffff;">This passes — ratio is 7:1</p>
<p style="color: #767676; background: #ffffff;">This passes AA — ratio is 4.54:1</p>

How to fix it — step by step

1. 1
   Use a contrast checker tool like WebAIM Contrast Checker to measure your current ratio
2. 2
   For body text, darken the text color until you reach at least 4.5:1 against the background
3. 3
   For large text (18px+ regular or 14px+ bold), you need at least 3:1
4. 4
   Common fix: change light gray text (#999) to dark gray (#595959) — this passes 7:1
5. 5
   Don't fix contrast by making backgrounds darker — that often breaks other elements
6. 6
   Check both light mode and dark mode if your site supports them

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.