figure-ground-cues

Figure-ground separation uses visual cues like shadow, scrim, contrast, and blur to distinguish foreground elements from background context. It ensures interactive surfaces communicate hierarchy by calibrating depth, scale, and opacity so key elements read first without relying on color alone.

Apply visual hierarchy to modals by using scrim overlays to push background content into the ground, combined with shadow elevation and z-axis layering for the active surface. Select one or two calibrated cues so the modal or card reliably reads as the foreground figure.

Shape perceived prominence for hover and focus states using scale, contrast, saturation, opacity, and shadow elevation. These figure-ground cues reinforce separation between active and inactive layers without depending on color, ensuring interactive elements stand forward visually.

Conflicting visual hierarchy signals occur when multiple figure-ground cues like shadow, border, and opacity are applied at conflicting intensities. Avoid accessibility regressions by selecting only one or two calibrated cues per layer and ensuring z-axis stacking order correctly signals what is in front.

You can combine multiple visual cues like blur and shadow for interface layering, but you must avoid conflicting signals. Select one or two complementary cues at appropriate intensity, such as sharpness versus blur for focus and shadow for depth, to maintain clear figure-ground separation.