Colour is the decision people have the strongest opinions about and the least framework for. A palette is not a set of colours you like, it is a system with roles.
Build a palette around roles rather than favourites: one primary for actions, one or two neutrals for backgrounds and text, and one accent used sparingly. Follow roughly a 60-30-10 split. Check every text and background pairing against a 4.5:1 contrast ratio, because a palette that fails accessibility fails regardless of how it looks.
Colour has roles, not just values
| Role | Purpose | How much |
|---|---|---|
| Dominant | Backgrounds and large surfaces | About 60 percent |
| Secondary | Sections, cards, supporting areas | About 30 percent |
| Accent | Buttons and things that must be noticed | About 10 percent or less |
| Text | Body and headings | High contrast against dominant |
| Semantic | Success, warning, error | Reserved, never decorative |
The most common mistake is using the accent colour everywhere. If your call to action colour also appears in headings, borders and icons, it stops signalling action.
Building a palette
- Start with one colour that fits your brand and audience.
- Generate tints and shades of it so you have a range rather than one flat value.
- Choose neutrals that are not pure grey. A neutral with a slight hint of your primary looks considered.
- Add one accent that contrasts strongly with the primary.
- Define semantic colours for success, warning and error.
- Test every pairing for contrast before committing.
Contrast is not optional
- Body text needs 4.5:1 against its background.
- Large text, roughly 24 pixels or 19 pixels bold, needs 3:1.
- Interactive elements and their focus states need 3:1.
- Do not use colour alone to convey meaning, since colour-blind users will miss it.
- Light grey text on white fails constantly and is one of the most common accessibility issues we find.
Around one in twelve men has some colour vision deficiency. A design that relies on red versus green to communicate anything important excludes them entirely.
Dark mode
Do not simply invert. Pure white text on pure black causes halation and eye strain. Use a very dark grey background and slightly softened white text.
Colours also need adjusting: saturated colours that work on white often look harsh on dark. Most systems desaturate and lighten their palette for dark themes rather than reusing the same values.
Frequently asked questions
How many colours should a website use?
One primary, one or two neutrals, and one accent is enough for most sites, plus semantic colours for states. Palettes with five competing colours tend to look unresolved because nothing establishes hierarchy.
What is the 60-30-10 rule?
A rough guide to proportion: 60 percent dominant colour, 30 percent secondary, 10 percent accent. It keeps the accent rare enough to still draw attention, which is the entire point of having one.
What contrast ratio do I need?
4.5:1 for normal body text and 3:1 for large text and interactive elements, under WCAG AA. Free checkers will tell you instantly. Light grey on white is the most common failure and it is usually a design preference rather than a decision.
Should my website have dark mode?
Only if you will maintain it properly. A poorly executed dark mode with unreadable contrast is worse than none. If you build it, adjust the palette rather than inverting, and test every component in both themes.
Do colours affect conversion?
Contrast does. A button that stands out clearly from its surroundings gets clicked more than one that blends in. The specific hue matters far less than most articles claim; there is no universally best button colour.