Hierarchy that depends on shadow or gradient needs a substitute in high-contrast mode
Aliases: high-contrast replacement cues · lost shadow · gradient hierarchy
What it is
A deck of cards reads as stacked only because of drop shadows; a fade at the bottom hints that more content follows. Turn on high contrast and the soft shadows go, the gradient collapses to two flat stops, and both the stack and “there is more” vanish. Hierarchy that was told with shadow or gradient has to be retold in high contrast with borders, gaps, hard rules or explicit structure. Do not expect the light to still be there.
Dark theme switching to lighter surfaces is a different path. High contrast may also cut many mid lightnesses, so that lightening ladder can be flattened too.
Why it happens
High contrast works by removing midtones. A shadow is a midtone; a gradient is a continuous band of them. Delete them, or quantise them to two end colours, and the two languages that depended on light — depth, and “not finished” — have no carrier. People still know the product; they cannot see layers or truncation.
Substitutes have to be cues that still live in high contrast: a closed border for shape, a gap for separation, a hard line for a cut, words for “N more”. Those cues can look clumsy in the ordinary theme. They are not for the ordinary theme.
Where it stops holding
- Interfaces that already layer with borders and gaps barely need a separate high-contrast hierarchy scheme.
- Decorative gradients (hero atmosphere) can be deleted in high contrast with no substitute — they were not structure.
- If the high-contrast theme keeps a hairline grey shadow, low-vision users still will not see it. “We left the shadow” is not a substitute.
Applying it
- List every component that loses structure when the shadow or gradient layer is off: stacked cards, lists that fade at the bottom, inset wells that use inner shadow.
- Name a high-contrast substitute for each: stacked cards get a border plus offset; lists get a hard clip or “N more”; wells get a complete border.
- Do not copy the dark theme’s surface-lightening table into high contrast as the substitute.
- How to check: in the high-contrast theme, force shadows and gradients off (they should already be gone) and ask whether stack order and “not finished” can still be named. If not, there is absence, not a substitute.
Related
- Same group: F5.12.1 High-contrast mode serves low vision; it is not dark mode · F5.12.2 High-contrast mode usually wants a more extreme figure/ground split and stronger borders
- Nearby: F5.08 Hierarchy in dark mode · J2.15 Dark and high-contrast mode compatibility
- Search terms:
contrast flattening·high contrast·elevation