Colour pairings

Summary

The colour-pairings page: a large grid of predetermined two-tone cards, each pairing a foreground colour over a background and labelled with its colour-code combination, with an accessibility note that text pairings must hit a 6:1 contrast ratio.

Visual description

Standard layout: cream left column with section number "2.5.3 Colour pairings" and three short paragraphs on predetermined pairings, the 6:1 text contrast requirement, and a link to test contrast; navigation list lower-left with Colour bolded. The white panel is a wide grid (roughly five rows by sixteen columns) of square swatch cards. Each card is split into a top and bottom colour band with a small white pill in the middle naming the pair (e.g. "2A/1A", "5A/2C", "10A/7D"). The combinations range across the brand's families, from bright orange-on-mint and aubergine-on-lavender to many neutrals and a row of colour-over-black cards along the bottom. The cream footer carries copyright, document title, and "Version 01".

Key takeaway

Pre-approving colour combinations so designers do not have to judge pairings themselves: every card is a sanctioned foreground/background combo named by code, which makes "what goes with what" a lookup rather than a decision. Folding accessibility in (the explicit 6:1 text-contrast rule and a test link) keeps the system usable and compliant.

Reuse notes

A reusable pairings page for any brand with a large palette and a need to control combinations across marketing. The code-named two-tone card grid is directly liftable. State the contrast threshold and which pairings are text-safe so the page serves both decorative and typographic use. Pairs with the extended palette (the source colours) and the sub-palettes page.