Colours that stay readable

The accent colour has one job

An accent colour marks the thing you want tapped. That is its whole function. It works because it is rare on the page: one bright element among calm ones reads as the answer to the question the visitor arrived with, and the eye finds it first.

Which is why accenting everything destroys it. When every button carries the accent, the colour stops pointing anywhere and becomes a background pattern. The page is not louder, it is flatter, and the visitor must read all six labels to find the one they wanted. Give the accent to one element, or two at most, and leave the rest in the template’s ordinary colours.

Text on a photograph

A photograph is not a background. It is hundreds of different backgrounds, and your text is sitting on all of them at once. A name that reads perfectly against a dark jacket disappears where the sky begins, and the version you checked on your own screen was the lucky crop.

The fix is a darkening layer between the image and the text, not a heavier font. Bold type on a busy photograph is still busy: the letters get thicker but the noise behind them does not go away. A dark veil over the whole image flattens the range underneath, so every part of the picture becomes something the text can sit on. tapmy.link gives that layer a slider for this reason — push it up until the text is comfortable; the photograph is still visible at the setting that works.

Contrast, in plain terms

Forget the numbers. Contrast is the difference in lightness between the text and what is behind it, and the failures are always the same shape: mid-grey text on a light grey card, a pale tint on white, white on a colour that turned out to be lighter than it looked. If you have to lean in, so does everyone else, and most of them will not bother.

Dark templates deserve extra care, because light text on a dark background looks thinner than the same text the other way round. Elegant lettering that reads well as black on white frays into the background when inverted. Keep the weight ordinary rather than light, and give the text a bit more room.

• Squint at the page: if a label merges into its button, the pair has failed.
• Take a greyscale screenshot — colour differences vanish, lightness differences remain.
• Check the smallest text first, not the heading; small text fails earliest.
• Look at the page you have not touched in months, not only the block you just edited.
• Ask someone over forty to read it at arm’s length without adjusting anything.

Brand colours that fail as backgrounds

A brand colour is usually designed for a logo: a small shape on a white field, at high contrast, seen for a second. Enlarged to a full page background it behaves completely differently. Saturated yellow and cyan become glare on a phone at full brightness. Mid-tone red, orange and green are the awkward cases, because white text on them is slightly too dim and black slightly too dark, and neither is right.

The practical answer is to use the brand colour as an accent and let a neutral carry the page. This applies to logos too: social brand marks are drawn in their real colours, but when a brand colour cannot hold contrast against your background the mark falls back to the template’s text colour, because a row of half-invisible icons serves nobody.

Colour alone is not a label

Anything you communicate with colour only is invisible to part of your audience. A green button meaning available and a red one meaning sold out are the same button to a reader who does not separate those hues, and the two most common forms of colour blindness affect exactly that pair. The same is true of a faint tint marking which item is new.

The remedy is small: add the word. Sold out written on the row costs eight characters and works for everyone, in every light, including the visitor whose screen is set to a warm night filter. Colour can reinforce the meaning, but it should never be the only thing carrying it.