How to Choose Colors When Using Dark Mode on Smartphones: Color Schemes to Prevent Black Crush

On a smartphone in dark mode, a page can look suitably dark while card boundaries and the darker details of images become difficult to distinguish. When dark tones lose their visible differences, this is sometimes called “black crush.” However, lost shadow detail in a photograph also depends on the original image and the screen displaying it; changing the page background alone cannot always fix it. This guide focuses on separating dark surfaces and maintaining usable controls on a small screen.

Do not make every surface pure black; identify boundaries in more than one way

Dark mode uses a dark visual theme, but the page background, information cards, and text do not all need the same brightness. On a smartphone, cards often form a long vertical list. The difference between two dark surfaces may be hard to notice, so use spacing and visible outlines instead of relying only on a slightly lighter card fill.

The text need not be pure white everywhere either. Use light text for headings and important times, and a slightly quieter light tone for supporting information, while keeping sufficient measured contrast against the actual background. Making secondary text too dark simply to reduce its prominence can leave it difficult to see when a phone’s brightness is lowered.

If shadows in a photograph or map appear to disappear, inspect the image as well. Adjusting the surrounding interface background and correcting missing details within the image are different tasks. Screen settings and ambient light can also change what a viewer perceives. No single HEX value can be guaranteed to prevent black crush across all devices.

An eight-color example for a nighttime bus timetable on mobile

Imagine a mobile search screen listing nighttime bus departures. Each card shows a departure time, arrival time, and service status, and the visitor can continue to reserve a chosen service. The HEX values below (six-digit hexadecimal color codes beginning with #) are suggested colors for this screen, not a universal palette.

Use almost-black blue-gray ■#141B24 for the page background and a slightly lighter blue-gray ■#252F3B for bus-service cards. Their contrast ratio is only about 1.28:1, so that difference alone is not enough to clearly establish the card boundaries. Leave space between cards and add a blue-gray ■#8396A6 outline. The outline contrasts at approximately 4.44:1 against the card ■#252F3B and 5.68:1 against the page background ■#141B24.

Display departure times, arrival times, and service names in pale gray-white ■#E6EDF4 on the card background ■#252F3B. Their contrast ratio is approximately 11.49:1, increasing to around 14.67:1 on the main page background ■#141B24. Show supporting details such as travel duration and boarding location in a quieter light blue-gray ■#B6C6D7, which still contrasts at approximately 7.78:1 against the card ■#252F3B. Use size and weight, not very faint text, to establish the reading order.

On the selected bus-service card, add a thick bright cyan ■#79DADC line down the left side and the label “Selected.” The line contrasts at approximately 8.31:1 against the card background ■#252F3B. The label means visitors do not have to identify the selection from color alone. Give the “Reserve this service” button the same bright cyan ■#79DADC background and dark blue-gray ■#10272D lettering. The text-to-button contrast is approximately 9.54:1; the button contrasts at approximately 8.31:1 against the card ■#252F3B.

For keyboard users, add a separate light amber ■#FFCF83 focus outline around the control currently receiving keyboard input. It contrasts at approximately 9.37:1 against the card background ■#252F3B. Focus indicates where the next keyboard action will take place, whereas “Selected” indicates the bus service the visitor has chosen. Keep these two states visually distinct.

Test lower screen brightness and transitions between light and dark themes

Check the finished design on a phone at reduced brightness. Can visitors still see the times, supporting details, and card outlines? Does enlarged text retain a clear relationship to the correct bus service? If the page includes dark photographs or a route map, inspect their shadow details separately. Passing a numerical contrast check does not guarantee identical visibility on every screen.

CSS (Cascading Style Sheets, the rules controlling a page’s appearance) supports prefers-color-scheme, which detects the user’s requested light or dark theme through their device or browser settings. If the page switches automatically, change both foreground and background colors together, and inspect form fields, buttons, and browser-provided controls as well. If the site also allows a manual light-theme choice, test whether that choice is retained when navigating to another page.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires contrast of at least 4.5:1 between normal-sized text and its background, or 3:1 for large text. Visual information necessary to identify interface components and their states, such as outlines, generally needs at least 3:1 against adjacent colors. HueRoll can compare a selected color with white or black, but it cannot directly compare arbitrary pairs or automatically determine AA or AAA compliance. Check pairs such as the card background ■#252F3B and its outline ■#8396A6 using a separate contrast calculation before applying them.