A fleet console is watched at three in the morning as often as at noon. The dark theme is not a preference setting; it is the interface half the shifts actually use, and for a long time ours was a flat field of near-black rectangles with no edges.
Why "add drop shadows" was the wrong instruction
A shadow works by removing light from the ground beneath an object. A near-black canvas has almost none to remove. Composited over our canvas, a fully opaque black shadow — the darkest mark physically available — measures 1.13:1 against the surface it falls on. At any believable opacity it is closer to 1.05:1, which is below what most people can see on most screens.
1.13:1 the very best a pure black shadow can do on a dark canvas
Worse, it gets weaker the darker the theme goes. On true black a drop shadow is mathematically invisible: there is no light left to take away.
On a dark ground, depth is made of light
The techniques that do work all add light rather than subtract it. We measured each one against the same canvas before choosing.
- A black drop shadow: 1.03 to 1.08 to one.
- Lifting the surface itself one step: 1.09 to 1.19 to one.
- A rim highlight along the top edge: 1.09 to 1.23 to one.
- A coloured ambient glow: 1.30 to 1.73 to one.
So the budget goes to surface lightness first, a rim highlight second, and a rationed coloured glow third — reserved for the six things an operator must be able to find: the primary action, the selected screen, a healthy feed, a failure, keyboard focus, and the live vehicle on the map. Black shadow was demoted to the contact line under things that genuinely float.
The arithmetic that constrained the brand
One result was uncomfortable. Our maroon is #8A1538, and on the dark canvas it measures 2.09:1 — a shape you can only see because you know it is there. It had to be lifted. But pure red has a relative luminance of 0.2126, which means the reddest red that exists tops out at 4.18:1 on a dark card, under the 4.5 that body text requires.
A brand colour that cannot be read is not a brand colour on that screen. The honest answer is two tokens: one that fills, one that reads.
The maroon that fills a button and the maroon that sets a link are now different values in the dark theme, and the same value in the light one. Nothing else would have satisfied both contrast floors.