The best colour for CTA buttons: why contrast with the page decides it
There's no single best colour for CTA buttons. A button gets noticed because it differs from everything around it, so the right colour is whichever one stands apart on that page, passes contrast with its label and with the background, and is used for the main action and almost nothing else.
Why the “best colour” tests don't travel
Marketing blogs often report a test in which a red or orange button beat a green one. Those results describe one page: a button that suddenly contrasted with a mostly green layout, for instance. Move the same red button onto a red-heavy page and it blends in. What carries across sites is the principle underneath: people notice the element that's different from its surroundings, and they act on the one that clearly looks like the next step.
What makes a call to action button colour work
- It differs from the page
- If the page is warm neutrals and photography, a deep blue or green button stands out. If the page is already full of blue, pick something else, or make the button black.
- Its label passes 4.5:1
- WCAG 2.2 asks for 4.5:1 between the label text and the button fill at level AA, unless the label is large text. White on bright orange or yellow often fails; dark text on those colours usually passes.
- The button passes 3:1 against the page
- Under success criterion 1.4.11, the visual cue that identifies the button, usually its fill or border, needs 3:1 against the adjacent colour.
- It's rare
- The action colour shouldn't also be the heading colour, the icon colour and the section background. Scarcity is what makes it findable.
- It fits the brand
- The button colour is often the strongest brand signal on the page. Taking it from the business itself, its shopfront, packaging or uniform, is a better start than a chart of colour meanings.
Primary, secondary and the rest
| Role | Treatment | Why |
|---|---|---|
| Primary (Book, Buy, Get a quote) | Solid fill in the action colour | One per view, the clearest next step |
| Secondary (Learn more, See menu) | Outline or text link in a neutral or the action colour | Visible, but doesn't compete |
| Destructive (Delete, Cancel order) | Red outline or red text, filled only on confirmation | Shouldn't look like the main action |
| Disabled | Muted, with an explanation nearby | Disabled controls are exempt from contrast rules, but people still need to know why |
Two primary buttons side by side, such as “Book now” and “Buy a voucher” both in the same fill, ask the visitor to choose between equals. Decide which one is the page's job and make the other secondary. More on this in call to action design and button design for websites.
States need colour too
- Hover: a small, visible change such as a slightly darker or lighter fill. Fading the whole button's opacity reads as disabled.
- Focus: a clear outline with 3:1 against the background, offset from the button so it isn't lost against the fill.
- Pressed: a brief shift, such as a darker fill or a slight move, to confirm the press.
- Dark theme: the fill needs its own lighter value, and the label usually switches to a dark colour.
Checking it in practice
- Blur a screenshot of the page. The primary button should still be the most obvious coloured shape.
- Check the label against the fill and the fill against the background with a contrast checker.
- Look at it on a phone outdoors at low brightness.
- Ask someone unfamiliar with the page what they'd click first.
Button colour in Anticode
Anticode's design systems use the site's one action colour for primary buttons and key links, and keep everything else in the system's neutrals, so the action is the thing that differs. You choose the action colour from eight values (red, orange, gold, green, teal, blue, pink or black) in the visual editor, and each one has a separate value for the dark theme. Some systems treat buttons differently: Luxury uses an outlined button that fills on hover, and Brutalist adds a hard offset shadow. The focus outline uses the action colour too.
The Critic checks button behaviour that affects how colour reads: hover states that do more than fade the opacity, and no coloured glow under buttons and cards.
Questions people ask
Is orange the best colour for buy buttons?
Only if orange stands out on that page and passes contrast with its label. Orange is popular because many layouts are blue or neutral, which makes it contrast.
Should CTA buttons be red or green?
Either can work. Avoid using them as a pair for yes and no without labels, since red-green colour blindness is common.
Can every button be the action colour?
Better not. If every button is filled in the action colour, none of them stands out. Keep the fill for the primary action in each view.