Why your landing page CTA gets ignored — and it's probably a color problem

1. The competing accent problem

Most ignored CTAs aren't invisible — they're just equally loud as everything else on the page. When the hero illustration, the nav link, the badge, and the button all use the same accent color, nothing wins.

• Reserve your brightest, most saturated color exclusively for the primary CTA.
• Use outlined or ghost styles for secondary actions so they don't compete.
• If you have a decorative illustration using the accent color, desaturate it slightly.

2. The grayscale test

Strip all color from your page and look at it in grayscale. The CTA should still be the darkest or lightest element in its section.

• In Figma: Effects > Hue/Saturation, drag saturation to 0.
• If the button disappears into the background, the contrast ratio is failing.
• This test also reveals whether your section hierarchy makes sense without color.

3. Section background matters as much as button color

A great button color can still fail if the section behind it is too similar in lightness.

• Dark button on dark hero section = invisible. Add a lighter surface behind the CTA.
• Bright button on white section = usually fine, but check the ratio.
• Gradient backgrounds are the hardest — test the button against both ends of the gradient.

Common mistakes

• Using the same accent color for the CTA, nav links, badges, and icons.
• Placing a dark button on a dark hero without a contrasting surface.
• Never testing the page in grayscale before launch.

Before you ship

• Reserve the primary accent exclusively for the main CTA.
• Run the grayscale test before every launch.
• Check the button contrast ratio — aim for 4.5:1 minimum.
• Make secondary actions visually quieter than the primary.