Why Your Primary CTA Button Gets Ignored (And the 5-Minute Colour Audit That Fixes It)
By Jonathan · Founder, PageGains
Your CTA button is sitting on the page. Visitors are landing, scrolling, and leaving. You have tested the copy, tweaked the headline, and shortened the form. The button still underperforms. The culprit is almost never the words on the button. It is the button itself: the colour, the contrast ratio, and how it competes (or fails to compete) with everything else on the page.
The Real Reason Buttons Disappear Into the Page
Most teams pick a brand colour for their CTA and call it done. That feels logical. Brand consistency matters. But brand colours are chosen for recognition and aesthetics, not for contrast against a specific background. A muted teal that looks elegant in a logo can dissolve completely against a light grey section background, leaving your CTA looking like a decorative label rather than something to click.
The fix is simple but requires you to stop trusting your eye. Your eye adjusts. A visitor seeing your page for the first time in three seconds has no such luxury. Run your button colour and its immediate background through the WebAIM Contrast Checker right now. WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text. For a button label, you want that same threshold at minimum, and 7:1 or above if the surrounding page has competing visual weight. If your ratio is below 4.5:1, you have found the first reason your button is getting skipped.
How to Identify Competing Colours That Steal Attention
Open your page in a browser and take a full-page screenshot. Paste it into Figma or any basic image editor and zoom out until the page is thumbnail-sized, roughly the size of a phone screen. Look at it for three seconds. What is the first element that draws your eye? If it is a header image, a testimonial badge, or a decorative illustration rather than your CTA button, you have a visual hierarchy problem.
The underlying issue is usually that something else on the page shares the same hue as your button. A blue button on a page with a blue hero image, blue icons, and blue section dividers is invisible. It blends into the visual noise. The fix is to audit every colour on the page systematically. List every hex value used in the design. If your CTA colour appears more than twice outside the button itself, that colour has lost its signalling power. Consider switching your CTA to a colour that appears nowhere else on the page. Orange on a predominantly blue-and-white SaaS page consistently outperforms blue buttons in split tests because it has no competition.
The Five-Minute Contrast Audit, Step by Step
This is the process. It takes five minutes the first time and two minutes every time after.
First, identify your CTA button's background colour (hex value) and the page section background it sits on (also hex). Run both through the WebAIM Contrast Checker. Record the ratio.
Second, identify the button's label text colour and run that against the button background. A white label on a mid-range green often fails here.
Third, check the button at its smallest rendered size. Contrast ratios that pass at desktop can feel insufficient on mobile where the button is smaller and surrounded by more white space.
Fourth, check the button in a greyscale screenshot. Remove all colour from your full-page screenshot and look again. If the button does not stand out in greyscale, it is relying entirely on colour to differentiate itself. That fails for roughly 8% of male visitors who have some form of colour vision deficiency.
Fifth, check the hover and focus states. A button that passes contrast at rest but drops below threshold on hover creates a moment of confusion exactly when the visitor is about to convert.
GET YOUR OWN AUDIT
Find these issues on your own page
PageGains analyzes any URL and surfaces these exact problems in ~60 seconds. First audit from $4.99.
Analyze my page →Why Button Size and Padding Are a Contrast Problem Too
Contrast is not only about colour ratios. It is about visual weight. A button with generous padding, say 16px top and bottom and 32px left and right, reads as a button. A button with 8px padding reads as a link. Visitors have been trained by thousands of interfaces to recognise a particular shape as clickable. When your button is too small or too thin, it fails to trigger that recognition, regardless of its colour.
The practical audit here is to measure your button's rendered height in pixels. On desktop, a primary CTA should be at least 44px tall. That is Apple's minimum tap target guideline, and it applies to mouse interactions too because it forces enough padding to create visual weight. If your button is shorter than 44px, increase the padding before you touch the colour. You may find the contrast problem resolves itself once the button has enough physical presence on the page.
Also audit the button's border. A borderless button on a white background with a light fill can disappear entirely. A 2px solid border in a darker shade of the button's fill colour adds definition without changing the design language. On light-background pages, this alone can lift click-through rates by making the button visually bounded.
The Problem With Using Your Brand's Primary Colour for Everything
SaaS brands do this constantly. The primary colour is used for the logo, the navigation links, the section headings, the icon fills, the footer accents, and the CTA button. By the time the visitor reaches the button, that colour has been drained of all urgency. It signals "this is part of our brand" rather than "this is the thing you should do next."
Think of it from a pure signal-to-noise perspective. If a colour appears fifteen times on a page, clicking it is not a trained behaviour. If a colour appears exactly once, on the button, clicking it becomes obvious. This is why high-converting SaaS pages often use a secondary or even tertiary brand colour for the CTA. Basecamp has used green buttons on a red-accented page. Shopify has used green CTAs on a page with predominantly blue and white elements. The choice is not accidental. The CTA colour is deliberately reserved so it retains meaning.
Run the count yourself: how many times does your CTA colour (or a colour within 20 hue degrees of it) appear on your page outside the button? If the answer is more than two, you have a dilution problem.
What Colour Contrast Testing in Greyscale Actually Tells You
The greyscale test deserves its own section because it reveals something the contrast ratio checker cannot. A contrast checker tells you whether two colours are sufficiently different in luminance. Greyscale tells you whether your overall page layout makes the CTA the dominant element.
To run this properly, take your full-page screenshot and desaturate it completely (in Photoshop: Image, Adjustments, Desaturate; in Figma: use the Grayscale plugin). Now look at the result. Is the CTA button the darkest or lightest element in its local area of the page? Does it have clear white space around it, or is it crowded by other elements of similar grey value? If it blends into the surrounding content in greyscale, colour alone is not saving it for sighted visitors. It is certainly not helping visitors with colour vision deficiencies.
The fix here is often not a colour change. It is adding white space. A button with 24px of clear space on all sides reads as isolated and important. The same button flush against a block of text or an image reads as part of the surrounding content. White space is contrast too, just not the kind a ratio checker measures.
GET YOUR OWN AUDIT
Find these issues on your own page
PageGains analyzes any URL and surfaces these exact problems in ~60 seconds. First audit from $4.99.
Analyze my page →How to Prioritise Fixes When Everything Fails the Audit
You run this audit and find five problems: the contrast ratio is 3.8:1, the button colour appears eleven times on the page, the button is 36px tall, there is no border, and the hover state fails. Fix them in this order.
Start with contrast ratio. A button that is hard to see fails before anything else matters. Get above 4.5:1 on both the button-to-background and text-to-button checks. Then fix the button size. Add padding until the button is at least 44px tall. Then address colour dilution by switching to a hue that appears nowhere else on the page. Then add a border if the background is light. Hover state last, because it only affects visitors who are already committed enough to move their cursor to the button.
This order matters because each fix compounds the one before. A button with a passing contrast ratio and the right size is already significantly more visible before you touch the colour. Making changes in the wrong order can lead you to over-engineer a solution that solves a secondary problem while the primary one remains.
The Bottom Line
A CTA button is not just a design element. It is the single point on the page where interest converts into action. Every colour and contrast decision you make either sharpens or blurs that moment. Most teams treat button design as a one-time decision made during the initial build. Treat it instead as something to audit every time you redesign a section, add a new visual element, or update your brand colours, because any of those changes can push your button into invisibility without anyone noticing.
The five-minute audit process in this post is not a one-off exercise. It is a checklist to run before any page ships and again after any significant visual update. Run it in greyscale. Check the ratio. Count the colour appearances. Measure the padding. These are not abstract design principles. They are the difference between a button that gets clicked and a button that gets scrolled past.
Fix the contrast first. Everything else on the page depends on the CTA being seen.
