Why palette generators disappoint
The usual first move is to visit a colour-palette site, spin the wheel until five swatches look pleasant together, and paste them in. The result is often worse than three greys would have been.
The reason is mechanical. Most of those tools vary hue while holding lightness roughly constant, because that is what makes a strip of swatches look harmonious. Convert the result to greyscale and the five colours collapse into nearly the same tone. You now have a page where nothing is lighter or darker than anything else: no ranking, and text sitting on its background at about two to one.
Hue is the least useful of the three properties you control. Lightness is the most useful, and it is the one those tools hold still.
Use hue, saturation, lightness — and mostly move lightness
The working model is HSL: hue (which colour), saturation (how much of it), lightness (how close to white or black). Photoshop's picker is HSB, sometimes called HSV, where the third slider is brightness and full brightness gives the pure colour rather than white. Photopea, GIMP and Krita offer both. Know which you are looking at, because the same number means different things.
A method that takes two minutes:
- Pick one hue you like.
- Build a five-step ramp by moving lightness only: roughly 95, 80, 55, 30, 12. Drop saturation a little at the extremes so the pale end is not milky and the dark end not muddy.
- Add one accent hue, well separated on the wheel, reserved for the single thing you want people to act on.
That is a complete palette. It has hierarchy built into it, because it was built out of the property that produces hierarchy.
Contrast is a number you can check in twenty seconds
Text legibility is not a matter of opinion. There is a standard ratio, computed from the relative luminance of two colours, that runs from 1:1 (identical) to 21:1 (black on white).
The thresholds worth memorising, from the Web Content Accessibility Guidelines:
- 4.5:1 for normal body text.
- 3:1 for large text (roughly 24px, or 18.7px bold) and for interface components and meaningful graphics, such as the border of an input box or a line on a chart.
- 7:1 if you are aiming at the stricter AAA level.
Some numbers to make this concrete. Mid-grey #767676 on white is 4.54:1 and passes. #777777 on white is 4.48:1 and fails. That is one hex step. The habit of setting secondary text in a light grey because it looks refined usually fails by a margin that small, and the person it fails for is on a bus in the sun.
More: pure yellow #FFFF00 on white is about 1.07:1 — effectively invisible, which is why yellow highlighter works on paper and yellow text does not work anywhere. Pure blue #0000FF on white is about 8.6:1 and is fine. The same blue on black is about 2.4:1 and fails badly. So "blue is readable" is not a fact about blue. Contrast is always a property of a pair.
Free ways to check:
- The WebAIM Contrast Checker, a web page that works in a phone browser.
- Chrome and Firefox developer tools show the ratio inside the colour picker when you inspect text.
Why 4.5:1 is a floor and not a goal
Your design is being read in conditions you did not test.
A phone at 30 per cent brightness in daylight loses most of the difference between a pale grey and white. Cheap panels have poorer contrast than the screen you designed on and often a colour cast. And eyes age: the lens yellows and the pupil narrows, so a sixty-year-old retina receives roughly a third of the light a twenty-year-old's does.
None of this is an argument for ugly high-contrast design. It is an argument for treating a marginal pass as a fail: at 4.6:1 you have no headroom for any of the conditions above.
Colour vision deficiency is a constraint, not a charity
Roughly one man in twelve and one woman in two hundred has some form of colour vision deficiency, most commonly a reduced ability to separate red from green. In a room of thirty, assume someone cannot read your red-versus-green chart.
The fix is not "choose friendlier colours". Blue and orange are genuinely easier to tell apart than red and green, but swapping hues only moves the problem: some deficiency defeats every hue pair, and none survive a black-and-white photocopy.
The actual rule: never encode information in hue alone. Add a second channel.
- A red cross and a green tick differ in shape as well as colour. Two coloured dots do not.
- Label chart lines at the end of each line instead of colour-matching them to a legend.
- Give the two states different lightness as well as hue, or add a pattern, icon or position as the second signal.
To test free: Coblis, a browser-based colour blindness simulator you upload an image to; GIMP has display filters for several deficiency types under View, Display Filters. Or the cheapest test of all — desaturate the image, and see whether the meaning survives.
Dark mode is not the same colours inverted
Pure white text on pure black is uncomfortable for many people and genuinely bad for readers with astigmatism, where bright text on a dark field blurs and smears — an effect called halation. The common fix is to back off both ends: something near #E6E6E6 on something near #121212.
And check your ratios again: a colour that passed comfortably on white often fails on a dark background.
Today
Take a design you have made. Desaturate a copy and ask whether the hierarchy survives. Then pick your two most-used text colours and run them through a contrast checker against their actual backgrounds. If either comes in under 5:1, darken it until it does not.
Before you move on