law-of-figure-ground

Use a scrim, a semi-transparent dark overlay, to reduce the background's visual presence so the modal reads as unambiguous figure. Combine the scrim with elevation shadow and sufficient luminance contrast between the modal surface and the page.

Figure-ground is the perceptual reflex that separates a visual field into a subject (figure) and its context (ground). In UI, foreground elements like cards and modals must read as figure through elevation, contrast, and bounded edges, while page surfaces recede as ground.

Dark mode inverts the luminance relationship between figure and ground, and shadows that signal elevation in light mode often become invisible. Use subtle light-colored borders or reduced-luminance fills to maintain depth hierarchy when shadows disappear.

The image competes as figure against the text, collapsing the figure-ground separation needed for legibility. Separate text from imagery with a color overlay, blur, or gradient layer so the text becomes the unambiguous foreground.

Use the von Restorff effect when emphasising one element among peers at the same layer, such as a highlighted button in a group. Use figure-ground when establishing which entire layer is foreground versus background, as with modals and overlays.