What is the best CTA button color?

There is no single best CTA button color. The best color is the 1 that contrasts most with everything around it, on a button whose words say plainly what happens next. In our A/B tests, a high-contrast orange button lifted conversion 10.1%, and fixing a button that blended into a label of the same color lifted conversion 72.2%. When we tested orange against red on its own, neither beat the other.

No color wins on its own; contrast with the page does

Most button color case studies compare a button that stood out with 1 that did not, then credit the color. Red beats green on a green page. Green beats red on a red page. The hue was never the reason. The button that won was the 1 the eye found first.

I have run button tests since 2007, and the rule has held every time: a call to action succeeds on contrast against the rest of the page and on the words it uses. Pick the color your page is not already using, and keep it for the actions that matter.

A high-contrast orange card button lifted conversion 10.1%

Product cards on a desktop category page had a plain add to cart button that looked like the rest of the card. We tested a bright orange button, and a version with no button at all. The orange button lifted conversion 10.1% and revenue per visitor 19.9% over 22 days.

Orange was not magic here. Nothing else on that page was orange, so the buttons became the most visible thing in the grid.

Fixing a button that blended into its label lifted conversion 72.2%

This test shows the same rule from the other side. A buying guide’s top pick had an orange label next to an orange button. Orange is usually a strong button color, but next to a label in the same color, the button lost its contrast and stopped looking clickable. We tested 3 versions on mobile, each making the button stand out from its label, for example by turning the label gray and making the button larger. The winner paired the higher-contrast button with star ratings and lifted conversion 72.2% over 21 days.

The star ratings ran in the same variation, so not all of the lift came from contrast. But the starting problem was the same: a strong color, used twice, cancels itself out.

Orange against red showed no clear winner

On a landing page where the only goal was a phone call, we tested orange and red call buttons against the original color. The orange buttons measured 24.1% higher over 21 days, but the result did not reach our confidence bar. When both colors already stand out from the page, swapping 1 for the other rarely settles anything.

1 button color across the whole site did not move sales

Earlier product page tests on 1 store had seen movement from an orange button, but only on a few products. To isolate the color, we changed the button to orange on every product page, on mobile and desktop. Conversion measured 3.9% lower over 10 days, and we paused the test early. The color that helped on a few pages was not a site-wide answer.

A related test went the opposite direction on purpose. On a content-heavy page, a bold, high-contrast banner around the main button looked like an ad. Blending it into the page measured 40% higher, though traffic was too low to call it. Contrast should make the button easy to find, not make the page feel like it is selling.

How to check your own button’s contrast

1. Measure it. Use a contrast checker to compare the button color with the background around it. The W3C accessibility guidelines ask for at least 3:1 for buttons and other controls.
2. Count the colors. If the button color also appears in your logo, badges or headings, the button is competing with them.
3. Read the label. The words should say what happens next, such as “Add to Cart” or “Get my quote.”
4. Test it. Run the change for at least 2 full weeks before you call it. Our experimentation and testing team can run it for you.

For button wording and placement on product pages, see What makes an add to cart button convert? For homepage buttons, see CTA best practices: what our A/B tests show.

The best button color is whichever color nothing else on your page is using.

Frequently asked questions

What is the best color for a CTA button?

The color that contrasts most with the page around it. No single hue wins across sites. A button wins when nothing else on the page looks like it.

Does red convert better than green?

Not by itself. Red has beaten green when red stood out more on that page, and the reverse is also true. In our orange against red test, neither color won.

Why do button color case studies contradict each other?

Most compare a high-contrast button with a low-contrast 1 and credit the color. Change the page around the button and the winning color changes too.

What matters more than button color?

Contrast with the page, the button's wording, and where it sits. A button that blends into a label of the same color loses even when the color is strong.

What is the best color for an add to cart button?

Whatever color nothing else on your product page uses. In our tests, a yellow add to cart button with the price inside lifted conversion 13.9% because it was the only yellow on the page.