Climb the grey ladder

Here is the fastest way to make an interface look like somebody designed it, and it takes about two minutes.

Open your stylesheet. Count how many distinct text colours you are using. If the answer is more than three, or if any of them is #000, you have found the problem.

Use exactly three text colours. Never use pure black.

That is the move. Primary text, secondary text, tertiary text. Nothing else.

Why three

Hierarchy is how a reader knows what to look at first. You have three dials to create it: colour, weight and size. Developers reach for size first, because size is the one that feels like it should work. It is the weakest of the three and the ugliest, because a page where important things are simply bigger reads as shouting.

Colour is the strongest dial and the cheapest. A heading in near-black next to body text in mid-grey is instantly, obviously a hierarchy, at the same size and the same weight. You have spent nothing.

Three levels is enough because there are only three jobs. What you are meant to read. What supports it. What you only need if you go looking for it: timestamps, field labels, helper text, the byline.

Four levels is where it starts to fall apart, because nobody, including you, can reliably tell level three from level four, and the distinction stops carrying information.

Never pure black

Pure black on pure white is the highest contrast a screen can produce, and it is uncomfortable to read for the same reason a bare bulb is uncomfortable to look at. It also looks cheap, because almost nothing in the physical world is #000.

Tint all three greys toward a hue. Warm, if you want the page to feel like paper. Cool, if you want it to feel like a tool. It barely matters which, as long as it is consistent, and the effect is immediate: the page stops looking like an unstyled document.

/* Before */
color: #000;
color: #666;
color: #999;

/* After: HSL, one hue, three lightness steps */
--ink-1: hsl(38 14% 13%);   /* what you read */
--ink-2: hsl(38  9% 36%);   /* what supports it */
--ink-3: hsl(38  7% 48%);   /* what you go looking for */

Use HSL rather than hex, and the reason is practical rather than aesthetic. In HSL you can see the relationship: same hue, same rough saturation, three lightness values. You can add a fourth step in the right place by eye. In hex, #1f1c17 and #5b5650 are two unrelated strings, and you will end up picking your greys from a colour picker at random.

The part people get wrong

The instinct, when something does not stand out, is to make it stronger. Bigger, bolder, darker, or a colour.

Do the opposite. Turn down everything around it.

If your primary button is competing with a secondary button, do not make the primary button louder. Make the secondary one quieter: no fill, --ink-2 text. If your page heading is getting lost, do not enlarge it. Push the metadata under it to --ink-3.

This is the whole difference between a page that has been designed and a page that has been escalated. Once you see it you will not be able to unsee it, and it generalises to every other decision on this list.

The accessibility dividend

Low text contrast is the most common accessibility failure on the web by a very wide margin. It appears on the large majority of home pages tested every year, more often than missing alt text, more often than unlabelled form fields.

You will fix most of your instances of it by accident, doing this. Not because you set out to, but because “use three deliberate greys” and “do not use six accidental ones” happen to be the same instruction. Check your --ink-3 against your background, since tertiary is the one that tends to drift too light, and you are done.

Try this week

Open the component you are least happy with. Search the file for color: and #. Write down every distinct text colour you find.

Replace all of them with three custom properties. Tint them. Delete #000 wherever it appears. Change nothing else: no spacing, no type sizes, no layout.

Then look at it. The improvement is almost always larger than you expect from two minutes of find-and-replace, and it costs you nothing anywhere else.