Colour is the first signal your brain processes on a web page. Before reading a word, your visitor already has an impression. That impression bears on their trust, their willingness to stay, and their inclination to click. Here is how to choose and use your colours strategically to convert more.
What your palette communicates before you speak
Research from Nielsen Norman Group shows that colour improves brand recognition by 80% and cuts the time needed to scan a page by 40%. Every colour triggers automatic associations: blue evokes trust, green safety and growth, red urgency. HubSpot has documented how those associations vary by sector. A colour that performs for a fintech can be counterproductive for a wellbeing brand.
The colour of your calls to action: contrast above all
There is no magic colour for buttons. What converts is contrast. Your button has to cut through visually against the rest of your page. If your site is mostly blue, an orange or green button will be more effective than a dark blue one. That simple principle is ignored on most small company sites.
Golden rule: the colour of your call-to-action button has to be unique on your page. It should appear nowhere else in your design, except on other action links. Your visitors then associate that colour with the action to take, automatically.
The 5 colour rules for a site that converts
- A maximum of 3 colours in your guidelines: one primary, one secondary, one accent reserved for calls to action
- A light background and dark text for body copy: a black background with white text tires the eye over long passages
- Red only for real alerts and urgency, never for your main buttons
- Test your colours on both light and dark backgrounds before approving your guidelines
- Simulate how it renders for colour-blind users before publishing: around 8% of men are affected
Contrast and accessibility: the standards to respect
The WCAG 2.1 recommendations set a minimum contrast ratio between text and its background. For normal text, that ratio has to be at least 4.5:1. For large headings, at least 3:1. To check your combinations in real time, the WebAIM Contrast Checker is the reference tool: free, instant, and used by most professional designers. The documentation on web.dev about colour contrast sets out each level of requirement with CSS examples you can apply directly to your project.
Insufficient contrast does not only affect people with low vision. In bright sunlight or on a dim screen, all your visitors suffer from it. Good contrast means legibility for everyone, in every circumstance.
Building your palette without starting from zero
To generate a harmonious palette in a few minutes, Coolors is the quickest tool: it proposes automatic combinations you refine colour by colour. To work on the relationships between shades with the colour wheel, Adobe Color lets you explore complementary, analogous and triadic harmonies, then export the hex codes straight into your project.
Measuring the impact of your colours on clicks
To see whether your visitors really click your calls to action or whether their eye stops elsewhere, install Microsoft Clarity (free). Heatmaps show you exactly where your audience interacts on your page. If your button does not concentrate the clicks, that is usually a colour or contrast problem, not a message problem. To test the impact of a new colour on your conversion rate, AB Tasty lets you launch an A/B test on your button colour in under an hour, without touching your code.
Where to start today
Take a screenshot of your homepage. Open it in an image editor and convert it to greyscale. If your call-to-action button is not immediately visible and distinct, your contrast is insufficient. That is the quickest test for identifying a colour problem before going further.
Colour is inseparable from typography in your site's visual experience. If your text remains hard to read despite good contrast, read the essential rules of web typography to fix size, line height and line length alongside your work on colour.