How Should You Color-Code Card UI on Smartphones? How to Organize Information on Small Screens

On a smartphone, a vertical list of cards repeats headings, supporting details, and controls. Giving each card a different background color does not necessarily make the information easier to follow. A more useful approach is to assign consistent colors to similar information and highlight only meaningful differences, such as which option has been selected. Consider a coworking space’s desk-reservation screen as an example.

Keep information roles consistent instead of coloring every card differently

A card UI (user interface component) groups related information, such as a time, price, and available action, in one visible area. On smartphones, cards that were arranged side by side on desktop often become a single vertical column. Put each card’s details in the same order—time slot, price, then availability—so visitors can compare corresponding information while scrolling.

Use a common background for ordinary cards, and reserve a subtly tinted background and a strong visual marker for the selected one. Always provide written status labels such as “Available” and “Full.” Those differences should not depend solely on distinguishing blue from gray, which some visitors may find difficult.

The list also does not need several competing button colors. Visitors can choose a reservation option within the cards and use one “Continue with this time” button below the options. If the entire card is selectable, make its selected state apparent through both text and a visible outline or line.

A seven-color example with three desk-reservation cards

Imagine three time slots at a coworking space: “Morning, 9:00–12:00 (Selected),” “Afternoon, 13:00–17:00 (Available),” and “Evening, 18:00–21:00 (Full).” The following HEX values (six-digit hexadecimal color codes following a # sign) are one possible palette for this interface, not a universal rule for reservation websites.

Set the page background to pale blue-gray ■#F3F7F8 and ordinary cards to white ■#FFFFFF. These surfaces contrast by only about 1.08:1, so separate the cards with spacing and a gray-blue ■#758995 outline instead of relying on that pale background difference. The outline contrasts at approximately 3.64:1 against white ■#FFFFFF and 3.38:1 against the page background ■#F3F7F8.

Use dark slate ■#243746 for headings such as the time and price, giving approximately 12.28:1 contrast against a white card ■#FFFFFF. Show supplementary details such as capacity and conditions in blue-gray ■#536574, which contrasts at approximately 6.03:1 against white ■#FFFFFF. Keep the full time slot’s text legible rather than fading the entire card, and label it clearly “Full — unavailable for selection.”

Give only the selected morning card a soft mint ■#E4F1F0 background and show its time and price in dark slate ■#243746. That combination has approximately 10.61:1 contrast. The blue-gray ■#536574 supporting text also contrasts at approximately 5.21:1 against the mint background. Add a thick deep teal ■#165A61 line along the left edge and a visible “Selected” label. The line contrasts at approximately 6.80:1 against the selected background ■#E4F1F0.

The mint selected background ■#E4F1F0 differs from an ordinary white card ■#FFFFFF by only about 1.16:1. That subtle tint alone is not enough to communicate the selection reliably; pair it with the line and label. For the “Continue with this time” button below the cards, use deep teal ■#165A61 with white ■#FFFFFF lettering. The text-to-button contrast ratio is approximately 7.87:1, and the button contrasts at approximately 7.29:1 against the page background ■#F3F7F8.

Check selection, unavailable options, and enlarged text on a narrow screen

At real smartphone widths, verify that wrapping prices do not make it unclear which time slot or availability label they belong to. Leave enough space between cards. When someone chooses a different available option, move the “Selected” label and strong line to the newly selected card. If a slot is full, explain that it cannot be booked through its label and unavailable interaction state, rather than relying only on a faded color.

Keyboard navigation needs a visible focus indicator that shows which card or control is currently receiving input. Focus and selection are not the same state. Check that visitors can recognize both when the text is enlarged or all cards are displayed in a single column.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires at least 4.5:1 contrast for normal-sized text and 3:1 for large text against their backgrounds. Visual information necessary to identify a control or its selected state, such as a selection indicator, generally needs at least 3:1 against adjacent colors. This does not mean that every purely decorative card border automatically has that requirement.

HueRoll lets you explore lighter and darker versions of a selected color and check its contrast against white or black. It cannot directly compare arbitrary pairs of colors or automatically determine AA or AAA compliance. Check combinations such as the selected deep teal line ■#165A61 and pale mint background ■#E4F1F0 separately before using them.