How to Use Color to Make CTAs Stand Out While Scrolling on Smartphones

As someone scrolls through an event page on a smartphone, a photograph, a white schedule, a pale-colored information section, and a dark venue section may appear one after another. If the “Register for this event” button blends into those changing surroundings, visitors have to search for the registration action again. A CTA (call to action) is a button or prompt that encourages someone to take a step, such as registering. To keep it noticeable while scrolling, consider not just the button color but also the surface immediately around it.

Keep the CTA’s role and surrounding surface consistent while scrolling

A button that stands out in a white section may lose its outline against a background of similar brightness. On a dark section, the button and the page may also merge visually. Rather than changing the button color each time the reader scrolls, consider keeping it in an opaque, solid-colored bar. This gives the button a predictable background and keeps its visual role consistent.

A contrast ratio expresses the difference in relative brightness between two colors. WCAG 2.2 (Web Content Accessibility Guidelines) Level AA generally requires at least 4.5:1 contrast between ordinary-sized text and its background. Visual information essential to identifying an interactive component or its state, such as certain icons, generally needs at least 3:1 contrast against adjacent colors. Choosing a bright-looking hue by itself is not enough; check the pairs of colors that actually touch.

Example palette for a long event-registration page

Imagine a page describing a workshop. Its schedule has a white ■#FFFFFF background, its “What to bring” section uses pale green ■#E9F4ED, and its venue details sit on dark navy ■#24394B. HEX is a hexadecimal color code used to specify colors on the web. The ratios below were calculated for the stated pairs.

• Bar that remains visible while scrolling: Give the registration bar at the bottom of the screen an opaque white ■#FFFFFF background. Because it has no color difference from a white schedule, add a blue-gray ■#6B7E91 top border. The border contrasts with white at about 4.18:1 and with pale green ■#E9F4ED at about 3.71:1. Against the dark navy ■#24394B section, the white bar itself contrasts at about 11.92:1.
• Registration button: Use deep teal ■#165D72 on the bar’s white ■#FFFFFF background, giving about 7.39:1 contrast. White ■#FFFFFF text reading “Register for this event,” together with any white arrow, has about 7.39:1 contrast against the teal ■#165D72 fill. The wording and button shape both help explain the action.
• Short supporting message: Put “Opens the registration page” in muted blue-gray ■#41556B on the white ■#FFFFFF bar. The contrast ratio is about 7.67:1. Keep the message visually secondary through its placement and short length instead of making small text excessively faint.
• An additional CTA within the article: The same teal ■#165D72 button has about 7.39:1 contrast on white ■#FFFFFF and 6.55:1 on pale green ■#E9F4ED. But against dark navy ■#24394B, that ratio falls to about 1.61:1. Do not place the teal button directly on the dark section without another distinguishing treatment. A white ■#FFFFFF panel behind it is one way to maintain its familiar appearance.

The page sections can change color, while the white registration bar and its teal button remain consistent. This is a way to maintain a recognizable action throughout the page without changing the CTA’s color at every scroll position.

Keep the CTA visible without hiding content while scrolling

If photographs move behind a translucent bar, the effective colors around the text and button change. Ratios calculated for solid HEX colors no longer describe every position, so an opaque bar is the easier starting point. Do not make the persistent area so tall that it covers a schedule or important notes. Leave enough space after the final paragraph and check that the bar does not interfere with the phone’s bottom controls or another on-page notice.

Keeping a CTA visible at all times does not guarantee more registrations. Visitors must still be able to read the information they need before deciding. Also check that a control receiving keyboard focus is not completely hidden under the persistent bar.

HueRoll lets you adjust candidate colors with HEX codes and check the selected color against white or black. It cannot compare arbitrary pairs of colors or automatically determine WCAG AA or AAA compliance. Calculate actual combinations, such as teal against pale green, separately and inspect the layout at a realistic smartphone width while scrolling.