Design & Colour
Accessible Colour Pair Generator
Paste a text colour and a background colour to see the contrast ratio and a pair that meets WCAG AA.
What makes a colour pair accessible?
Low contrast text is hard to read and fails common accessibility checks used by UK public sector and regulated teams. This tool helps you pick a foreground and background pair that clears typical contrast ratios for body or large text before you lock brand tokens into a design system. It does not replace a full accessibility audit — colour blindness simulations, focus rings, non-text contrast, charts and dark-mode variants need extra checks in the real UI. Use the result as a readable starting pair, then verify with your component library and browser zoom. British spelling of colour matches WCAG discussions you will see in UK teams and GDS-style guidance. Brand colours that fail on small text can often still appear in large headlines, decorative shapes or illustration, provided the reading text sits on a compliant surface. For layout crops that often sit beside brand colours, see aspect ratio and print size when assets move from screen to print.
Worked example
A mid-brand teal (#2A9D8F) on white passes comfortably for body text. The same teal on a pale mint background may fall below 4.5:1 for 16px body copy while still looking ‘fine’ to a designer with good vision. Darkening the teal or lightening the mint until the ratio clears AA is usually faster than arguing about taste. Large 24px bold headings may pass at 3:1 where body text would fail.
Limits and assumptions
Contrast maths assume sRGB and standard gamma; unusual colour spaces and transparent overlays need on-canvas measurement. Logo marks, icons and charts have separate non-text rules. Passing one pair does not prove the whole theme — check hover, disabled and error states too.
Frequently asked questions
What contrast ratio should I aim for?
WCAG AA commonly needs 4.5:1 for normal text and 3:1 for large text. AAA is stricter. Confirm against your target level and any client contract.
Does passing contrast mean the UI is accessible?
No. Motion, keyboard access, labels, alternatives and cognitive load matter too. Contrast is one necessary check.
Can I use brand colours that fail contrast?
Use them for decoration or large graphics; for small text, darken or lighten until the pair passes, or place text on a compliant surface.
How does dark mode change the pair?
Invert carefully — light text on dark backgrounds needs its own ratio check. Do not assume the light-mode pair flipped is enough.
Should I test with colour-blind simulators?
Yes after contrast passes. Pairing that meets ratio can still be hard to distinguish for some forms of colour vision deficiency.