Contrast on brand colours

Your logo colour fails AA on white — almost everyone's does. Keeping personality inside contrast: brand colours for surfaces and large elements, tuned ink variants for text, and the token pattern that makes it automatic.

Intermediate2 min read (computed · recorded 9)updated 2026-09-10a11ycontrastbrandcolour

The hard truth about brand palettes

Brand colours are chosen for distinctiveness, memorability and print — rarely for luminance. Run a typical logo blue or red against white and you land between 3:1 and 4.4:1: fine for large type and UI component boundaries (AA large needs 3:1), failing for body copy (AA needs 4.5:1). The result is every marketing site you have ever squinted at: brand-coloured links that look fine and fail their users at exactly the moment they need them.

brand-tokens.css

:root {
  --brand:      #2563c9;   /* the logo — surfaces, large type */
  --brand-ink:  #16336b;   /* text variant, tuned to 7:1 on white */
  --brand-tint: #e8effb;   /* background wash — passes as a surface */
}
/* rule: text below 24px uses --brand-ink, never --brand.
   --brand on white stays for icons, borders, large display. */

The three moves that keep the personality

Tune, don't abandon: the text variant of a brand colour is the same hue, shifted in lightness — the personality survives because hue carries identity; luminance carries legibility.
Spend the strong colour where AA is lower: large display type, icons, borders, and filled buttons with white text pass at 3:1 — the brand colour gets the loud moments, the tuned variant gets the words.
White on brand is a separate calculation: a filled brand button needs white text at 4.5:1 — many logo colours fail even that, which is why so many buttons use a darkened hover state that is actually the accessible resting state.
On dark surfaces the math flips: brand colours that glow on dark often fail against it differently — every dark-mode pair needs its own audit, because luminance contrast is pair-specific.

The token pattern that makes it automatic

Encode the decision in the token layer and designers stop re-arguing it per screen: --brand for surfaces and large display, --brand-ink for text, --brand-tint for backgrounds. The rule lives in one comment — 'text below 24px never uses --brand' — and the audit becomes a search for --brand used on small text, which takes a developer ten seconds instead of a designer ten meetings.

Luminance, computed →