F3.06.3shadow failure on dark backgroundsdesignresearch

Shadows are almost invisible on dark grounds

Aliases: black-on-black shadow · dark-theme cast failure · no headroom to darken

What it is

Copy the light theme’s “cards at 2 dp, dialogs at 8 dp” black casts onto a near-black ground and the screenshot barely shows a contour. Layers still exist in the tree. On glass, nothing reads as floating. A cast shadow works by darkening its surround; when the ground is already that dark, there is no darker headroom. This is the failure condition of a light-theme height model on a dark ground, not how dark mode ought to show surface height — that is a different method, mostly brightening surfaces. The point here is the invisibility, so nobody tries to rescue a physically exhausted cue by pushing black further or blurring more.

Why it happens

A penumbra is a negative luminance step against the adjoining surface. If that surface already sits near the display’s black point, the step is clipped, penumbra and ground fall into the same quantisation bin, and the edge vanishes. Raising opacity to 80% and blur to 40 px often yields only a dirty blotch, still without a readable height gradient, and it soils what little shadow detail the dark end had. Some people fake a shadow with light outer glow. That is self-luminance or rim light: it codes “this object emits” rather than “it blocked a lamp from above,” the height sign is unreliable, and it is not the same ruler as light-theme casts. Failure is in display dynamic range, not in “users not looking hard enough.”

Studying it

On a calibrated dark theme, sample a line of pixels along the supposed shadow with a colour table or eyedropper, and ask whether a monotonic darkening step exists; also run a height forced-choice with shadow versus none. If sampling shows no step and forced-choice is no better than no-shadow, the cast is a dead cue on that ground. Independent variables are ground luminance and shadow opacity; dependents are whether a step is measurable and whether choice beats chance. Do not judge a dark comp on an uncalibrated laptop in a bright office; ambient light will fake a remaining shadow.

Where it stops holding

When the ground is a lifted dark grey rather than true black, a very thin cast can still leave a step. Do not make “invisible on all dark UIs” a dogma — sample. If a shadow falls on a light photograph or a light card, the local ground is bright enough and the shadow works locally; a page-wide audit will mis-judge. High-contrast assistive modes may crush all darks to black and cut even that residual step. The remedy belongs to a surface-luminance system, not to shadow parameters. Further dp and blur will not unclip.

Applying it

  • Do not use the light theme’s shadow table as a height table in dark theme. Sample first. If the shadow forms no step, stop using cast as a hierarchy cue.
  • Do not rescue dark-ground shadows with “blacker black, bigger blur.” That only adds blotch.
  • When a floating layer must be separated in dark theme, hand the job to how much lighter the surface is than the ground, and do not mix the light and dark height tables on one screen.
  • Check: posterise a dark screenshot to eight levels. If shadow pixels land in the same bin as the ground, that shadow is inert on that page. Keep a sheet that says “light theme uses cast, dark theme does not.” A/B one dark modal with shadow versus none; if height judgements do not differ, delete the shadow so the code stops pretending it still works.

Related

  • Same group: F3.06.1 Shadows express how elements stack · F3.06.2 Elevation levels need a consistent light-source assumption
  • Nearby: F5.08.1 In dark mode, surface luminance rather than shadow expresses height · F5.07.1 Dark mode is not a simple invert · F5.08.2 Higher layers are lighter surfaces
  • Search terms: elevation · dark background · cast shadow · surface luminance

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F3.06.3