Color Schemes for Dark Mobile Headers: How to Choose Text and Icon Colors
A dark mobile header can distinguish a site’s name from the content underneath. But even when its lettering is bright, visitors may struggle if the small search and menu icons are difficult to find. The starting point is to give text and controls enough contrast with the dark background, then make the default state and the open-menu state visually distinct.
Check text and interactive icons separately on a dark header
Choose the header background first, then establish colors for the site name, supporting labels, search icon, and menu icon. They do not all have to be equally bright, but supporting text should not become so pale or muted that it disappears. A contrast ratio describes the difference in relative brightness between two adjacent colors.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, ordinary-size text generally needs a contrast ratio of at least 4.5:1 against its background, while large text needs at least 3:1. Visual information needed to identify interactive controls, including essential icons and boundaries, generally needs at least 3:1 against adjacent colors. Logo text has an exception to the text-contrast requirement, but if the logo links to the homepage, people still need to recognize it as a usable control.
Even a high contrast ratio cannot compensate for an icon stroke that is too thin to recognize on a small screen. Check both stroke weight and the space around each icon, so the magnifying glass and menu symbol remain easy to distinguish.
Example palette for a mobile online-course website header
Imagine an online-course site whose compact header contains the site name, a short “Find courses” label, search, and a menu button. HEX means a hexadecimal color code used to specify a web color. The ratios below are calculated for the actual colors paired together.
- Header and site name: Use deep navy #183451 as a solid header background and white #FFFFFF for the site name. Their contrast ratio is about 12.74:1. A solid surface also keeps the color behind the text stable if there is a photograph underneath the header.
- Search and menu icons: On the same deep navy #183451, use pale blue #E7F1FC for both icons. The ratio is about 11.15:1. Giving these everyday controls a shared color avoids making one look disproportionately important.
- Small supporting text: On deep navy #183451, a muted blue-gray #BDD2E6 “Find courses” label has about 8.20:1 contrast. It creates a gentler visual hierarchy than the white site name while still maintaining strong contrast.
- Open-menu state: When the menu is open, give its button a pale mint #B9F3DC background against the deep navy #183451 header. The button surface contrasts with the header at about 10.26:1. A dark blue #17314B icon on the mint surface has about 10.72:1 contrast. Also change the icon’s shape or show a “Close” label instead of relying on color alone.
This scheme uses the dark header as a consistent foundation, pale blue for everyday controls, and a light surface with a dark icon for the open state. Assigning distinct roles to a small set of colors is more useful than adding extra accent colors.
Recheck colors when the menu expands or the page scrolls
If the expanded menu uses a white #FFFFFF panel, do not carry over the pale icon color from the dark header. Switch both menu labels and any essential arrow icons to dark blue-gray #223D58; their contrast ratio against white is about 11.19:1. Indicate the current page with wording or a distinct shape as well as color.
Making the header translucent while scrolling changes the actual background behind its text and icons as photographs or content pass underneath. A solid dark surface is a more predictable choice when those changing combinations have not been checked. For keyboard users, a light yellow #F8D273 focus outline is one possible option on deep navy #183451, with about 8.77:1 contrast. The touch target should also provide more usable space than the icon’s visible shape alone.
HueRoll lets you adjust colors through HEX codes and check a selected color against white or black. It does not compare any two arbitrary colors or automatically determine WCAG AA or AAA compliance. Calculate combinations such as a header and its icon separately, then check the result on a real mobile-sized layout.