CTA Visibility
CTA visibility is whether your primary button gets seen before it gets clicked — a function of size, contrast, placement, and persistence. It's the first check before you optimize copy.
CTA Visibility
Whether the primary call-to-action is large, contrasted, and well-placed enough that visitors actually see it before it gets clicked.
CTA visibility is the upstream check on every conversion-rate problem: before you debate button copy or offer, you confirm the button is being seen. It covers size relative to surrounding elements, color contrast against the background, placement along the natural scan path (typically an F or Z pattern on desktop, a vertical strip on mobile), persistence behavior on scroll, and competition from nearby imagery, banners, or chat widgets.
As a sub-discipline of attention optimization, visibility is binary in spirit but graded in practice — a CTA can be technically on-screen yet functionally invisible if a hero image dominates the fold. Fix visibility first; copy and color tests only move the needle on buttons people already look at.
Most CRO teams jump straight to A/B testing button copy — "Buy Now" versus "Add to Cart" versus "Get Yours" — without checking whether either variant is being noticed in the first place. Heatmaps and session replays routinely show primary CTAs scoring under 40% in-view rate on mobile product pages, which makes any copy test statistically noisy and operationally pointless.
Five factors decide visibility in practice: size (the button should be among the largest tappable elements in its viewport), contrast (a measurable WCAG ratio against its immediate background, not the page), placement (above the fold on desktop, within thumb reach on mobile), persistence (sticky on long pages where the original button scrolls out of frame), and competition (no autoplay video, dismiss-me popup, or oversized trust badge fighting for the same eye-fixation).
contrast_ratio = (L_lighter + 0.05) / (L_darker + 0.05)
L_lighter
Relative luminance of lighter color
Computed from the sRGB values of the lighter of the two surfaces — typically the button fill or its background.
L_darker
Relative luminance of darker color
Computed from the sRGB values of the darker surface. WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large UI components like buttons.
A Shopify apparel store uses a soft beige #F5E9DA hero background with a muted sand-colored button #D9C4A3. The team thinks the button looks tasteful; the contrast checker disagrees.
Button fill luminance (#D9C4A3): 0.589
Background luminance (#F5E9DA): 0.819
→ Contrast ratio ≈ 1.36:1
Well under the 3:1 floor for UI components. The button is functionally invisible against the hero — fix this before testing copy.
Run the contrast check against the actual surface behind the button on each template, not the brand color swatch. A button that passes against white can fail against a beige PDP background, a lifestyle photograph, or a dark-mode email-capture overlay.
Typical primary-CTA in-view rate by placement and page type (share of sessions where the button enters the viewport for ≥1s)
| Placement | Shopify PDP | Checkout | Cart drawer | Landing page |
|---|---|---|---|---|
| Above the fold, static | 72% | 94% | 98% | 81% |
| Below the fold, static | 38% | — | — | 29% |
| Sticky on scroll | 91% | 96% | — | 88% |
| Floating mobile bar | 94% | — | — | 90% |
| Inside accordion / tab | 12% | — | — | 8% |
The pattern is consistent across verticals: anything below the fold without a sticky variant loses roughly half its audience, and CTAs hidden inside collapsed accordions or tabs effectively don't exist. Add a sticky mobile bar before you run a single copy test — it's usually a larger lift than any wording change you'd ship after it.
CTA visibility, answered
Visibility decides whether the button is seen; copy decides whether a seen button is clicked. They sit in sequence — visibility is the gating check, copy is downstream tuning. Optimizing copy on a CTA with a 30% in-view rate wastes test traffic, because you're measuring the response of the small fraction that noticed it.
Use an in-view event in GA4 or your analytics tool — fire a custom event when the CTA enters the viewport for at least one second. Divide by sessions on that page to get the in-view rate. Pair it with a scroll-depth heatmap to see where the button sits relative to where people stop reading.
Mobile, by a wide margin. Desktop viewports usually fit the primary CTA above the fold by default; mobile rarely does, and scroll fatigue compounds the issue. A sticky mobile CTA bar is the highest-ROI visibility fix on most Shopify themes.
WCAG AA requires 3:1 for UI components like buttons. For best practice, aim for 4.5:1 or higher between the button fill and its immediate background. Test against every surface the button sits on — hero images, PDP backgrounds, and modal overlays often fail even when the brand palette technically passes.
Above the fold is safer, but not mandatory. On long, content-heavy pages a below-fold CTA can outperform if a sticky version follows the reader. The rule that holds: the button should be in view at the moment the reader's intent peaks, which usually means both an above-fold instance and a sticky companion.
One primary CTA, repeated. Competing primary buttons split attention and reduce the conversion rate on both. Secondary actions ("learn more", "see reviews") should be visually de-emphasized — ghost buttons or text links — so the visual hierarchy points to a single next step.
Often yes. A bottom-right chat bubble on mobile lands directly in the thumb zone where a sticky CTA bar would otherwise sit, and it can obscure the static button in cart drawers. Audit your chat widget's position and dismissal rules — many DTC stores see a measurable lift from moving it to a less-conflicting anchor.
Visibility is the foundational layer of attention optimization. The broader discipline covers what visitors look at, how long, and in what order; visibility narrows that to the single most important element — the primary CTA. Fix visibility first, then work on scan path, hierarchy, and distraction reduction.
Up to a point. Buttons that exceed about 25% of the viewport width on mobile start to read as banners and lose click-through. The goal is prominence in the visual hierarchy, not maximum pixel count — a medium button with strong contrast and isolation beats a huge button surrounded by competing elements.
Test one variable at a time: placement, sticky behavior, or contrast. Use CTR on the CTA as the primary metric and overall conversion rate as the guardrail. Most visibility tests reach significance faster than copy tests because the effect size is larger — expect to call winners in days, not weeks.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.