Dark Mode

Applying a Dark Mode visual direction

You are being asked to apply a Dark Mode visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Dark Mode” means here

Dark mode is not a light interface with the colors inverted. Almost every rule that governs a light interface changes when the ground goes dark, and applying the light-mode logic to a dark surface is what produces the harsh, glaring results people complain about.

Three things change in particular. Shadow stops working — a dark shadow on a dark surface is invisible — so elevation has to be expressed by making raised surfaces lighter rather than by casting anything. Saturated color stops working — a color that reads correctly on white will vibrate uncomfortably on near-black — so accents have to be desaturated and lightened. And maximum contrast stops being the goal: pure white text on pure black is the most contrast available and one of the least comfortable things to read, because the bright glyphs bleed into the dark ground. The target is a strong contrast ratio, not the highest one obtainable.

Recommendations

• Use a dark grey as your base surface, not pure black. Something in the region of a very dark neutral gives you room to build lighter surfaces above it, which pure black does not.
• Express elevation by luminance. Each level closer to the viewer is a measurable step lighter than the level behind it. A modal is lighter than a panel, which is lighter than the page.
• Soften the text. An off-white, or white at reduced opacity, reads more comfortably than pure white and reduces the halo effect around glyphs.
• Rebuild the accent colors rather than reusing them. Take each accent from the light theme, reduce its saturation and raise its lightness until it reaches 4.5:1 against the dark surface without glowing.
• Aim for a contrast ratio somewhere in the strong-but-not-maximal range. Extremely high contrast is measurably compliant and genuinely tiring over long reading sessions.
• Leave content images alone. Never invert them. If a bright image feels aggressive against the dark surface, reduce it slightly with an overlay, and only if it does not distort the content.
• Carry semantic states across deliberately. Success, warning, and error need their own dark-theme values that still pass contrast, and they must keep their icons and labels so that meaning does not rest on hue alone.

Avoid

• Pure black as the base surface, which leaves no room to express elevation.
• Drop shadows used as the primary separator between layers.
• Accent colors carried over unchanged from a light theme.
• Pure white body text.
• Inverting images, illustrations, or charts.
• Semantic colors that pass on a light background but fail on the dark one.

How to check your own work

Before considering the result finished, look at it and ask:

• Is the base surface actually pure black? If yes, lighten it — everything else gets easier.
• Take two stacked surfaces and measure them. Is the nearer one lighter? If they are the same and separated only by a shadow, the elevation model is still the light-mode one.
• Is the body text pure white? Soften it and read a paragraph. The difference is immediately noticeable.
• Look at each accent color. Does it appear to glow or vibrate against the background? That is oversaturation, not brightness.
• Check every semantic state at its dark value, not just the neutral text. These are the ones most often carried over unmodified.

Dark Mode — Specification

Definition

Dark Mode is a web-interface design style built on a dark ground, in which elevation is expressed by luminance steps rather than by shadow, color is desaturated to survive on a low-light surface, and contrast is targeted at a strong rather than maximal ratio. It is not an inversion of a light interface: the mechanisms that establish depth, color, and legibility all differ.

Core principles

• Elevation is luminance. Surfaces nearer the viewer are lighter, because shadow is invisible on a dark ground.
• Color must be rebuilt, not reused. Accents from a light theme oversaturate against darkness and require new values.
• Maximum contrast is not the target. Very high contrast produces glare and halation; a strong bounded ratio reads better.
• The base is grey, not black. Pure black leaves no room to express levels above it.
• Content is never inverted. Images and illustrations keep their own values.

Visual characteristics

• A dark neutral base surface rather than pure black.
• Stacked surfaces stepping progressively lighter toward the viewer.
• Off-white or reduced-opacity body text rather than pure white.
• Desaturated, lightened accent colors.
• Semantic states re-derived for the dark surface, each with its icon and label.
• Content imagery left at its natural values, at most gently attenuated.

Rules

1. Dark grey base. The ground leaves room for elevation. Acceptance criterion: The page background is a solid color with a relative luminance between 0.02 and 0.08; #000000 is not used as a base surface.

2. Elevation by luminance. Depth is expressed by lightening, not by shadow. Acceptance criterion: Each elevated surface measures a higher relative luminance than the surface beneath it, and shadow is not the primary mechanism of separation.

3. No pure white text. Body copy is softened. Acceptance criterion: The primary text color has a lower relative luminance than #FFFFFF, or is applied at an alpha of 0.87 or less.

4. Desaturated accents. Color is rebuilt for the dark surface. Acceptance criterion: Each accent color has a lower saturation than its light-theme equivalent and measures at least 4.5:1 against the dark background.

5. Bounded contrast. Legibility is strong rather than maximal. Acceptance criterion: The measured contrast ratio between primary text and its background falls between 7:1 and 15:1.

6. Images are not inverted. Content keeps its own values. Acceptance criterion: No content image, illustration, or chart carries filter: invert; attenuation, where present, is applied as an overlay only.

7. Semantic parity. Meaning survives the theme change. Acceptance criterion: Each semantic state retains its icon and text label, and its color measures at least 4.5:1 against the dark background.

Avoid

• Pure black as the base surface.
• Drop shadows used as the primary separator between layers.
• Accent colors carried over unchanged from a light theme.
• Pure white body text.
• Inverted images, illustrations, or charts.
• Semantic colors validated only against a light background.

Acceptance criteria

• Rule 1: The base surface luminance falls between 0.02 and 0.08 and is not pure black.
• Rule 2: Each elevated surface is measurably lighter than the one beneath it.
• Rule 3: Primary text is softer than pure white.
• Rule 4: Every accent is desaturated relative to its light equivalent and meets 4.5:1.
• Rule 5: Primary text contrast falls between 7:1 and 15:1.
• Rule 6: No content image is inverted.
• Rule 7: Every semantic state keeps its icon and label and meets 4.5:1.

Blocking failures

• Elevation is expressed only by shadow, so layer order is invisible on the dark ground and stacked surfaces cannot be distinguished.
• A semantic state fails contrast on the dark background or has lost the icon and label it carried in the light theme, leaving its meaning dependent on a hue that no longer reads.
• Text or an essential control indicator falls below its required ratio because a light-theme color was reused without re-derivation.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• The elevation scale (Rule 2) compresses at narrow viewports as layers collapse, but every surface pair that remains stacked keeps a measurable luminance difference; separators are not substituted for the step.
• Rule 5 is re-verified at increased text scaling and at 200% zoom, where larger glyphs make halation more pronounced and may require softening the text further within the permitted band.
• Accent and semantic values (Rules 4 and 7) are independent of viewport and hold unchanged at every breakpoint.
• Where a narrow layout places content over an attenuated image, Rule 6’s overlay is re-measured so it neither distorts the image nor drops text below its ratio.