Designing Accessible Color Systems

Contrast Is a Requirement, Not a Suggestion

WCAG 2.2 AA asks for a 4.5:1 contrast ratio for body text and 3:1 for large text and interface elements. Those numbers are not red tape — they are the difference between a site everyone can read and one that quietly excludes people with low vision, or anyone outdoors in bright sun. We check every text and background pairing against them before a design ships.

The trap is treating accessibility as a final-step audit. By then the brand palette is locked and the only fixes feel like compromises. Build contrast into the system from the start and you rarely have to choose between accessible and beautiful.

Tokens Keep It Honest

Define colour once as named tokens — background, surface, text, accent — and reference those everywhere instead of one-off hex values. When a token pair is verified accessible, every component that uses it inherits that guarantee, and dark mode becomes a swap of values rather than a rebuild.

Don’t Rely on Colour Alone

Colour should never be the only way to convey meaning. Pair it with icons, labels, underlines or shape so that a link, an error, or a required field is obvious to someone who cannot distinguish red from green. Accessible colour systems communicate in more than one channel at once.