How to choose an accent colour, and why it belongs to actions

What an accent colour is for

On a calm page of neutrals, a single saturated colour is the first thing the eye finds. That makes it valuable, and like anything valuable it loses its worth when spent everywhere. In interface design the accent, sometimes called the primary or action colour, marks the things a visitor can do: the main button, text links, the selected tab, the focus outline, a checked box, the active day in a booking calendar.

Kept to that job, it gives every screen an instant answer to the question "what do I do next?". Visitors learn the rule within seconds, usually without noticing they've learned anything.

What happens when it decorates too

The common slide goes like this. The accent appears on buttons. Then on a heading, because the section looked plain. Then on icons, a background band, a pull quote and a highlighted word in the hero. Each addition seems harmless. Together they mean the colour no longer signals anything, and the page has to fall back on size and position to show what's clickable.

• Clickable and static things look alike. A coloured heading reads as a link; people tap it and nothing happens.
• The main action gets lost. If six things on a screen are orange, the orange button isn't special any more.
• Status gets confused. If the accent is red and it's also used for decoration, an error message in red no longer stands out as an error.
• The palette feels louder than the content. Photographs and product colours have to compete with the interface.

A simple audit: screenshot a page, desaturate everything except your accent, and look at what's left. Every coloured element should be something a visitor can click, or a state they need to notice. Anything else is decoration and should move to a neutral.

How to choose an accent colour

1. Find a reason. The shopfront paint, the product, the packaging. A colour with a story behind it is easier to commit to than one picked from a wheel.
2. Check its contrast against the ground. Under WCAG 2.2, the visual boundary of a control needs at least 3:1 against what's next to it. Text links in the accent need 4.5:1 against the background, the same as body text.
3. Check the text on it. White or near-black text on an accent-coloured button also needs 4.5:1. Yellows, light greens and cyans rarely manage that with white text; pair them with dark text instead.
4. Make a dark-theme version. The deep blue that works on cream usually disappears on charcoal. Pick a lighter, slightly less saturated variant for dark grounds and check it again.
5. Keep it away from your status colours. If you need red for errors and green for success, a red or green accent makes those harder to read. Choose a different hue or make the error style unmistakable with an icon and text.

Black, and other quiet accents

An accent doesn't have to be bright. Black on an off-white ground, or near-white on a dark one, is a legitimate action colour for monochrome brands, galleries and fashion. It works when the rest of the palette is soft greys, so solid black buttons and underlined links still stand apart. The cost is that you lose colour as a signal and lean entirely on shape: filled buttons, clear underlines and an obvious focus outline become essential.

Decorative colour that isn't the accent

Some styles want a second, decorative colour. Anticode's Playful system, for instance, pairs a cobalt action colour with sunflower-yellow shapes behind the hero. That works because the two have different jobs: the yellow never appears on a control, and it doesn't need to carry text. At around 1.5:1 against Playful's cream ground it couldn't anyway. If you add a decorative colour, make sure it can't be mistaken for something clickable.

Accent colours in Anticode

Anticode's design systems are each built around one action colour, and you can swap it for any of eight: red, orange, gold, green, teal, blue, pink or black. Each comes in two values, a deeper one for light themes and a lighter one for dark themes; the light-theme values all clear 5:1 against white. The same colour drives the buttons and the keyboard focus outline, so changing it moves those cues together.

On design-engine pages the code editor keeps only text, section order and the :root colour tokens, so you can't recolour a single heading there; decorative use of the accent is more of a risk in app builds and exported copies. The Critic flags a single word recoloured in the headline, one common form of decorative accent use, but it won't catch every misuse. The desaturation test above takes a minute and catches the rest. For the wider palette around the accent, see website colour palette ideas.

Questions people ask

Should links and buttons be the same colour?

Usually, yes. One action colour for both teaches visitors a single rule. Distinguish them by shape: buttons are filled, links are underlined.

What colour converts best for a buy button?

No colour is reliably better in general. What matters is that the button is the only thing in that colour on the screen and that its text is easy to read.

Can I have two accent colours?

You can have a second colour for decoration or a separate status, but only one should mean "click here". Two action colours split attention.

Can I use my own brand colour instead of the eight options?

Yes. Anticode lets you tune individual colour tokens, including the action colour. Check its contrast in both themes after you do.