Somewhere around 2011, HubSpot published a test showing red buttons outperformed green buttons by 21%. The internet lost its mind. Fifteen years later, marketers are still debating button colors in Slack channels while ignoring the variables that actually predict conversions.
I'm going to settle this with data. We extracted CTA button data from thousands of landing pages analyzed through roast.page — button copy, color, size, placement, quantity, and surrounding context. Then we correlated each variable against the CTA dimension score (15% of total weight).
The finding that should end the color debate forever: button color has no statistically significant correlation with CTA scores. Red buttons, green buttons, blue buttons, orange buttons — they all show up equally across high-scoring and low-scoring pages.
What does correlate? Three things. Let me walk through each one.
Finding #1: CTA Copy Is 3x More Predictive Than Color
The single strongest predictor of a high CTA score is the specificity of the button copy. Pages with outcome-specific CTA text ("Start my free trial," "See my dashboard," "Get my free report") score an average of 3.1 points higher on the CTA dimension than pages with generic text ("Get Started," "Learn More," "Submit").
To put that in perspective: button color accounts for approximately 0.2 points of variance. CTA copy accounts for 3.1 points. Copy is literally 15x more predictive than color. And yet I see ten design debates about button color for every one conversation about button copy.
What makes good CTA copy? The same principles I covered in the CTA psychology deep-dive, but now with thousands of data points behind them:
- Tell people what happens next. "See my dashboard" tells you exactly what clicking will do. "Get Started" forces you to guess.
- Use first person. "Start my free trial" outperforms "Start your free trial" by a small but consistent margin. First person creates ownership.
- Reduce perceived risk. Adding "— free," "— no credit card," or "— takes 30 seconds" to the CTA button or immediately below it correlates with higher scores.
Finding #2: Contrast Ratio Predicts Scores, Not Color Choice
Here's what that HubSpot test actually measured: contrast, not color. The red button on a green page had higher contrast than the green button on a green page. If they'd tested a bright blue button on that same green page, it would have won too.
Our data confirms this. Pages where the CTA button has a contrast ratio of 7:1 or higher against its background score an average of 2.4 points higher on CTA than pages below 4.5:1. The specific hue doesn't matter — what matters is that the button is the most visually prominent interactive element in its viewport.
I reviewed a beautiful dark-mode fintech page last year. Navy background, subtle gradients, tasteful typography. The CTA was a slightly-lighter-navy button. Technically visible. Practically invisible. The founder changed it to a bright orange button that "clashed" with his design. His trial signups jumped 34%.
Here's the uncomfortable truth: your CTA should be the ugliest thing on your page. Not literally ugly — but it should be visually disruptive. If it blends into the design, it's failing at its only job.
The contrast hierarchy
In our data, pages with the highest CTA scores follow this visual hierarchy:
- Primary CTA: highest contrast, largest interactive element, surrounded by whitespace
- Secondary CTAs (if any): lower contrast, smaller, clearly subordinate
- Navigation links: lowest contrast, least prominent
When the CTA competes visually with navigation, secondary buttons, or decorative elements, scores drop. When it stands alone as the clear next step, scores rise. Obvious in hindsight. Rarely executed in practice.
Finding #3: Placement Above the Fold Is Non-Negotiable
65% of pages in our dataset have their primary CTA below the first viewport. Those pages score an average of 2.8 points lower on CTA than pages with the primary CTA visible without scrolling.
This doesn't mean the only CTA should be in the hero. The best pages have multiple CTA touchpoints — hero, mid-page, bottom — but the primary CTA is always visible in the first five seconds.
The exception: on mobile, where the first viewport is tiny, a sticky bottom CTA often outperforms a hero-embedded CTA. The button stays visible as the visitor scrolls, eliminating the need to scroll back up when they decide to act.
The "Single CTA" Myth
You've heard the advice: "One page, one CTA." The data tells a different story.
Pages with a single primary CTA but multiple instances of that CTA (hero, mid-page, bottom) score 1.5 points higher than pages with only one CTA instance. Repetition isn't confusion — it's convenience. Different visitors are ready to act at different points in the page.
What does hurt scores: multiple competing CTAs. "Start Free Trial" next to "Book a Demo" next to "Watch Video" next to "Download Whitepaper" creates choice paralysis. Pages with 3+ distinct CTA actions score 2.1 points lower than pages with one clear primary action.
The rule isn't "one CTA." It's "one primary action, available at multiple touchpoints."
CTA Size and Whitespace
Button size has a modest but real correlation. CTAs that are comfortably large — at least 44px tall on mobile (Apple's minimum touch target) and padded generously — score 0.8 points higher than cramped buttons. This is partly a contrast issue (larger buttons are more visible) and partly a usability issue (easier to tap on mobile).
Whitespace around the CTA has a stronger effect than button size alone. A medium-sized button with generous surrounding whitespace scores higher than a large button crammed between other elements. The whitespace creates visual isolation, drawing the eye.
Industry-Specific CTA Patterns
SaaS
"Start free trial" is the most common high-scoring SaaS CTA. Adding "— no credit card required" underneath increases scores. Enterprise SaaS pages do better with "Book a demo" when the product requires a sales conversation.
E-commerce
"Add to cart" is fine — it's universally understood. But "Buy now — free shipping" or "Get yours — ships today" add urgency and reduce perceived risk. E-commerce CTAs benefit from secondary information (price, shipping, returns) near the button.
Healthcare
"Schedule your appointment" outperforms "Contact us" by a wide margin. Healthcare visitors want a specific action with a clear next step, not a vague invitation to get in touch. "Book your free consultation — available this week" is even better.
Real estate
"See what your home is worth" converts dramatically better than "Contact an agent." The first offers immediate value; the second asks for a conversation the visitor isn't ready for. The value-first CTA pattern is especially powerful in real estate.
What the Data Means for You
Stop debating button colors. Start auditing button copy, contrast, and placement. Here's the priority order from the data:
- CTA copy (3.1 point impact) — Make it specific, first-person, and outcome-oriented. "See my results" not "Get Started."
- Placement (2.8 point impact) — Primary CTA visible above the fold. Repeat at mid-page and bottom. Use a sticky CTA on mobile.
- Contrast (2.4 point impact) — 7:1 ratio minimum. The button should be the most visually prominent element in its viewport.
- Singular focus (2.1 point impact) — One primary action, available in multiple places. Don't offer competing CTAs.
- Size and whitespace (0.8 point impact) — Comfortable touch targets, generous surrounding space.
Color? Not on the list. Use whatever color has the highest contrast against your background. If that happens to be red, great. If it's green, also great. If it's bright orange on a navy background, even better. The contrast is what matters, not the hue.
Run your page through our CTA analyzer to see exactly where your buttons stand — or use the full landing page analyzer for the complete conversion picture.