How to Fix a Color Palette to Pass WCAG Contrast

You picked a brand color, dropped it in as button text on a light background, and it looks fine on your monitor. Then an accessibility audit — or a teammate with low vision — flags it as failing contrast, and now you’re stuck guessing which shade of the same color will actually pass without looking like a completely different brand.

This is where a lot of design systems quietly go wrong. Someone picks colors that look good together, ships them, and nobody checks the actual contrast ratio until a client, an auditor, or a screen-reader user runs into it. By then the color is baked into a logo, a button component, and six Figma files, and “just make it darker” isn’t as simple as it sounds if you still need it to read as the same brand color.

What WCAG contrast actually requires

The Web Content Accessibility Guidelines set numeric contrast ratio thresholds between text and its background, not vague guidance like “make sure it’s readable.” Regular text needs at least 4.5:1 for WCAG AA, large text (18pt+, or 14pt bold) needs 3:1, and AAA raises the bar further to 7:1 for regular text. These aren’t style opinions — they’re the numbers accessibility audits, legal compliance checklists, and browser dev tools all check against.

The ratio is calculated from the relative luminance of both colors, which is why two pairs that look similarly “light on dark” to your eye can produce very different numbers. A pale gray on white can fail badly even though it looks perfectly legible to someone with typical vision.

Why people get stuck here

• The failing color is intentional. It’s usually a brand color, not a random pick, so “just pick a different color” isn’t a real option — you need the closest passing shade of the same color.
• Manual math is tedious. Calculating relative luminance and contrast ratio by hand for every text/background pair in a palette isn’t something most designers want to do per component.
• A pass on one background doesn’t transfer. A blue that passes on white can fail on your app’s light-gray card background, so you need to check real pairs, not colors in isolation.
• Automated fixes overshoot. Some tools “fix” a failing pair by swapping in a generic dark gray, losing the color identity you were trying to keep.

What a good contrast fix looks like

Same-hue correction, not a random swap

If your brand blue fails, the fix should still be recognizably blue — just adjusted in lightness until it clears the ratio. A tool that swaps in unrelated colors to “solve” the number defeats the point of having a palette at all.

The exact ratio, not a pass/fail badge

A simple “pass/fail” label isn’t enough context to make a design decision. Knowing you’re at 3.8:1 and need 4.5:1 tells you how much room you have — useful when you’re choosing between a small tweak and a bigger one.

Works for both AA and large-text rules

Since large text and regular text have different thresholds, a useful checker should let you check against the right one for how the text is actually used — a big heading doesn’t need the same ratio as body copy.

Common mistakes to avoid

• Checking a color pair once at design time and never re-checking after a brand color gets tweaked later.
• Using a color picker’s “looks readable to me” judgment instead of the actual computed ratio — human eyes are bad at estimating contrast, especially at screen brightness extremes.
• Testing against white or black only, when the real background is a tinted card, gradient, or image overlay.
• Fixing text color but forgetting that icons, borders, and disabled-state text have their own (often lower) contrast requirements.
• Assuming a color that passes AA automatically passes AAA — it usually doesn’t, and AAA is sometimes a real requirement for government or healthcare sites.

How to do it with Accessible Palette Suggester

Online Tool Store’s Accessible Palette Suggester runs entirely in your browser — nothing about your palette gets uploaded anywhere.

1. Enter your text color and background color as hex values, or pick them visually.
2. See the exact computed contrast ratio next to the WCAG AA and AAA thresholds.
3. If the pair fails, get an automatic same-hue suggestion — a shade of your original color that clears the requirement instead of a random substitute.
4. Copy the corrected hex value straight into your design tool or CSS.

Because it works on the actual formula WCAG defines, you get a number you can put in an audit report, not just a visual guess.

Frequently asked questions

What’s the difference between WCAG AA and AAA?

AA is the more commonly required standard: 4.5:1 for regular text, 3:1 for large text. AAA is stricter, requiring 7:1 for regular text, and is typically only mandated for specific sectors like government or healthcare rather than general web design.

Does contrast checking apply to dark mode too?

Yes — the same ratio math applies regardless of which color is lighter. A dark-mode palette needs its own check, since a pair that passes in light mode won’t automatically pass once the background flips to a dark shade.

Will fixing contrast change how my brand color looks?

It can shift the lightness slightly, but a same-hue suggestion keeps the hue and saturation close to the original, so the color still reads as your brand — just adjusted enough to be legible for more readers.

Final thought

Contrast isn’t a subjective design call once you’re past the “does it look nice” stage — it’s a number, and either it clears the threshold or it doesn’t. Checking it early, on the actual background it’ll sit on, saves you from reworking a shipped component after an audit catches it.

Try the free Accessible Palette Suggester