You ran a contrast check and your site failed. Red badges everywhere. Maybe it was an automated scan. Maybe a client flagged it. Maybe you just had a sinking feeling looking at that light gray text on your white background.
Now what?
Fixing contrast issues isn't hard — but if you've never done it before, the list of violations can feel overwhelming. This guide walks you through exactly what to do, in order, from worst violation to final verification. No design degree or coding experience required.
Step 1: Find All the Problems First
Don't fix one element at a time. That's how you miss things. Scan the entire page first and get the full list.
The manual way (slow): Open Chrome DevTools, inspect each text element, click the color swatch, read the contrast ratio. Repeat 50-100 times. Miss half the elements because you didn't think to check the cookie banner text or the footer links.
The one-click way (fast): Install the ColorContrast Chrome Extension, click scan, and get a prioritized list of every violation on the page in 2-4 seconds. Each entry shows the exact text, its computed color, the background color, and the contrast ratio. Click any violation to jump to it on the page.
Step 2: Sort by Severity (Fix These First)
Not all contrast failures are equally urgent. Here's the priority order:
🔴 Critical — fix today: Body text, navigation links, button text, form labels, error messages. These are the elements users must read to use your site. If your main navigation or checkout button has low contrast, you're losing users and inviting lawsuits.
🟠 High — fix this week: Headings, card titles, pricing numbers, table headers. Users can technically navigate without these, but they severely degrade the experience and are still covered by WCAG.
🟡 Medium — fix this sprint: Footer text, metadata (dates, tags, captions), secondary buttons. Less urgent but still required for full compliance.
⚪ Low — document and schedule: Decorative text, disabled elements, incidental text in images. WCAG exempts some of these, but document why they're exempt.
Step 3: Choose a Fix Strategy
For each failing element, you have four options. Pick the one that preserves your design while meeting the threshold.
Strategy A: Darken the Text (Easiest, Works 90% of the Time)
Most contrast failures are light gray text on a white background. The fix: make the text darker.
Before: #999999 on white — 2.8:1 ❌
After: #595959 on white — 6.5:1 ✅
Find every contrast issue on your site in one click. Free Chrome extension — scan, fix, verify. No account needed.
Scan Your Site NowSame color family, same visual feel, but now readable. The rule of thumb: if your text is a shade of gray on a white background, it needs to be at least #767676 to hit 4.5:1. That's noticeably darker than what most designers pick.
Our Color Contrast Checker shows you the exact ratio as you adjust. Type in your current text color, then adjust the lightness until the AA badge turns green.
Strategy B: Adjust the Brand Color (When You Can't Just Darken)
Brand colors often fail as text — especially medium blues, warm oranges, and soft greens. A vibrant #3B82F6 blue looks great as a logo but disappears as 14px text.
The fix: keep the same hue, but create a darker 'text-safe' variant of your brand color for use on light backgrounds.
Before: #3B82F6 (brand blue) on white — 4.6:1 ⚠️ borderline
After: #1A56A0 (text-safe blue) on white — 6.5:1 ✅
It still reads as blue. It still feels like your brand. But now it's readable. Most design systems have both a 'brand' palette (for logos, large graphics) and a 'UI' palette (for text, buttons). You're adding to the UI palette.
Use our Brand Color Checker to audit your entire brand palette and generate text-safe variants for every color.
Strategy C: Make the Text Bigger (When You're Close to Passing)
WCAG has two thresholds: 4.5:1 for normal text, but only 3:1 for large text (24px+ or 19px+bold). If your color combination is close — say 4.2:1 — you might be able to qualify under the large text threshold by increasing the font size.
Before: 16px text at 4.2:1 — fails AA ❌
After: 24px text at 4.2:1 — passes AA for large text ✅
This is a design decision, not a cheat. Large text genuinely is easier to read at lower contrast because of its physical size. But don't make body text 24px just to avoid fixing the color — that creates other readability problems. Reserve this strategy for headings and hero text.
Strategy D: Change the Background (Last Resort)
If you can't change the text color (strict brand guidelines) and can't make it bigger (it's body copy), change the background.
Before: Brand green text on white — 3.8:1 ❌
After: Brand green text on light green tint (#E8F5E9) — 4.6:1 ✅
The background doesn't need to be pure white. A subtle tint adds personality and can improve contrast. But use this sparingly — inconsistent backgrounds across a page look amateurish.
Step 4: Don't Forget Interactive States
Your scan probably checked the default state of every element. It didn't check hover, focus, active, or disabled states. These need separate verification.
Step 5: Verify the Fix (Don't Trust Your Eyes)
After changing a color, verify it. Don't eyeball it. Your monitor brightness, ambient lighting, and personal vision all affect perception. What looks 'fine' to you may fail the WCAG formula.
Fastest way: Copy your new hex code, paste it into the Color Contrast Checker, enter the background color, and confirm the AA badge is green.
Most thorough: Re-scan the page with the Chrome Extension to confirm the violation is gone and no new ones appeared.
Step 6: Document What You Fixed
Keep a simple log of: which pages were audited, how many violations were found and fixed, and what tool was used. This serves two purposes: it demonstrates good-faith effort if your site ever faces an accessibility complaint, and it gives the next person auditing your site a baseline.
The Quick-Start Checklist
If you have 30 minutes right now, here's the shortest path to a more accessible site:
1. Install the free Chrome extension
2. Scan your homepage
3. Fix every critical (🔴) violation — body text, nav links, buttons
4. Re-scan to verify
5. Repeat for your top 3 pages (pricing, signup, contact)
An hour of contrast fixes is the highest-ROI accessibility investment you can make. Most lawsuits cite contrast failures. Most contrast failures take 5 seconds to fix. Close the gap.