Home > Resources > Design & Print > Choosing accessible brand colours
Choosing accessible brand colours
Choose colour combinations that make your words, actions and information easier to see and understand.
Test combinations, not individual colours
A colour is not accessible on its own. What matters is how it works with the background, the text size and the purpose of the element.
White on pale peach
Low contrast
Near-black on pale peach
Stronger contrast
Keep the soft background. Choose a text colour with enough contrast.
Know the digital contrast basics
WCAG 2.2 Level AA sets minimum contrast requirements for web content.
| Element | Minimum contrast |
| Normal text | 4.5:1 |
| Large text | 3:1 |
| Essential visual information in controls and graphics | 3:1 against adjacent colours |
Large text means at least 18 pt regular or 14 pt bold, approximately 24 px or 18.7 px respectively on the web.
Exceptions apply. A contrast pass alone does not make an entire design accessible.
Give your palette clear roles
Text colours
Choose dependable combinations for headings, paragraphs and small details.
Background colours
Use lighter shades for panels and surfaces, then test the text placed on them.
Accent colours
Use for emphasis where appropriate. Check buttons, links and interactive states separately.
Never rely on colour alone
Use labels, patterns or symbols to distinguish chart series and status information.
View the guide
Underline links so colour is not the only clue.
Error: enter your email address
Explain errors in words, with an additional visual cue.
Check the design where people use it
| Text on images | Test the background behind the text. A solid panel can make contrast more predictable. |
| Buttons & form fields | Check labels, boundaries and important visual states against their surroundings. |
| Small or thin type | Passing a ratio is only a starting point. Check readability at the actual size. |
| Print materials | Review a printed proof. Paper, ink, lighting and text size affect readability; web contrast ratios are not a print certification. |
Record approved combinations
Add a small pairing guide to your brand kit so people know which text and background combinations to use.
| Record | Why it helps |
|---|---|
| Text and background HEX values | Makes the pairing repeatable |
| Measured contrast and permitted use | Clarifies where it meets the relevant requirement |
| Examples of links and buttons | Shows how the palette works in practice |
Before you approve the palette
Reference: W3C WCAG 2.2 guidance on contrast and use of colour.
Test each intended text and background pairing
Check meaning is clear without colour alone
Review real content at its intended size
Document the combinations people should use
related guides
What belongs in a brand kit
View guide
A0 to A6 print sizes explained
View guide
Let’s work together on your
next web project
Every project is a journey, and we are here to guide you every step of the way.