Short answer
Remap semantic tokens, don't invert values. Use dark grey rather than pure black for the base surface, express elevation by making raised surfaces lighter, lift accent and status colours to lighter, slightly less saturated siblings so they keep contrast, and soften body text from pure white. Inverting a light palette flips lightness but also breaks hue, brand recognition and the elevation cues users rely on.
Inverting colours (255 minus each channel) turns a white page black and black text white, which looks like a dark mode for about a second. It also turns brand blue into orange, green success into magenta and every photograph into a negative. Even a smarter inversion that flips only lightness keeps problems: a shadow-based elevation system stops working, because shadows are barely visible on dark surfaces; mid-tone accents that passed on white now sit too close to the dark background; and saturated colours that looked fine small on white glare on black. A dark theme is a second mapping of the same semantic roles to different base colours, designed with the same care as the first.
Material's dark theme uses dark grey rather than black surfaces, noting that shadows remain more visible and light text is more comfortable. Because shadows lose most of their effect on dark backgrounds, elevation is expressed by lightness instead: surfaces closer to the user are lighter. Material implements this with semi-transparent overlays that increase with elevation; Apple's dark mode has 'base' and 'elevated' background sets, with elevated colours brighter so foreground interfaces appear to advance. The table applies white overlays of increasing strength to a #121212 base and shows the resulting surfaces and their contrast with near-white and mid-grey text. Each step lowers text contrast a little, which is why secondary text that just passes on the base surface can fail on a raised card.
Mid-tone and dark accents that pass on white lose contrast against near-black: a blue that is 5:1 on white may be under 3:1 on #121212. Dark themes therefore use lighter siblings of the same hues, typically from further up the colour scale, and often with slightly reduced chroma because fully saturated colours appear to vibrate against dark backgrounds. Apple's guidance is to supply bright and dim variants in an asset catalogue and to test with Increase Contrast and Reduce Transparency, warning that Increase Contrast in dark mode can reduce the contrast between dark text and a dark background. The mechanism is the same in every case: the semantic token (action-primary, status-danger-text) keeps its name; the base colour it points to changes per mode.
Pure white text on near-black is maximal contrast but can look harsh; many dark themes use an off-white around #E0E0E0 to #E6E6E6 for primary text and a mid-grey for secondary, both comfortably above 4.5:1 on the base surface. Images and illustrations need attention too: transparent PNGs with dark line art vanish on dark surfaces, and pure-white illustration backgrounds glare. Provide dark-mode variants or place such images on a light card. Finally, set the CSS color-scheme property so browser-drawn controls, scrollbars and form fields match the theme, and use the prefers-color-scheme media query to follow the user's system setting by default rather than forcing a mode.
CSS Color 5's light-dark() function lets one declaration hold both values of a token, resolved by the element's used color-scheme.
| White overlay | Surface | CIELAB L* | #E6E6E6 text | #9E9E9E text |
|---|---|---|---|---|
| 0% | #121212 | 5.5 | 15.01:1 | 6.99:1 |
| 5% | #1E1E1E | 11.3 | 13.35:1 | 6.22:1 |
| 8% | #252525 | 14.7 | 12.28:1 | 5.72:1 |
| 11% | #2C2C2C | 18.0 | 11.18:1 | 5.21:1 |
| 14% | #333333 | 21.2 | 10.12:1 | 4.71:1 |
| 16% | #383838 | 23.5 | 9.39:1 | 4.37:1 |
Why: Elevation relied on shadows, which vanish on dark surfaces.
Fix: Make raised surfaces lighter than the base.
Why: It was checked only on the base surface, and dialogs sit on the lightest surface.
Fix: Check each text token against the highest-elevation surface.
Why: The color-scheme property was not set.
Fix: Declare color-scheme: light dark (or dark) on the root element.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
ConventionModerate evidence
Material's dark theme uses dark grey rather than black surfaces and expresses elevation by making surfaces lighter through semi-transparent overlays, because shadows are less effective on dark backgrounds.
ConventionModerate evidence
Apple's dark-mode guidance recommends adaptive semantic colours, base and elevated background sets, a contrast of at least 4.5:1 (7:1 recommended for small custom-coloured text), and testing with Increase Contrast and Reduce Transparency.
FactModerate evidence
CSS Color Level 5 defines a light-dark() function that chooses between two colours according to the element's used color-scheme.
Caveat: CSS Color 5 is a Working Draft; check browser support before relying on it.
Source: CSS Color Module Level 5
Colourwise analysisStrong evidence
Each increase in a dark surface's lightness for elevation lowers the contrast of text placed on it, so secondary text that just passes on the base surface may fail on raised surfaces.
Based on: Computed by Colourwise by compositing white overlays on #121212 and applying the WCAG formula; see the table.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 1.4.3: Contrast (Minimum) (WCAG 2.2)
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.