How to Fix Failing WCAG Contrast Without Changing Your Brand Color

Most designers discover the problem the same way I did: a contrast checker turns red and the dev team comes back asking for a "more accessible color." The instinct is to pick a new color. That's almost always the wrong move.

Your brand color carries recognition, emotional weight, and years of consistency. You don't need to replace it — you need to understand which property is actually failing, and adjust only that.

Why Contrast Ratios Fail (and What the Numbers Actually Mean)

WCAG 2.1 requires a contrast ratio of 4.5:1 between normal body text and its background. Large text (18pt or 14pt bold) gets a lighter threshold of 3:1. UI components like button outlines and icons also need 3:1. These are Level AA requirements — the standard most organizations aim to meet.

The ratio is calculated from relative luminance, a measure of how much light a color reflects. White is 1.0, black is 0.0, and everything else sits between. A contrast ratio is just the brighter luminance divided by the darker one, plus 0.05 on each side to account for screen glare.

Here's the key insight: hue (the color family) and saturation (the intensity) have almost no direct effect on luminance. Lightness does. A mid-range green like Tailwind's #22c55e has a luminance of about 0.41 — close to the midpoint of the scale. Pair it with white text (#ffffff, luminance 1.0) and you get a contrast ratio of roughly 2.26:1. That fails AA by nearly half.

The color isn't "wrong." Its lightness is wrong for that pairing.

The Shade-Shift Method: Adjust Lightness, Keep the Hue

When you talk to most brand guidelines, the protected assets are the hue angle and saturation — the identity of the color. Lightness is the variable you control to hit contrast targets without touching either of those.

The mechanics are simple in HSL. For a brand color like #22c55e (HSL: 142°, 69%, 56%), white text doesn't pass. But shift lightness down to 38% and you get approximately #15803d — still unmistakably green, same family, same vibrancy reading. White text on this value hits 5.05:1, passing AA with room to spare.

The brand color doesn't disappear. It stays in the logo, the hero background, the marketing graphics. What you're changing is the functional token used for interactive elements where text must be readable. Call it --color-brand-action or brand-700 — designers use this naming convention specifically to distinguish "the brand color" from "the shade we use for text-bearing contexts."

I tested this with a fintech client whose brand guidelines mandated a specific teal (#009B77). The marketing team understandably balked when I said it fails WCAG on white buttons. Running it through Toolora's Color Contrast Checker showed 2.73:1 — failing. But the same hue and saturation at lightness 27% gave 7.1:1 and looked identical to the brand color on any non-calibrated monitor. We changed one token. Nobody noticed.

A Real Example: Tailwind Green-500 vs Green-700

Here's the exact numbers so you can follow along:

Input:

Background: #22c55e (Tailwind green-500, brand color)
Text: #ffffff (white)

Output:

Relative luminance of #22c55e: 0.4141
Relative luminance of #ffffff: 1.0
Contrast ratio: (1.05) / (0.4641) = 2.26:1 — fails AA

Fix: shift to green-700

Background: #15803d
Text: #ffffff

Output after fix:

Relative luminance of #15803d: 0.158
Contrast ratio: (1.05) / (0.208) = 5.05:1 — passes AA ✓

The hue stays at 142°. The saturation barely moves (69% → 68%). Only the lightness drops from 56% to 38%. On a product page, these two greens look like the same brand color — one is just noticeably darker, which actually reads as "more serious and trustworthy" to users rather than "different company."

To generate the exact shade you need for your own brand color, use Toolora's Color Shades Generator — paste your hex, and it produces the full lightness range so you can pick the shade that passes while staying close to the original.

When to Switch to Dark Text Instead

Not every brand color sits on a light background. If your button background is a mid-tone (luminance between 0.18 and 0.60), you have a choice: darken the background for white text, or lighten the background and use black text.

Brands with lighter signature colors often find the second path preserves more of the original hue's feel. A butter yellow like #FDE68A needs a very dark background shade to carry white text — and at that point it no longer reads as yellow at all. Using #1a1a1a text on the original yellow background gives a contrast of ~9:1 while keeping the color sunny and recognizable.

The rule of thumb: if the brand color's HSL lightness is above 60%, go to dark text before you go darker on the background. If lightness is below 40%, go lighter on the background or switch to white text. The danger zone is 40%–60%, where you'll need to test both options — the contrast checker accepts any combination and reports the exact ratio in under a second.

What to Tell the Brand Team

The reframe that works: you are not changing the brand color. You are creating a usage token — a specific shade intended for contexts where accessibility matters — and it is explicitly derived from the brand color.

Most mature design systems (Material Design, IBM Carbon, Radix) do this by default. They define a color palette with 9–12 steps of lightness and specify which step to use for backgrounds, borders, or text. The brand color is usually the "400" or "500" step. Accessible button states use "600" or "700." The logo still uses "500."

Document the token this way: "Brand Green (Identity): #22c55e / Brand Green (Action): #15803d, WCAG AA compliant." No designer needs to approve #15803d as a brand color — it's an implementation detail. They just need to confirm the hue family is preserved, and it is.

Checking Your Fix in Practice

Once you settle on the adjusted shade, verify three things before shipping:

Normal text on the new background — must hit 4.5:1
Large text (anything ≥18pt or ≥14pt bold) — must hit 3:1
Adjacent borders or icons — any decorative element next to text needs 3:1 against its own background

Paste all three pairs into a contrast checker. If any fails, adjust lightness by another 5–10 percentage points in HSL and re-check. The adjustment is always in one direction (darker for light text, lighter for dark text), and each step moves the ratio meaningfully.

The fix is almost always smaller than the brand team fears. A 10-point lightness shift is invisible to most users and invisible to most brand guidelines. The accessibility win, though, is permanent.

Made by Toolora · Updated 2026-06-15