Semantic colours need lightness remapped in dark mode
Aliases: semantic colour remapping · Hunt effect · dark-theme status colour
What it is
Error red in a light UI is a somewhat dark stamp on white. Paste the same hex onto charcoal and it becomes a glowing stain; success green goes fluorescent with it. The four statuses still exist, but they no longer look like statuses. Dark mode has to retune lightness so wrong / passed / careful / fyi still land in their bins on a dark surround.
This is not inverting the page, and it is not a blanket chroma cut on every vivid hue.
Why it happens
Colour appearance follows the surround. The same red is an object colour on white and closer to a light source on a dark field — simultaneous contrast lifts chroma, and the Hunt effect makes a patch that is relatively lighter look more vivid. The deep saturated red that was meant to sit on white becomes both harsh and unmoored on charcoal; the class slides from “error” toward “alarm lamp” or “dead pixel”.
Keeping the class usually means moving the status colour lighter: error on a dark surface is a brighter red text or a pale red fill, not the deep fill prepared for white. Success, warning and info have their own light/dark anchors; they cannot share one “minus 20% lightness” pass. Fill and foreground also split: a light-theme pink wash often becomes a transparent red or a deeper red panel in dark theme, otherwise a mid red is neither a background nor a text colour.
Studying it
Present the same status set on light and dark grounds; collect classification and discomfort. Independent variables: whether lightness was recomputed for the dark ground, whether chroma moved with it, whether fill and type were remapped on separate tracks. Dependent variables: class accuracy, glare ratings, “is this still the same kind of error?” matches against the light theme.
Adaptation matters. Observers fresh from a bright room will read dark-theme status as harsher. Report adaptation time and display luminance, not only hex.
Where it stops holding
- Pure black grounds amplify halo; that is a background choice, not only an un-tuned status hue.
- High-contrast mode pushes status toward extreme figure/ground splits; the dark-theme light red is not a high-contrast recipe.
- Colour-vision-deficient observers mainly lose hue, not lightness. Retuning lightness will not restore red/green, but a wrong lightness can scramble the luminance cue they still have.
- If brand red also plays error, lightness shifts in dark theme change brand identity. That is a role clash, not a slider problem.
Applying it
- Give each semantic colour a light and a dark pair: type, fill and stroke separately — no single invert of the hex.
- View all four statuses side by side on the target dark ground and ask whether they can still be named at a glance. Retune lightness or chroma on the fluorescent or muddy one until the class returns.
- Prefer a stroke or a low-alpha fill for wash-style notices in dark theme, so a mid-chroma slab does not float on the dark surface.
- How to check: screenshot the same error in both themes, hide the copy, ask “are these the same state?”. If they are often seen as two different things, rebuild the dark lightness set rather than bolding the type.