How Should You Choose Colors for Bottom Navigation? Color Schemes for Smartphone UI

Bottom navigation is a row of menu destinations along the lower edge of a smartphone screen. Unlike a fixed CTA (call to action, a button encouraging a booking or purchase), it helps people move between the main sections of a website and understand which section they are viewing. The colors of this UI (user interface, the part of a website people interact with) should make selected and unselected destinations easy to distinguish.

Give the bar, inactive items, and current item separate roles

Start by deciding three roles: the background of the navigation bar, the text and icons for destinations that are not selected, and the appearance of the current destination. A quiet, nearly white bar can group several destinations in one place without competing too strongly with the page’s photographs or main content.

Keep inactive labels and icons in a consistent dark gray-blue. Change the selected item’s appearance, but avoid relying on a switch to blue as the only signal of the current location. A bolder label, a short visible line, or a different icon shape provides an additional cue for people who find color differences hard to see.

There is no need to assign red, blue, green, and other colors to every destination. If the main purpose is to show where the visitor currently is, reusing one selection color makes the navigation behavior more predictable than treating each destination as a separate color category.

An example with four destinations on an events website

Imagine a mobile website for finding local events, with four destinations: “Explore,” “Schedule,” “Saved,” and “Settings.” The “Schedule” page is currently open. The HEX values (hexadecimal color codes beginning with #) below form one proposed palette for this example, not a universal rule for every app.

Use very pale blue-gray ■#F5F8FA for the page background and dark slate ■#23384B for body text. Their calculated contrast ratio is approximately 11.32:1. Give the bottom navigation bar a white ■#FFFFFF background and separate it from the page with a gray-blue ■#7D8995 top divider. That divider contrasts at approximately 3.57:1 against the white bar ■#FFFFFF and 3.35:1 against the pale page background ■#F5F8FA.

Use blue-gray ■#536372 for both the icons and labels of “Explore,” “Saved,” and “Settings.” It has a contrast ratio of approximately 6.18:1 against the white bar ■#FFFFFF. For the current “Schedule” destination, use a deep blue ■#164D78 icon and bold label on a soft blue ■#E5F0F7 background. The deep blue has a ratio of approximately 7.66:1 against that background, providing strong contrast for both text and the icon.

Add a short, reasonably thick deep blue ■#164D78 line above the current destination as a second indicator. The line contrasts at approximately 7.66:1 against the soft blue ■#E5F0F7. By comparison, the soft blue selected background ■#E5F0F7 differs from the white bar ■#FFFFFF by only about 1.16:1. Do not rely on that subtle tinted background alone to communicate which item is selected.

Check narrow screens, enlarged text, and interaction states

Even four equally spaced items can feel crowded if their labels are long. Keep labels short rather than showing icons alone, and verify that touch targets and spacing remain comfortable when text is enlarged. Allow for the device’s bottom gesture area and leave enough room so the bar does not cover the last part of the page.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for visual indicators such as icons or lines that are necessary to identify a user interface component or its state. Touch targets are generally at least 24 by 24 CSS pixels (units used for sizing web elements), with defined exceptions. These are minimum checks, not a substitute for testing the interface on real mobile devices.

Also check that the selected state updates after a tap and that keyboard users can see which destination has focus. Give assistive technologies information about the current page so screen readers can announce it; a visible color change alone does not provide that information.

HueRoll can check the contrast of a selected color against white or black. It cannot directly compare any arbitrary pair of colors or automatically decide whether a combination meets a particular accessibility requirement. Verify pairs such as the selected deep blue ■#164D78 and soft blue background ■#E5F0F7 with a separate contrast calculation before using them.