How Do You Choose a Dark Mode Color Scheme? | How to Select Background, Text, and Accent Colors

A dark mode website does not become usable simply by darkening its page background. Brightening the text alone may leave card boundaries, buttons, and form errors difficult to identify. This guide explains how to build a dark palette from the ground up by assigning clear roles to background surfaces, text, and accent colors, then checking how the interface behaves during actual tasks.

Create background layers and establish text roles

Start by treating the main page surface and the cards placed on top of it as different layers. The entire interface does not need to be the same black. Dark shades with slightly different brightness can organize content into groups. Because dark surfaces may differ only subtly, cards that visitors need to interact with may also require spacing or a visible outline.

Next, choose light colors for headings, body text, and secondary notes. Typography, size, and weight can establish hierarchy without making every label a different color. Do not make secondary information so faint that it disappears. A dark background with pure white text is not necessarily the best answer for every element; check the actual background behind each kind of text.

Reserve accent colors for meaningful actions such as links and the primary booking button. A deep brand color carried unchanged into dark mode may blend into a dark surface, so prepare lighter alternatives if needed. Add wording and symbols for states such as ‘Selected’ or ‘Needs attention’ rather than relying on color alone.

A practical palette for an event ticket booking page

Imagine a fictional event ticket booking page. A HEX code is a hexadecimal notation used to specify a color. Use dark blue-gray ■#151C26 for the overall page and a slightly lighter blue-gray ■#253241 for the booking card. The contrast ratio between these two surfaces is only about 1.31:1, so their subtle difference should not serve as the only visible boundary of an interactive card.

Use soft white ■#EBF1F5 for headings and body text. Its contrast is about 15.04:1 against the page background ■#151C26 and about 11.44:1 against the card ■#253241. For dates and supporting information, choose light blue-gray ■#BED0DC, which has about 8.22:1 contrast against the card. This creates text hierarchy while retaining sufficient brightness contrast for small details.

Give the primary ‘Book tickets’ button a light blue ■#82D4E6 fill with dark blue-gray ■#122636 lettering, producing about 9.22:1 text contrast. The light button also contrasts about 7.76:1 with the card ■#253241. White ■#FFFFFF lettering on the same light blue button would have only about 1.68:1 contrast, illustrating why button text and fill need to be selected together.

A date selection field can use the same dark card surface with a gray ■#8B9EAD border. This border contrasts about 4.71:1 with the card ■#253241. Display an explicit label such as ‘✓ Selected’ for the chosen date instead of expecting visitors to interpret a color change on its own.

For a validation message, combine a deep reddish-brown ■#4A2B31 background with pale salmon ■#FFD4C2 text, giving about 9.19:1 contrast. Because the error surface itself looks quite similar in brightness to the card, add a brighter salmon ■#FFBDA6 outline and the wording ‘! Please select a date.’ The outline contrasts about 8.12:1 with the surrounding card ■#253241.

Check focus indicators, contrast, and responsive layouts

For keyboard focus, a warm light yellow ■#E8B871 outline could be used. It contrasts about 7.15:1 with the dark card ■#253241. But next to the light blue button ■#82D4E6, the same yellow differs by only about 1.09:1. Provide a separating gap or a two-part focus indicator and verify that users can identify which control currently has focus.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, a defined accessibility conformance level, requires at least 4.5:1 contrast for ordinary text and 3:1 for qualifying large text. Borders and visual states necessary to identify or operate controls may also need at least 3:1 contrast against adjacent colors. The ratios above are calculated for specified opaque color pairs and do not certify the whole page.

On phones, cards may stack and descriptions wrap, changing the location of booking controls. Review the default, selected, error, and keyboard-focus states, not only a static screenshot. If photographs or translucent panels sit behind text, calculate contrast against the actual composited background.

HueRoll lets you enter HEX codes, explore shades and color combinations, and compare the selected color against white or black. It cannot automatically calculate contrast between arbitrary two-color pairs or determine Level AA compliance. Validate each actual neighboring pair separately, and refine backgrounds, text, and accents together so essential information and actions remain easy to find.