Accessible pair

A version of a brand color whose lightness has been shifted just far enough — preserving hue and feel — that text rendered in it on a named background reaches the WCAG AA contrast threshold (4.5:1 for normal text). Two pairs are usually generated for each color: one on a light surface, one on a dark surface.

Why it matters

Brand teal looks great in the logo and unreadable as 14px body text on cream. Designing a usable system means knowing both the brand color *and* its accessible neighbor — and using the right one in each context. Brand Suite derives them automatically and exports both variants as CSS tokens.

Frequently asked

What is accessible pair?

Accessible pair is a version of a brand color whose lightness has been shifted just far enough — preserving hue and feel — that text rendered in it on a named background reaches the WCAG AA contrast threshold (4.5:1 for normal text). Two pairs are usually generated for each color: one on a light surface, one on a dark surface.

Why does accessible pair matter for a restaurant?

Brand teal looks great in the logo and unreadable as 14px body text on cream. Designing a usable system means knowing both the brand color *and* its accessible neighbor — and using the right one in each context. Brand Suite derives them automatically and exports both variants as CSS tokens.