Colour is often the first thing people remember about a brand — and the first thing that goes wrong on a website. A palette that looks stunning on a mood board can turn into pale grey text nobody can read. Here’s how we build palettes that look good and work.
Low contrast is the web’s most common accessibility failure
WebAIM tests the home pages of the top one million websites every year. In its 2026 report, 83.9% of home pages had low-contrast text — by far the most common problem it found.
Source: WebAIM Million, 2026 report.
The contrast rules in one minute
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background:
- 4.5 : 1 for normal body text.
- 3 : 1 for large text (about 24px regular, or 19px bold and up).
- 3 : 1 for icons, input borders and other essential graphics.
Pure black on white is 21 : 1. A light grey like #999 on white is only about 2.8 : 1 — it fails for body text.
A simple palette structure that always works
- One hero colour. This is your brand. Use it for buttons, links and key highlights — not for long paragraphs.
- One or two accents. For badges, charts and small moments of delight.
- A neutral scale. Five to seven greys (or tinted neutrals) from near-white to near-black. Most of your site is actually these.
- Feedback colours. Green, amber and red for success, warnings and errors.
Make your brand colour work on buttons
Bright brand colours — yellows, light blues, lime greens — often fail contrast with white text. You don’t have to change your brand. Instead:
- Use dark text on the bright colour, or
- Create a deeper shade of the same hue just for buttons and links, and keep the bright version for backgrounds and illustrations.
Don’t rely on colour alone
About one in twelve men has some form of colour vision deficiency. Error messages, chart series and “in stock / out of stock” labels should use text or icons as well as colour, so the meaning survives for everyone.
Write it down
Once your palette is set, record each colour’s hex value, its job, and which text colours pass on top of it. That one page saves hours of guessing later and keeps your website, socials and print consistent. Our brand identity service delivers exactly this as part of every brand kit.
Frequently asked questions
How many colours should a brand have?
One main colour, one or two accents and a neutral scale is plenty. More than that gets hard to use consistently.
Can I keep a light brand colour if it fails contrast?
Yes. Use it for backgrounds, shapes and illustrations, and pair it with dark text — or add a deeper shade of it for text and buttons.
Does dark mode need its own palette?
Usually. Colours that pass on white often need lighter or less saturated versions to pass, and look comfortable, on dark backgrounds.
Tailor Themes Team
Sahar Noori
WebTailor Studio
