What Colors Work for a Smartphone Menu Screen? Color Schemes That Are Easy to Read When Opened

Opening a menu on a smartphone can replace most of the visible page with a list of links. Instead of making that menu as bright as possible, the goal is to help people find its labels, recognize their current location, and locate the close control. Here is a practical color scheme for an expanded mobile menu, particularly on a site with colorful photographs.

Give the open menu a stable background and establish its text color first

When a menu opens over photographs or article content, consider using an opaque background for the menu panel itself. If the panel is translucent, bright areas of the underlying image or visible text may interfere with the menu labels. An opaque, softly colored surface gives the labels a predictable background and lets you check their contrast against a single color.

Ordinary navigation links do not need a different color for every destination. Use consistent lettering for short labels such as “Events,” “Highlights,” “Directions,” and “Visitor information,” arranged in a vertical list. Keep the close control in a predictable place, such as the upper-right corner, and include a visible “Close” label alongside the X icon so its purpose is clear.

To show the current page, combine a subtle background change with bolder text and a strong vertical marker. A slight difference between two pale surfaces may be too weak to communicate the selected state by itself. If the menu also includes a primary action such as purchasing tickets, make that action a separate button rather than styling every page link as an equally prominent button.

Example colors for a botanical garden’s events menu

Imagine opening the mobile menu on a botanical garden’s website while viewing the “Events” page. The following HEX codes (six-digit hexadecimal color values written after #) are a suggested palette for this example, not required colors for all garden websites.

Use pale green-gray ■#F7F9F6 as the opaque menu background, with dark green-gray ■#243A32 for the standard link labels. Their calculated contrast ratio is approximately 11.49:1. The menu labels keep the same background even if the page behind them contains vivid flower photographs.

Highlight the current “Events” row with a soft mint ■#DFECE5 background and bold deep teal-green ■#315D50 lettering. The text-to-row contrast ratio is approximately 6.14:1. Add a relatively thick vertical line in the same teal-green ■#315D50 along the row’s left edge. That line also contrasts at approximately 6.14:1 against the soft mint ■#DFECE5. However, the selected row background ■#DFECE5 contrasts with the surrounding menu panel ■#F7F9F6 by only about 1.15:1, so the tinted area alone should not be the only selected-state indicator.

Make the X-shaped close icon teal-green ■#315D50, which contrasts at approximately 7.05:1 against the pale menu panel ■#F7F9F6. If you group a long list into sections such as “Explore the garden” and “Plan your visit,” use gray-green ■#728579 dividers. A divider contrasts at approximately 3.71:1 against the menu background ■#F7F9F6, but check its thickness too: an extremely thin line can appear fainter than the numerical ratio suggests.

For a primary “View admission tickets” button, use teal-green ■#315D50 as the background and white ■#FFFFFF text. Their contrast ratio is approximately 7.47:1. The filled button also contrasts at approximately 7.05:1 against the pale menu panel ■#F7F9F6. This distinguishes the ticket action without turning all navigation links into colored blocks.

Test the open and close behavior at mobile widths

Immediately after the menu opens, check that the heading and close control are easy to find near the top. If the list scrolls, keep a way to close it available and allow enough room for longer labels when text is enlarged. For a menu layered over a photo-heavy page, prevent accidental interaction with content behind the open menu.

For keyboard navigation, confirm that the current keyboard focus (the control receiving keyboard input) is visible inside the open menu and that closing it returns focus to the button that opened it. WCAG 2.2 (Web Content Accessibility Guidelines) generally calls for contrast of at least 4.5:1 for normal-sized text, and at least 3:1 for non-text indicators needed to identify interface controls or their states against adjacent colors. Review labels, placement, and interaction behavior alongside the color measurements.

HueRoll can compare a selected color against white or black, but it cannot directly measure contrast between any arbitrary pair of colors or automatically judge whether a combination meets accessibility requirements. Verify pairs such as the menu text ■#243A32 and pale panel ■#F7F9F6 with a separate contrast calculation before applying them.