When it comes to web design and UX, colour association is way more important than you probably think it is; especially for CTAs (calls to action)

It might sound a bit mad, but users subconsciously react to, and recognise colour when using your site

Done right, colour can subconsciously nudge your users in the right direction. Done wrong, and it’s just noise

Let me try and explain…

Think of your Primary CTA as the star of the show. It’s the action that you most want your users to take

Your primary CTA will depend on what kind of site you have. For example, if you have a blog website, it would probably be something like “Sign Up” or “Read this blog”.

But, considering we’re talking about shopping online, our Primary CTA is always relating to the user purchasing. “Buy Now”, “Add to basket”, “Checkout” etc

The colour you choose for these Primary CTA buttons isn’t just a design choice; it’s a signal. If you use it consistently, it almost trains your users to associate that colour with your most important actions. Subconsciously, they know: This is the button that matters

Secondary CTAs serve a different purpose— things like “Learn More”, “Save for Later”, or “Add to Compare” for example. These buttons should be visually distinct from the primary CTA to avoid confusion

If your primary CTA is bright orange, for example, your secondary buttons could be a muted gray or a subtle blue. They’re still actionable but clearly not the main event.

Your users don’t consciously think about colours and what they mean; but their brains do! When you use a consistent colour for your primary CTAs, they’ll naturally start to recognize it and know where to click.

On the flip side, if everything is the same colour, nothing stands out

That’s like walking into a room full of people shouting, then shouting yourself; it's pointless

Avoid making these mistakes...

1 - Using the Primary CTA colour Everywhere

The minute you plaster your primary CTA colour all over your site, it loses its power. If Buy Now and Learn More are the same colour, your user might hesitate, unsure which button is the important one.

2 - No Visual Hierarchy

Buttons, banners, headlines—it all needs a hierarchy. Your primary CTA should always be the loudest voice in the room.

3 - Clashing colours

While it’s important for primary and secondary CTAs to stand out from each other, they still need to feel like part of the same design family. Think complementary colours, not random clashes.

Quick note on accessibility - Always try and make sure your CTAs have enough contrast between the button colour, and the text that’s on it. Here’s a great tool you can use to see if your colours pass accessibility…

https://www.audioeye.com/color-contrast-checker/

Colours in web design aren’t just pretty, they’re powerful

By assigning a specific colour to your primary CTAs and sticking with it, you create a much better experience that guides your users towards taking action. Just remember...

• Primary CTA: Star of the show, but reserved for key actions only
• Secondary CTAs: Functional but not flashy
• Everything Else: Background noise