What Color Should Small Icons on Smartphones Be? UI Colors That Make Them Easy to Spot

On a smartphone event-listing page, small icons for search, filters, and saving events often sit close together. If every icon is pale, important controls can disappear into the background. If every icon uses a bold accent color, it becomes harder to tell which actions matter most or which options are selected. For UI (user interface) elements, start with contrast against the surrounding surface and a consistent rule for default and selected states, rather than choosing a color by name.

Choose small-icon colors by contrast with the background

WCAG (Web Content Accessibility Guidelines) 2.2 generally requires a contrast ratio of at least 3:1 against adjacent colors for visual information needed to identify user interface controls and states, and for parts of graphics essential to understanding their meaning. A contrast ratio measures the difference in relative brightness between two colors. This does not mean every purely decorative icon, or every graphic whose information is fully conveyed by nearby text, has the same requirement.

Thin strokes can become difficult to recognize at small sizes even when the calculated ratio passes. Use recognizable shapes for a magnifying glass, filter, or saved-item heart, and add visible labels where useful. Text labels have a separate requirement: ordinary-size text generally needs at least 4.5:1 contrast with its background.

Example colors for search, save, and details in a mobile event list

Consider a smartphone page where visitors browse events, save favorites, and open event details. HEX is a hexadecimal color code used to specify colors on the web. The ratios below were calculated for each icon or label against the background directly beside it.

• Page and cards: Use off-white ■#F6F8FB for the page and white ■#FFFFFF for the search area and event cards. Their contrast is only about 1.06:1, so use spacing and borders rather than relying on this subtle color change alone to separate cards.
• Search and filter icons: On a white ■#FFFFFF toolbar, a dark blue-gray ■#41566E icon has about 7.55:1 contrast. Labels such as “Search” and “Filter” in dark slate ■#24344A have about 12.61:1 contrast. Using the same icon color signals that these controls belong together.
• Unsaved favorite: On a white ■#FFFFFF card, a muted blue-gray ■#66768B outline heart has about 4.64:1 contrast. The button is still interactive, so do not fade it so much that it looks disabled.
• Saved favorite: A filled heart in deep blue ■#195C94 on a pale-blue ■#E8F2FA chip has about 6.17:1 contrast. Add the visible label “Saved” as well. Because the chip’s fill is close to the surrounding white ■#FFFFFF, use a blue-gray ■#788AA0 border: its contrast is about 3.53:1 against white and 3.12:1 against the pale-blue fill.
• View details: A deep-blue ■#1F4F80 button with a white ■#FFFFFF arrow and the text “View details” gives about 8.44:1 contrast. The solid button stands out against the white card, while the label explains the action more clearly than an arrow alone.

This keeps everyday controls blue-gray, marks a saved item with a stronger blue plus a change in heart shape, and reserves a filled button for the next step. The hierarchy comes from consistent roles and shapes, not from adding more unrelated colors.

Check stroke weight, labels, and changes of background

A very pale blue-gray ■#B6C2CF icon has only about 1.81:1 contrast against white ■#FFFFFF. It may work as decoration, but not as the sole visible sign of a meaningful search or save control. Similarly, muted blue-gray ■#66768B can meet the ordinary-text contrast requirement on white ■#FFFFFF, but its ratio drops to about 4.09:1 against pale blue ■#E8F2FA. Recheck text and graphics separately whenever the surface color changes.

Preview the actual small size on a narrow phone screen, and adjust thin strokes until each shape can be recognized. The visible icon size and the tappable target are different things; leave enough space for a finger to activate the control. Never communicate “Saved” only through color: combine a filled shape and a written label.

HueRoll can help you adjust a candidate color using HEX and compare the selected color against white or black. It cannot compare arbitrary pairs of colors or automatically determine WCAG AA or AAA compliance. For combinations such as pale-blue chips and dark icons, calculate the actual pair separately and verify the result on the intended screen.