Choosing an accent color that survives your background

An accent color has a single job. When it appears, it should be the thing your eye goes to first — and nothing else on the screen should be competing for that position.

That is a relationship, not a property. The same hex is an excellent accent on one background and invisible on another.

The three requirements#

It must clear 3:1 against the background. This is the WCAG floor for non-text elements, and it is also roughly where a color stops registering as "a distinct thing" and starts registering as "a slightly different shade of the background". Below 3:1 your primary button is a suggestion.

It must be more chromatic than everything around it. If your surfaces carry chroma 0.03 and your accent carries 0.08, it will not pop. The gap needs to be large — an accent at 0.15–0.22 against surfaces at under 0.03 is the usual shape.

It must support readable text on top of it. A primary button is a fill with a label on it. The label needs 4.5:1 against the fill. This is where a lot of accent choices fall apart: a mid-lightness saturated color often supports neither white nor black text at 4.5:1.

That last constraint is the binding one, and it rules out a surprising amount of the color space.

The white-text cliff#

For white text to clear 4.5:1, the fill has to be reasonably dark — roughly below 45% relative luminance. For black text to clear 4.5:1, the fill has to be light — roughly above 45%.

There is a band in the middle where neither works. Saturated mid-tones live there.

The middle swatch is the same hue as the first, darker. The third is the same hue, lighter. Both work. The one in between — the one that looks most like "the brand color" — does not.

This is the single most common reason a primary button ends up with a subtly illegible label. The brand color was chosen as a logo color, where nothing sits on top of it, and then used as a button fill, where something does.

The fix is usually one step#

You almost never need a different hue. You need a different lightness of the same hue.

/* The brand color — for the logo, illustrations, large fills */
--brand: oklch(62% 0.19 258);

/* The action color — darker, so white text clears AA */
--color-action: oklch(52% 0.19 258);
--color-on-action: white;

Ten points of lightness. Same hue, same chroma, still unmistakably the brand — and now the label is readable.

In dark mode you go the other way: the action color gets lighter than the brand color, and the label flips to dark.

@media (prefers-color-scheme: dark) {
  :root {
    --color-action: oklch(72% 0.16 258);
    --color-on-action: oklch(18% 0.04 258);
  }
}

Hue shift from the background#

If your background carries a hue, the accent should not be the same one. A blue accent on a blue-black background works, but it works less hard than it could — the two are related, and relation is the opposite of what an accent wants.

A shift of 25–45° gives you an accent that clearly belongs to the same palette while still separating. A shift of 180° gives maximum separation and, on a page with a lot of accent usage, a certain amount of visual noise.

The default this site uses is +32°, which is a compromise that behaves well across the whole hue circle.

The discipline problem#

The hardest part of accent color is not choosing it. It is not using it.

An accent works because it is rare. The moment it appears on the primary button, the active nav item, the link color, the focus ring, the selected tab, the notification badge and the chart's first series, it has stopped being an accent and become a second background.

The rule that works: one accent-colored element per viewport, most of the time. If a screen has two primary buttons, one of them is not primary.

Everything else that needs to be interactive can be interactive without being accent-colored. Links can be underlined. Nav items can be marked with weight or a background tint. Focus rings need 3:1 but do not need to be the brand color.