--:--:--Douala, Cameroon

Available for work

Design systems

The accent colour that only works big

The same hex that looks superb on a 56px button is unreadable on a 13px label, and design tools will not tell you.

4 min read

Brand accents are chosen at poster size and then used at caption size. A warm orange on near-white sits around 2:1. As a large filled button it is excellent. As a 13px label it is close to invisible, and the eyebrow device on most templates is exactly that label.

Split the token

One accent token is not enough. Keep the brand colour for plates — buttons, rules, dots, anything large and filled — and add a darkened variant that is the only thing allowed to be accent-coloured type. Then the rule is simple enough to hold: ink sits on the accent, never in it.

The reverse trap is just as common. Swap a dark accent for a pale one and every rule that put white on it silently inverts from fine to unreadable. When an accent's lightness changes, go and look at everything sitting on top of it rather than trusting one pass of a checker.

Check it automatically

A contrast pass over the built pages catches this in seconds, and it has to walk up the ancestors to find the effective background, because the element's own background is transparent nearly everywhere. Treat a flag over a photograph as go and look rather than as a false positive: the last time I dismissed one, the brightest part of the image was sitting directly behind the second line of the headline.