Text over images, and the scrim that makes it work
A hero image that averages to mid-gray can still contain a blown-out sky. Solve for the worst pixel, not the average one.
Tag
backgrounds
7 articles on backgrounds.
Why the background comes first
On a web page, one color covers more area than every other color combined. It sets the polarity of the interface, decides which text colors are even available, and determines whether your accent reads as confident or as a mistake. Every other color decision is downstream of it, which is a good argument for making it first rather than last.
The default is #ffffff, and the default is rarely right. Pure white is the brightest thing a display can emit; on an OLED phone at night it is genuinely uncomfortable, and in a bright room it flares. Most well-built interfaces sit a few percent off it — a very light warm gray, a barely-blue off-white — and the difference is not decorative. It lowers the peak luminance the eye has to accommodate while leaving the contrast budget essentially untouched.
The same holds at the dark end. A pure #000000 background maximises contrast on paper and produces smearing and halation in practice, particularly for readers with astigmatism. Dark interfaces that people actually like tend to land between #12 and #1e in each channel, with surfaces built by raising lightness rather than by stacking translucent white.
All 7 articles
Why your dark background looks blotchy
Those faint rings in your gradient are not a rendering bug. They are 8-bit quantisation, and the fix is about three percent of noise.
Choosing an accent color that survives your background
An accent has one job: to be the most noticeable thing on the screen at the moment it appears. What that requires depends entirely on what is behind it.
Elevation without shadows
Shadow is the absence of light. On a dark background there is barely any light to remove, so depth has to come from somewhere else.
Nobody's background is actually #ffffff
Pure white is a default, not a decision. Look at the products you admire and almost none of them use it. Here is what they use instead and why.
Dark mode is not an inversion
filter: invert(1) takes about four seconds and produces a theme where your brand blue has turned orange. Here is what a real dark theme requires.
Your background is the most important color on the page
One color covers more of your interface than every other color combined, and every decision downstream has to answer to it. Most teams pick it last.
Tools for backgrounds
- Background Color PickerThe main event — pick a background and watch a whole interface build itself around it.
- Surface System GeneratorOne background in, a full elevation stack out.
- Readable Text FinderGiven this background, what text color actually works?
- Dark Mode GeneratorTurn a light theme into a dark one that does not look inverted.
- Overlay & Scrim CalculatorHow dark does the scrim need to be for the text to survive?