Skip to content
Memorise
All writing

design

The gradient that was unreadable in both directions

A day-to-night gradient behind text looks beautiful and fails contrast for both text colours at once. Measured: 3.85:1 at its worst.

Published
Reading time
3 minutes
Importance
0.45

Our marketing site has a section that walks through one person’s day, hour by hour. The obvious design is to let the light in the page track the hours in the content: start in morning paper, end in the dark. One long gradient behind the whole thing.

It does not work, and it does not work in a way you cannot see. A gradient from light to dark spends the middle of its length in the mid-tones, and a mid-tone is unreadable in both directions at once: too dark for the dark text, too light for the light text.

Nine percent of a section

Nine percentage points does not sound like much until you notice which nine. It is the middle — the part a reader passes through, at the pace the section was designed to be read at. And it looks completely fine, because "fine" is what a mid-tone looks like to anybody who already knows what the words say.

The first fix was structural: two separately-grounded halves with a text-free gradient strip between them, so no word ever sits on a mid-tone. A test sampled the real gradient and asserted the unreadable band existed — that is, it asserted the reason the structure had to be complicated.

Then the palette changed and it all went away

The dark version of the page was reviewed in one word: creepy. A three-dimensional face lit from one side against near-black is a horror-film frame no matter what the copy beside it says, and the promise of this product is that somebody is with your mother.

Lightening both ends of the gradient deleted the problem rather than solving it. The text clears 4.5:1 at every point, so the two grounds collapsed into one element and one gradient. The test inverted with it — from "there is an unreadable band, which is why this is split" to "there is no unreadable point, which is why it does not need to be".

The lesson we keep relearning is not about gradients. It is that "contrast is measured, not judged" has to mean measured against the ground the text is actually painted on — which, for a gradient, is a different colour every few pixels.

← All writing