Is White Text Appropriate for Dark Mode? | How to Think About Contrast for Readability

Should text in dark mode be pure white? Light lettering stands out against dark surfaces, but using exactly the same white for headings, paragraphs, and supporting notes can make the information hierarchy harder to follow. Here is how to compare pure white with off-white, check actual contrast ratios, and choose suitable text colors for links and buttons.

White text is valid, but its brightness can vary by role

Dark mode is an interface presentation built around dark surfaces. No rule says that pure white text is inappropriate. For example, white ■#FFFFFF against dark blue-gray ■#171E28 has a contrast ratio of about 16.76:1, creating a strong brightness difference. A HEX code is hexadecimal notation used to specify a color.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, an accessibility conformance level, ordinary text needs at least 4.5:1 contrast with its background, while qualifying large text needs at least 3:1. A contrast ratio describes the relative brightness difference between two colors; a larger ratio means a greater light-dark difference.

Off-white ■#E7EDF3 is slightly less bright than pure white, yet its ratio against the dark background ■#171E28 is still about 14.21:1. Both pairs greatly exceed the ordinary-text minimum. However, neither pure white being universally best nor off-white always reducing eye strain is a justified assumption. Consider the overall screen brightness, font weight, and viewing environment.

For example, white can highlight headings, off-white can carry body copy, and a more subdued shade can distinguish supporting information. Do not reduce the brightness of small notes so far that they lose sufficient contrast against their actual background.

Example text and button colors for a dark information page

Consider a fictional help-center page. Use dark blue-gray ■#171E28 for the page background and a slightly lighter ■#253141 for information cards. If headings are white ■#FFFFFF, they have about 16.76:1 contrast against the page and about 13.17:1 against the cards.

For the body text, use off-white ■#E7EDF3. Its contrast is about 14.21:1 on the page background ■#171E28 and about 11.17:1 on the card background ■#253141. Use text size and spacing as well as color to establish a clear difference between headings and paragraphs.

Supporting notes on the cards can use light gray ■#AFC0CD. This has a contrast ratio of about 7.05:1 against the card background ■#253141. Notes may contain dates and instructions needed to complete a task, so they should be less prominent without disappearing into the surface.

An inline link in light blue ■#8BCCE6 has about 7.45:1 contrast against the card ■#253141. Add an underline so readers do not need to distinguish its color alone. If the same light blue ■#8BCCE6 fills a button, use dark navy ■#132535 lettering for about 8.84:1 contrast. White ■#FFFFFF lettering on that light button gives only about 1.77:1 and is not suitable.

Watch for overly muted notes and changes in interaction state

Suppose the supporting text is darkened to blue-gray ■#73869B. Against the card ■#253141, the contrast drops to about 3.52:1. It exceeds the 3:1 requirement for qualifying large text, but falls below the 4.5:1 requirement for ordinary text, including small notes. Never assume that a color suitable for a large heading is also suitable for small paragraphs.

When a card and page surface are similar in brightness, use spacing or a boundary to organize the layout. Check whether keyboard focus indicators, selected navigation, and button outlines remain identifiable against adjacent surfaces. Visual information necessary to identify or operate controls may require at least 3:1 non-text contrast.

Also review text shown on hover (when the pointer rests over an element) and descriptions that wrap differently on mobile. With photography or translucent overlays, the effective background varies by position. The values here describe specified opaque solid-color pairs, not guaranteed conformance for an entire screen.

HueRoll lets you enter HEX codes, examine lighter and darker variations and palette options, and compare a selected color against white or black. It cannot automatically check two arbitrary colors or determine Level AA compliance. In dark mode, choose colors for headings, body text, notes, and actions against their own backgrounds rather than imposing one text color everywhere.