Checking a Brand Color Pair Against WCAG

Checking a Brand Color Pair Against WCAG AA Before You Lock It In

A brand color usually gets chosen in a logo file or a mood board long before anyone checks whether it can carry body text or button labels without failing accessibility review. That gap between this is our blue and this blue passes WCAG at 16px is exactly where design systems run into trouble months after launch, when a component built around the brand color turns out to fail a contrast audit.¹ Testing a candidate brand pair here, before it gets baked into buttons, links, and headings across a whole product, catches the problem while it's still a five-minute color adjustment rather than a re-brand.

Why a brand color that looks bold can still fail contrast

Saturated brand colors, the kind that make a logo pop on a business card, often sit in a middle brightness range that neither reads as clearly light nor clearly dark. That middle ground is precisely where contrast failures cluster, because a color that's too bright to work well against white and too dark to work well against black ends up compromised against both.

The saturation trap: vivid does not mean high contrast

A vivid blue like #2563eb looks confident and energetic on a white background, and it does clear AA's 4.5:1 threshold for normal text, but it falls short of AAA's stricter 7:1 bar.² A lighter, equally on-brand blue like #93c5fd can look almost identical in a logo lockup yet fail even the more forgiving large-text threshold against the same white background, because a small shift in lightness moves the ratio far more than it moves the color's apparent brand identity.

That's the trap: two shades of the same brand hue can sit on opposite sides of a pass or fail line while looking, to a design team eyeballing a mood board, like minor variations on the same color. Checking the exact hex value your team plans to ship, rather than judging the palette by eye, is the only way to know for certain which side of that line you landed on.

Keeping the hue while fixing the ratio

When a brand color fails, the instinct to just pick a completely different color is usually the wrong one, since it throws away the brand recognition the color exists to build. What you actually need is the smallest possible nudge that gets the same color over the line, not a replacement that starts the approval process over from scratch.

Auto-Fix solves the narrower problem instead: it searches for the closest lightness adjustment in OKLab space that reaches your target ratio while holding hue and chroma constant,³ so a failing brand blue comes back as a lighter or darker blue, not a color a brand guideline would reject. That's usually the difference between a fix your brand team signs off on in minutes and one that reopens a debate about the whole palette.

Locking in a pair once it passes, and sharing it with your team

Once a brand pair clears the tier you need, whether that's AA for general use or AAA for a long-form reading context,⁴ the Share button turns your exact foreground and background into a link anyone on your team can open to see the same result. No screenshot, spreadsheet cell, or verbal description of a color has to stand in for the real, checkable value again.

Documenting the decision instead of re-litigating it later

That link is worth attaching directly to the design system documentation or the ticket where the color got approved, since it saves the next person from re-deriving the ratio from scratch or trusting a screenshot that might not reflect the final hex value.⁵ Anyone who opens it later sees the live, current result rather than a snapshot that could have drifted out of date.

A shared, bookmarkable link that shows the exact pass or fail state removes the ambiguity that usually creeps in between a color being approved in a design file and it actually shipping in production CSS, and it gives future reviewers a live result instead of a static image that could quietly go stale.

When to use this

Use this guide before a brand color moves from a logo file into production CSS, whenever you need to confirm the exact hex pair clears WCAG rather than approving a palette by eye.

Examples

Foreground #2563eb, background #ffffff

The badge shows a clear AA pass for normal text, just short of AAA, giving you a real number to attach to the design decision instead of a guess.

Foreground #93c5fd, background #ffffff

Every tier fails here, including the more forgiving large-text threshold, which is exactly the kind of near-miss a mood board comparison would never catch.