High-contrast mode usually wants a more extreme figure/ground split and stronger borders
Aliases: high-contrast borders · extreme lightness split
What it is
In an ordinary theme, a button is recognised by a fill slightly darker than the ground. In high contrast that grey delta is not enough. Controls need a more extreme lightness split between figure and ground, plus a border you can actually land on, so shape is cut out of the field. A pale stroke on a pale fill is, here, not drawn.
Dark reading themes avoid pure black and white because of halo. High contrast often walks to that end. The two themes can run opposite lightness policies because they serve different people.
Why it happens
When contrast sensitivity drops, small-ΔL* edges go first. A fill difference is a small ΔL*; if the border is also thin and pale, the edge information is gone. Pushing figure and ground to opposite lightness ends puts the signal on the part of the sensitivity curve that still works. A thicker, darker (or lighter) border turns the edge from an area difference into a line difference — and lines often survive blur and low contrast better than fills.
“Stronger borders” are not decorative outlines. They have to remain edges on every allowed ground: primary buttons, disabled buttons, empty fields. Miss a ring and a whole class of controls vanishes in high contrast.
Where it stops holding
- Photographs and busy illustration cannot use this extreme split. In high contrast they should collapse to simple graphics or to text, not a white stroke around a photo.
- Some people halo badly, and extreme white type fattens. Look at border and type size together; do not only push the lightness gap.
- This is not copying an accessibility contrast threshold into the theme. Thresholds ask “is it at least readable?”. A high-contrast theme asks “is shape still there once midtones are gone?”.
Applying it
- In the high-contrast theme, every tappable control and every field gets a border role independent of fill.
- Body type and ground go toward opposite lightness ends. Mid-grey is reserved for true disabled, still marked with a border or a strike.
- Do not import the dark theme’s near-black/near-white comfort recipe and “tighten it a little”.
- How to check: crush the UI to two lightness stops (near maximum and near minimum) and see whether buttons, links and fields can still be circled. If not, add a border or push the fill to the other end until they can.