What Colors Work for Fixed Buttons on Smartphones? CTA Color Schemes That Don’t Interfere with Content

A button fixed to the bottom of a smartphone screen keeps the next action within reach on a long page, but its color and size can also distract from text and photography. When designing a fixed CTA (call to action, a button that prompts someone to book or take another step), consider the color of the surrounding bottom bar and the boundary between that bar and the page, not just the button itself.

Keep the fixed bar subtle and let the button stand out

One approach is to give the fixed bottom bar a white or pale neutral background and reserve a dark color for the primary button. Filling the entire bar with a vivid color may draw more attention than the photographs and headings readers are trying to explore. Because the action is already visible as they scroll, the button does not need an excessively intense color.

If the page and the bar have similar brightness, add a line along the bar’s top edge to separate them. A translucent bar can change appearance depending on the photos or text behind it, making contrast harder to verify. An opaque background and one primary action usually make this small area easier to organize.

A color scheme for a hotel room detail page

Imagine a page with room photographs followed by amenities and booking information. Set the page background to warm ivory ■#FAF7F2 and headings and body text to dark slate ■#26343B. This text-to-background contrast ratio is approximately 12.01:1. The pale background gives the photographs space while the dark text remains distinct across longer descriptions.

Make the fixed bar white ■#FFFFFF and add a thin gray-blue ■#707C83 divider along its top. The divider has a contrast ratio of approximately 4.29:1 against the white bar and 4.01:1 against the ivory page background ■#FAF7F2. The line distinguishes the bar even though both surfaces are light.

For the button, use muted plum ■#693A57 with the label “Check rooms and rates” in white ■#FFFFFF. The contrast between the label and button is approximately 8.96:1, exceeding the 4.5:1 minimum for normal-sized text. The button also contrasts at approximately 8.96:1 against the white fixed bar ■#FFFFFF. If you add a brief supporting note, blue-gray ■#50616B text on the white bar ■#FFFFFF has a contrast ratio of approximately 6.44:1.

Using a pale bar with one dark plum button keeps the large color areas understated while making the action’s location clear. If the hotel’s branding calls for another button color, measure the new button against both its text and the surrounding bar instead of assuming the alternative will work equally well.

Leave space below the content and test changing screen states

Reserve enough space at the end of the page so the fixed bar does not cover cancellation terms or contact details. Account for the device’s bottom gesture area too, and test narrow screen widths and enlarged text to ensure the button still works if its label wraps.

During a booking form, the on-screen keyboard may overlap a fixed button. Check that fields, the form’s submit control, and the keyboard focus (the control currently selected for keyboard input) are not hidden. Consider hiding the fixed bar while the user is completing the form. Even an accessible color combination cannot make an overlay usable if it blocks important information.

WCAG 2.2 (Web Content Accessibility Guidelines) specifies at least 4.5:1 contrast for normal text and generally 3:1 for visual information necessary to identify a user interface component. The minimum target size is generally 24 by 24 CSS pixels (the measurement unit used in web layouts), with exceptions. Treat those as minimum checks and provide generous spacing for comfortable tapping.

HueRoll can compare a selected color with white or black, but it does not directly compare two arbitrary colors or automatically determine whether a combination meets accessibility standards. For adjacent colors such as the white bar ■#FFFFFF, plum button ■#693A57, and divider ■#707C83, verify the contrast ratios with a separate method as well.