# Why Your Primary Button Doesn't Look Important Enough

> In 58% of audits, the primary conversion action does not look primary. Fix button contrast, size, and whitespace to make your main CTA undeniable.

Blog · Landing pages · By Michael Thorne · Published Oct 31, 2026 · 9 min read · https://leakly.ai/blog/primary-button-doesnt-look-important-enough

## The short answer

A primary button fails to look important when it shares color, size, or visual weight with secondary actions. In Leakly audits of 959 websites, 58% had a primary conversion action that did not look primary. To fix this, reserve your highest-contrast color exclusively for the main action, increase its size relative to surrounding elements, and surround it with enough whitespace to isolate it from competing links.

- Reserve one high-contrast color strictly for the primary action.
- Make the primary button physically larger than any secondary button on the page.
- Surround the primary button with whitespace so nothing competes for attention.
- Verify text inside the button meets the 4.5:1 WCAG contrast minimum.

If your primary button doesn’t look important enough, it is because it shares too many visual properties—color, size, or proximity—with secondary elements on the page. In Leakly audits of 959 different websites, 58% exhibited the specific leak where the primary conversion action does not look primary. This happens because designers often treat buttons as isolated components rather than participants in a strict visual hierarchy.

When a visitor cannot instantly distinguish the main action from a secondary link, they pause. That pause introduces friction, and friction lowers conversion rates. The fix requires adjusting three variables: contrast, scale, and isolation. You do not need a complete redesign; you need to enforce rules about which element gets to be the loudest thing on the screen.

## Why does my primary button blend into the page?

A button blends in when the design system applies the same visual weight to multiple interactive elements. If your navigation links, secondary buttons, and primary call-to-action all use similar colors or border styles, the eye has no anchor. A common pattern is using the brand’s primary color for everything—headers, icons, text links, and the submit button. When everything is highlighted, nothing is.

This issue compounds other conversion leaks. For instance, 59% of the audited sites also featured a primary call to action that [did not say what happens next](https://leakly.ai/library/CONTENT_CTA_001). Even if the copy were perfect, a visually weak button prevents the user from reaching the point where the copy matters. Visual hierarchy must work before semantic meaning can do its job.

Another frequent culprit is competing actions that [dilute the conversion path](https://leakly.ai/library/UI_HIERARCHY_001). If a "Learn More" button sits next to a "Start Free Trial" button and both are styled identically, you have created a fork in the road without signage. The primary action must be the only logical destination.

## How much color contrast does a primary button need?

Color contrast is the most reliable way to signal importance, but it must be calculated against the background, not just chosen by aesthetic preference. The Web Content Accessibility Guidelines (WCAG) 2.1 require that the visual presentation of text has a contrast ratio of at least 4.5:1 against its background [^1]. For large-scale text—defined as 18-point regular or 14-point bold—the requirement drops to a 3:1 ratio [^1].

Because button labels are typically smaller than headings, the 4.5:1 threshold usually applies. WCAG calculates this ratio based on the relative luminance of the foreground and background colors, meaning hue alone does not guarantee legibility [^1]. For people with color vision deficiency, light-dark contrast is what actually makes text readable [^2]. Therefore, a bright green button on a slightly lighter green background might fail entirely, even if the hues feel distinct to someone with typical color vision.

In Leakly audits, 27% of sites failed to meet these minimums for their [conversion text](https://leakly.ai/library/UI_CONTRAST_001). To ensure your primary button stands out, test its hex codes against the page background using a contrast calculator. Do not round the values; a computed ratio of 4.499:1 does not meet the 4.5:1 threshold [^1].

> **Warning.** Do not rely solely on color to differentiate your primary button. Because hue and saturation have minimal effect on legibility for users with color vision deficiencies, light-dark contrast is the only reliable mechanism for distinguishing the primary action from secondary ones [^1].

## What size should the primary button be compared to secondary actions?

Size establishes physical dominance. If your primary button is the exact same height and padding as your secondary buttons, color contrast has to do all the heavy lifting. It shouldn’t have to.

The primary button should be noticeably larger. This means more vertical padding, a slightly larger font size, or both. Keep in mind that WCAG defines large text as roughly equivalent to 1.2 to 1.5 times the default body text size [^1]. If your body text is 16px, your primary button text should comfortably exceed that baseline to benefit from both visual prominence and the relaxed 3:1 contrast ratio allowed for large text [^1].

Secondary actions should recede. Instead of styling them as outlined buttons that compete for space, consider rendering them as text links or ghost buttons with significantly less padding. The goal is to create a clear gap in visual weight. If a user glances at the section, their eyes should hit the primary target first, every time.

On mobile devices, size becomes a functional requirement, not just a stylistic one. Conversion controls that are [too small to tap reliably](https://leakly.ai/library/UX_MOBILE_001) introduce accidental clicks and frustration. Ensure the touch target of your primary button is wide enough to span a thumb's natural resting area, keeping it distinctly larger than adjacent navigational elements.

## How much whitespace does a primary button need?

Whitespace is the negative space that isolates an element from its neighbors. A primary button surrounded by dense text, images, or secondary links will struggle to command attention, regardless of its color or size. Whitespace acts as a spotlight.

If your primary action is buried below the fold, the problem multiplies. Pages where [no conversion action is visible without scrolling](https://leakly.ai/library/UX_FOLD_001) force the user to hunt. But even above the fold, tight margins around a button cause it to merge with the surrounding layout. Increase the margin above and below the primary button until it feels uncomfortably spacious during the design phase; it will likely look correct once rendered in a browser.

Isolation also means removing distractions. Nearly a quarter (23%) of audited sites leaked attention to [other destinations](https://leakly.ai/library/FUNNEL_EXIT_001) on the conversion page. If there are outbound links or secondary navigation paths immediately adjacent to your primary button, move them. The space directly around the primary action should contain nothing that invites a click away from the funnel.

## Primary vs secondary button confusion

To understand how these variables interact, consider the difference between a confused hierarchy and a resolved one.

| Property | Confused Hierarchy | Resolved Hierarchy |
|---|---|---|
| Color | Brand blue used for primary, secondary, and links | High-contrast solid fill for primary; muted text link for secondary |
| Size | Both buttons share identical padding and font size | Primary uses larger padding and heavier font weight |
| Whitespace | Buttons sit side-by-side with 8px gap | Primary button is isolated with generous margins above and below |
| Contrast Ratio | Text inside both buttons hovers around 3:1 | Primary button text exceeds 4.5:1 against its background |

Table comparing visual properties that either hide or highlight the primary conversion action.

In the confused state, the user has to read the text to figure out which button matters. In the resolved state, the user knows which button matters before reading a single word. This pre-attentive processing is what drives higher conversion rates. You can see how this plays out in practice by reviewing a [sample audit](https://leakly.ai/sample-audit), which maps these exact visual discrepancies to specific conversion leaks.

## Checklist to make your primary action undeniable

Use this checklist when reviewing your landing pages or running through a [SaaS conversion audit checklist](https://leakly.ai/guides/saas-conversion-audit-checklist) to ensure your primary button commands the necessary attention.

- **Audit color exclusivity.** Verify that the solid fill color of the primary button is not used for any other interactive element on the page.
- **Test contrast ratios.** Confirm the text inside the primary button achieves a minimum 4.5:1 contrast ratio against the button's background color, or 3:1 if the text qualifies as large-scale [^1].
- **Differentiate scale.** Ensure the primary button has greater vertical padding and a larger font size than any secondary button or text link nearby.
- **Enforce whitespace.** Add sufficient margin around the primary button so that no other clickable element shares its immediate visual boundary.
- **Demote secondary actions.** Convert competing secondary buttons into lower-weight text links or ghost buttons to remove visual competition.
- **Check mobile tap targets.** Verify the primary button remains the largest, most tappable element on smaller viewports, avoiding [mobile-specific visibility issues](https://leakly.ai/library/UI_MOBILE_001).
- **Remove adjacent exits.** Eliminate any outbound links or distracting navigation options positioned within the primary button's whitespace zone.

## How to fix a weak primary button

Addressing this leak requires a systematic pass over your highest-traffic conversion pages. Start by identifying the single action you want the user to take. If a page has two primary goals, you have a strategy problem that precedes the design problem.

Once the goal is defined, open the page and squint until the text blurs. The primary button should still be the most obvious shape on the screen. If it isn't, apply the checklist above. Begin with contrast and exclusivity, as color is processed faster than spatial relationships. Then adjust size and padding. Finally, push surrounding elements away to create isolation.

If you suspect your pages suffer from this issue but lack the time to manually audit every viewport, you can run a [free AI conversion audit](https://leakly.ai/analyze) to automatically detect when a primary action fails to look primary across desktop and mobile environments. Identifying the leak is straightforward; enforcing the visual discipline to fix it is what separates high-converting pages from the rest.

Focus your immediate effort on the checkout, signup, or lead generation pages where traffic is highest. A single adjustment to the primary button's contrast ratio or padding on those specific URLs will yield more measurable impact than a site-wide design system overhaul.

## Frequently asked questions

### Can I use an outline style for my primary button?

Outline buttons generally carry less visual weight than solid-fill buttons. If you use an outline for the primary action, it risks looking like a secondary action. Reserve solid fills with high-contrast text for the primary button, and use outlines or text links for secondary choices to maintain a clear visual hierarchy.

### Does the primary button always need to be the brand color?

No. Using the brand color for the primary button is common, but if that color is also used for headers, logos, and links, it loses its signaling power. Choose a color that contrasts strongly with the page background and reserve it exclusively for the primary conversion action.

### How do I calculate the contrast ratio for button text?

Contrast ratios are calculated using the relative luminance of the foreground and background colors. Use a WCAG contrast checker tool and input the hex codes of your button text and button background. The result must be at least 4.5:1 for standard text or 3:1 for large text to meet Level AA requirements.

### What if my design system limits me to two colors?

You can still create hierarchy within a limited palette by altering opacity, size, and whitespace. Make the primary button a solid application of the darkest or brightest color, while rendering secondary actions as transparent outlines or simple text links using the same hue but with significantly less visual mass.

### Should the primary button be the largest element on the page?

It should be the largest interactive element, but not necessarily larger than the main headline. The headline provides context; the button demands action. The button needs to dominate other buttons, links, and form fields through scale, contrast, and surrounding whitespace.

## Sources

[^1]: W3C, Understanding WCAG 2.1 Success Criterion 1.4.3: Contrast (Minimum). https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
[^2]: W3C: Understanding WCAG 2.2 Contrast (Minimum) https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

---

Source: https://leakly.ai/blog/primary-button-doesnt-look-important-enough