Colour in web design: how to choose a palette that converts

Colour psychology matters less than most articles claim, and contrast matters more. Colours carry loose associations (blue reads as dependable, green as natural or financial, red as urgent), but those associations change with culture, context and your sector, and no colour lifts conversions on its own. What reliably helps is a restrained palette, one accent colour kept for the actions you want people to take, and text and buttons with enough contrast to read on a phone in daylight. Below is the step-by-step method we use, the WCAG 2.2 contrast numbers you need to hit, and the mistakes we see most on UK small business sites.

What colour psychology gets right, and what it gets wrong

There is real research on colour and emotion. People do form an impression of a website in a fraction of a second, and colour is part of that. Colour also helps with recognition: customers remember a brand’s main colour long before they remember its logo.

Where it goes wrong is the leap from “blue suggests trust” to “make your site blue and you will sell more”. Popular infographics claim precise effects for each colour. We have not seen good evidence for most of them, and they ignore the obvious: a blue accountancy site in Leeds and a blue surf school in Cornwall send completely different signals because everything else on the page differs.

A more useful way to think about colour has three parts:

• **Fit.** Does the palette suit what you sell and who buys it? Pastel pink works for a bakery in Bath; it would make a commercial law firm in Birmingham look unserious.
• **Distinction.** Does it set you apart from the three competitors your customer will compare you with? If every gym in your city uses black and neon yellow, a different choice is itself a signal.
• **Function.** Can people read the text, find the buttons and understand errors? This is where most of the commercial value sits.

Common associations, with the caveats

Use this as a starting point for conversation, not a rulebook.

The principle that actually drives clicks: contrast and isolation

The most consistent finding in conversion work is not about which colour, but about difference. An item that looks unlike everything around it gets noticed (psychologists call this the isolation or Von Restorff effect). That is why the old “red button beat green button” tests produce contradictory results: the winning colour was usually the one that stood out from that particular page.

In practice:

• Choose one accent colour and keep it for primary actions only: Book now, Get a quote, Add to basket, Call us.
• Do not use the accent for headings, icons and decorative shapes as well. If everything is orange, nothing is.
• Secondary actions get a quieter style, such as an outline button.
• Make sure the accent contrasts with both the page background and its own text label.

A step-by-step method for choosing your palette

Step 1: Start from the brand you already have

If you have a logo, the palette starts there. If the logo colour is too light or too bright for buttons, keep it for the logo and pick a darker shade of the same hue for interface elements. Customers will still read it as your colour.

Step 2: Pick a primary, a set of neutrals and one accent

A website palette is smaller than most people expect:

• **Primary:** your main brand colour, used for the header, links and key highlights.
• **Neutrals:** four to six greys or warm off-whites for backgrounds, borders and body text. Pure black text on pure white is harsh on large screens; a very dark grey such as #333333 still gives a contrast ratio of about 12.6:1.
• **Accent:** one colour for primary actions, chosen to contrast with the primary.

Step 3: Add functional colours

You need a red for errors, a green for success and usually an amber for warnings. Keep them separate from your brand colours where you can, so a customer never confuses your branding with a failed payment message.

Step 4: Build tints and shades

Each colour needs a light and a dark version: a pale tint for backgrounds and hover states, a dark shade for text on light backgrounds. We define these as design tokens in the theme, so they can be changed in one place later.

Step 5: Check contrast before you fall in love

Check every text and background pair, every button and every form border with a contrast checker before design sign-off. It is far cheaper to adjust a shade on day three than to repaint a finished site.

Step 6: Test with real content on real phones

A palette that looks lovely on a mood board can fall apart with real photos, long headings and a cookie banner. Look at it outdoors on a mid-range Android phone with brightness turned down. That is how many of your customers will see it.

The accessibility rules you cannot ignore

Under the Equality Act 2010, service providers in the UK must make reasonable adjustments for disabled people, and a website is part of the service. The standard everyone measures against is WCAG 2.2 at level AA, which we build to on every template. Three of its rules are about colour.

Text contrast (WCAG 1.4.3)

Normal body text needs a contrast ratio of at least 4.5:1 against its background. Large text (roughly 24px regular or 19px bold and above) needs 3:1.

Non-text contrast (WCAG 1.4.11)

Buttons, form field borders, focus outlines and meaningful icons need at least 3:1 against what is next to them. Very light grey input borders on white are the classic failure.

Use of colour (WCAG 1.4.1)

Colour cannot be the only way information is shown. Links in body text need an underline or another visual cue, not just a different colour. Form errors need a message and an icon, not just a red border.

Here are some real ratios, calculated with the WCAG formula, for common choices against white:

The pattern is clear: bright, saturated mid-tones usually fail as text or as button backgrounds with white labels. The fix is rarely a different colour, just a darker shade of the same one.

Colour vision deficiency

According to the charity Colour Blind Awareness, about 1 in 12 men and 1 in 200 women in the UK have some form of colour vision deficiency, most often difficulty telling red from green. If your site uses red and green to mean “out of stock” and “in stock”, add text. Browser developer tools in Chrome and Firefox can simulate the common types, and we check key pages this way before launch. Our guide to website accessibility in the UK covers the wider legal picture.

Common colour mistakes on small business websites

• Light grey body text because it “looks elegant”. It looks elegant on a designer’s monitor and is hard work on a phone.
• White text on photos without an overlay, so headings disappear on the bright part of the image.
• Three or four accent colours, all used for buttons, so nothing stands out.
• Brand colour used for error messages, so customers miss them.
• Dark mode styles nobody tested, giving dark grey text on a black background.
• Links that look exactly like body text apart from the colour.
• A palette chosen from the logo file on screen, which looks different on the printed van livery, the shop sign and the website.

Does button colour matter at all?

It matters relative to the page, not in isolation. A button that stands out from its surroundings, reads clearly and says what will happen (“Get your free quote”, not “Submit”) will beat a beautifully coloured button that blends in. If you have enough traffic, A/B test it. Most small UK sites do not have enough visitors for a colour test to reach a reliable result within a reasonable time; for them, sound design principles and clear copy are a better bet than testing.

What a palette costs to get right

For most small businesses, palette and interface colour work is a modest part of a website project.

• On our fixed-price website packages, colour choices are part of the design. The Elite Website (£999 + VAT) includes a 100 % unique design; the Business / E-commerce package (£2,650 + VAT) includes premium design with unlimited revisions.
• If you need a palette and UI kit for an existing site or app, budget around 8 to 12 hours of UI/UX design at £55 an hour. Ten hours is £550, less the 5 % ten-hour discount, so £522.50 + VAT (£627 including VAT).
• If the logo and brand itself need work, brand identity design is £50 an hour, booked through Hire Us.

How we approach colour at WE-DEV

We start with your existing brand and your customers, not a trend report. We define a small palette as design tokens, check every combination against WCAG 2.2 AA before you see a full design, and test pages on real phones with real content. When a client’s brand colour fails contrast as a button, we keep it in the logo and header and choose a darker accessible shade for actions. Customers rarely notice the change; they just find the button.

If you want a second opinion on your current site’s colours, or a palette for a new build, get in touch. We work with businesses across the UK, from our base in St Albans. For the other things a modern site needs, read what a business website needs in 2026.

Photo: Andy Brown via Unsplash