The Button Colour Argument

The meeting everybody has had

Forty minutes on whether the button should be orange or green, with three people who feel strongly and one who is waiting for it to end.

It is a satisfying argument because everybody can participate. No expertise is required, everybody has an opinion about colour, and it feels like a decision is being made.

Meanwhile the button says Submit, sits below the fold, and competes with four other buttons of equal weight.

All three of those matter more than the colour, and none of them was discussed.

What the famous studies actually showed

You will have seen a case study where changing a button from green to red lifted conversions by some striking percentage.

These are usually cited without the surrounding detail, and the detail is what makes them useless as guidance.

In most of them the winning colour was the one that contrasted more sharply with the rest of that specific page. On a page dominated by green, a red button stands out. The finding was about contrast, not about red.

Reproduce the same test on a page that is mostly red and the result reverses, which is why nobody can tell you the best button colour: the question has no answer independent of the page it is on.

Contrast is the part that is real

A button needs to be visibly different from everything around it, and that is genuinely worth attention.

If your brand colour is also your background tint, your heading colour, and your link colour, then a button in that colour is camouflaged regardless of how good the colour is.

The practical test is to look at the page with your eyes half closed, or to blur a screenshot heavily. The button should still be the thing you notice.

Contrast also has to hold for people who do not distinguish colours the way you do, which is why a button should not rely on hue alone to read as a button. Shape, size, and a clear label do that work.

What actually moves the number

• The label, saying what will happen.
• One clear main action rather than five competing ones.
• Position, at the point the decision is made.
• Size, particularly on a phone.
• What is next to it: price, delivery, reassurance.
• Whether the page earned it by answering the question first.

Every one of these outweighs hue, and most of them can be fixed in an afternoon by somebody with no design training.

The label does most of the work

Submit tells a person nothing about what happens next, and uncertainty at the moment of commitment is expensive.

Get my quote, Book a callback, See prices, and Send enquiry all describe an outcome, and the reader knows what they are agreeing to.

Where there is any doubt about commitment, say so plainly. Check availability reassures somebody who is not ready to buy in a way that Continue does not.

This is a five-minute change with no design cost, and it consistently outperforms anything done to the colour.

One main action per screen

The most common structural fault, and it is invisible to whoever built the page.

A page with a call button, an enquiry form, a download, a newsletter signup, and a chat widget, all styled with similar weight, has no main action. It has five equally plausible ones and a visitor who has to choose.

Choosing is work, and a meaningful share of people resolve it by leaving.

Decide what you want from the page, make that one obvious, and demote everything else to a plain link. A demoted option is still available to anybody who wants it.

Position matters more than prominence

A button works where the decision is made rather than where the layout has room.

That usually means immediately after the information somebody needed: after the price, after the specification, after the answer to the objection.

On a long page it means more than once, since somebody convinced at the top should not have to scroll to the bottom, and somebody convinced at the bottom should not have to scroll back up.

Repeating the same action two or three times down a long page is not clutter. Five different actions is clutter.

A worked example

A window installer spent a fortnight deciding between two shades for their quote button.

The button said Submit, sat at the foot of a long page, and was the same size as a newsletter signup directly beside it.

They changed the label to Get my free quote, made it noticeably larger, moved a copy of it directly beneath the pricing section, and turned the newsletter signup into a plain text link.

The colour stayed exactly as it had been.

Quote requests roughly doubled over the following two months.

The fortnight of colour discussion had been the most expensive part of the project and had contributed nothing.

When colour does matter

Three cases, and they are worth separating from the general argument.

Where colour is the only thing distinguishing the button from its surroundings, which is a contrast problem rather than a hue preference.

Where colour carries meaning: red for destructive actions, and consistent use of one colour for the primary action throughout a site so people learn it.

And where the chosen colour fails contrast requirements for text on it, which makes the label hard to read and is a genuine defect rather than a matter of taste.

None of those is settled by preference. All three have a right answer you can check.

The counter-case

At very large volumes, small effects become both detectable and valuable, and colour testing is not absurd there.

A retailer with hundreds of thousands of monthly visitors can measure a one percent difference reliably, and one percent of that traffic is real money.

That is a different situation from a business with two hundred visitors a week, where such a difference is undetectable and would be worth very little if it existed.

The mistake is importing practices from businesses operating at a scale where they work, into a business where the same test could run for two years without concluding anything.

What to do instead

1. Rewrite the label to describe what happens.
2. Pick one main action and demote the rest to links.
3. Move the button to just after the deciding information.
4. Repeat it down a long page.
5. Blur a screenshot and check it still stands out.
6. Check the label's contrast against the button colour.
7. Then stop and go and fix something else.

The first two take twenty minutes and account for most of the improvement available.

Buttons that cannot be hit are covered in buttons that are too small to hit.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.