Text Color Contrast and Legibility in Dark UI

Adapting text for dark user interfaces involves far more than simply converting black text to white. Designing for dark mode requires softening pure whites, desaturating accent hues, utilizing opacity to build visual hierarchy, and slightly adjusting typography to prevent halation and eye fatigue while maintaining strict accessibility standards.

Avoid Pure White on Pure Black

Placing pure white text (#FFFFFF) on a pure black background (#000000) creates extreme contrast that causes visual vibration and optical distortion, known as halation. Halation causes text to bleed into the surrounding darkness, making it particularly difficult to read for users with astigmatism. Instead, pair off-white text (such as #E1E1E1 or #F5F5F5) with dark gray backgrounds (such as #121212). Dark gray surfaces also allow shadows and elevation layers to remain visible, which pure black obscures.

Establish Hierarchy Using Opacity

In light mode, text hierarchy is typically created by choosing darker or lighter shades of gray. In dark mode, applying white text with varying opacity levels against dark surfaces creates a more flexible and natural hierarchy.

  • Primary text: High-emphasis text, like headings and titles, should use roughly 85% to 90% white opacity.
  • Secondary text: Medium-emphasis body text and labels should use roughly 60% to 70% white opacity.
  • Disabled text: Low-emphasis elements and placeholder text should sit between 35% and 40% white opacity.

Using alpha transparency ensures that as surface backgrounds lighten to indicate depth or elevation, the text maintains proper contrast without requiring manual hex code adjustments.

Desaturate Saturated and Accent Colors

Colors that pass accessibility tests on white backgrounds frequently fail or cause visual strain on dark backgrounds. Highly saturated primary colors—especially deep blues, reds, and saturated purples—vibrate against dark surfaces and drop below required contrast thresholds. To fix this, desaturate these hues and shift them toward lighter, pastel variants. For example, a dark blue link on a light background should be converted to a light sky blue or cyan to remain readable in dark mode.

Adjust Font Weight and Letter Spacing

Light text on a dark background emits light directly into the eye, creating an optical illusion where letterforms appear thicker and bolder than their dark-on-light counterparts. To maintain consistent typographic hierarchy:

  • Slightly reduce the font weight of body text (for example, stepping down from Medium to Regular).
  • Slightly increase letter spacing (tracking) on body and small caption text to prevent glowing letterforms from merging together.

Measure Contrast Ratios Accurately

Accessibility guidelines such as WCAG 2.1 require a minimum contrast ratio of 4.5:1 for standard body text and 3:1 for large text. While light mode designs often aim for maximum contrast, dark interfaces achieve peak legibility within a balanced range—typically between 7:1 and 14:1. Ratios exceeding 16:1 often introduce excessive glare, making intentional reduction of pure contrast values essential for extended reading comfort.