Funnel & CRO

Check your button's colour contrast and prominence at a glance.

Use the calculator Or book a diagnosis call
Category
Funnel & CRO
Signup
None
Your data
Stays in your browser

How do you check whether a call-to-action button stands out?

Score three things: colour contrast against the background (up to 40 points; 4.5:1 or more scores full), size (up to 30) and placement (up to 30). A violet #7C3AED button on a near-white #FAFAFB page has a contrast ratio of about 5.5:1, which passes WCAG AA for normal text.

Contrast ratio
5.46:1
WCAG button vs background
Visibility score
100/100
Contrast + size + placement
WCAG
AA pass
Accessibility floor

Strong hierarchy, a 5.5:1 contrast at this size and position makes the CTA the clear next step. Keep it the only element competing for that attention.

Contrast is measured, size and placement are judged. A button can pass WCAG and still lose if three other elements shout as loudly, hierarchy is relative.

About this calculator

A button can be beautifully designed and still get ignored if it doesn't stand out enough for the eye to land on it. This tester runs an actual WCAG contrast calculation between your button and background colours, then layers in size and placement, the two other levers that determine whether your primary CTA reads as "the next step" or blends into the page.

How to use it

  1. Pick your button colour and background colour, either with the colour swatch or by typing a hex value.
  2. Select your button size, large/prominent, medium, or small/text-like.
  3. Select placement: above the fold and standout, inline with content, or below the fold / crowded.
  4. Read the exact contrast ratio, the WCAG pass/fail verdict, and an overall visibility score combining all three factors.

Methodology

Contrast ratio is computed from the WCAG 2.x relative luminance formula on both hex colours: each channel is gamma-corrected, combined into luminance using the 0.2126/0.7152/0.0722 weighting, then the ratio is (lighter luminance + 0.05) ÷ (darker luminance + 0.05).

Contrast points are awarded on that ratio: 40 points at 4.5:1 or above (WCAG AA for normal text), 28 points at 3:1+ (AA for large text), 15 points at 2:1+, and 5 points below that. Size adds up to 30 points (large=30, medium=20, small=8) and placement adds up to 30 (primary=30, inline=18, buried=6). The three sum to a 0-100 visibility score.

The WCAG label reflects the accessibility floor specifically: 4.5:1+ passes AA for normal text, 3:1-4.4:1 passes only for large text, below 3:1 fails outright, regardless of how the size and placement points land.

Contrast ratio and visibility score

Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B (gamma-corrected channels)
Contrast ratio = (L lighter + 0.05) ÷ (L darker + 0.05)
Contrast points: ≥ 4.5 → 40, ≥ 3 → 28, ≥ 2 → 15, else 5
Size: large 30, medium 20, small 8; Placement: standout 30, inline 18, buried 6
Score = Contrast + Size + Placement
Contrast ratio
How different the button colour is from the background, from 1:1 (identical) to 21:1 (black on white).
Size
How large and prominent the button is relative to other elements.
Placement
Whether the button sits where attention lands, above the fold and uncrowded.

The contrast formula is the one in the Web Content Accessibility Guidelines. WCAG 2.1 asks for at least 4.5:1 for normal text and 3:1 for large text (at least 18 point, or 14 point bold). This tool compares the button colour with the page background; also check the button's text against the button colour.

Worked example: a violet button on a light page

A landing page uses a #7C3AED violet button on a #FAFAFB background. The button is large and sits above the fold with space around it.

  1. Contrast ratio between #7C3AED and #FAFAFB = about 5.46:1.
  2. Contrast points: 5.46 is at least 4.5, so 40.
  3. Size: large = 30.
  4. Placement: above the fold, standing out = 30.
  5. Score = 40 + 30 + 30 = 100.
  6. A lighter violet such as #A78BFA on white has a ratio of about 2.7:1, which would score 15 for contrast and fail WCAG for normal text.

Strong contrast, size and placement make the button easy to find. White text on the #7C3AED button also measures about 5.7:1, so the label is readable too. Next, check the page around it with the above-the-fold messaging clarity grader.

What makes a call to action easy to find?

A button stands out when it is the most distinct element in its area:

  • Contrast: at least 4.5:1 against the background and for its own text.
  • One colour for primary actions: do not use the same colour for decorative elements.
  • Space: enough room around it that it is not lost among links.
  • A specific label: "Book a call" or "Get the template", not "Submit".

Accessible contrast helps everyone, including people reading on phones outdoors.

Call-to-action design in India vs the US and Europe

India

Many Indian visitors browse on mid-range phones with varied screen quality and in bright light, so contrast matters even more. Place the main button within thumb reach on mobile, and if WhatsApp is a common way to contact you, make it a clearly secondary option rather than competing in the same colour.

United States

In the US and Europe, accessibility rules and lawsuits make WCAG contrast a compliance question as well as a design one for many organisations. Test buttons in both light and dark modes if the site supports them. For copy around the button, see the landing page vs ad match auditor.

Common call-to-action design mistakes

  • Using a light brand colour on white that fails contrast.
  • Checking button-to-background contrast but not text-to-button contrast.
  • Giving secondary links the same style as the primary button.
  • Placing the main button below the fold on mobile.
  • Using vague labels such as "Submit" or "Learn more".

Sources

  1. Web Content Accessibility Guidelines (WCAG) 2.1: Contrast (Minimum), W3C. Accessed 2026-10-19.

FAQ

My contrast ratio passes WCAG but the score is still "warn", why?

Contrast alone isn't the whole story, a compliant-contrast button that's small and buried below the fold can still lose visually to other elements on the page. The visibility score reflects hierarchy: contrast, size, and placement all need to line up for a CTA to actually dominate visual attention.

What contrast ratio should I actually target?

4.5:1 clears WCAG AA for normal-size text and is the safe target for any button with a text label. 3:1 is the WCAG floor for large text/graphics only, treat it as a minimum, not a goal, since higher contrast generally reads as more prominent regardless of the accessibility requirement.

Does this account for other competing elements on the page?

No, it scores your CTA in isolation. Hierarchy is relative: a CTA that scores well here can still lose if three other elements on the same screen (bright images, competing buttons, bold headlines) are pulling attention just as hard. Use this as a floor check, then eyeball the full page.

What contrast ratio should a button have?

Aim for at least 4.5:1 for the button text against the button, and enough contrast between button and background that it is easy to spot. WCAG sets 3:1 for large text and for many interface components.

Does button colour matter more than size?

Contrast matters more than any particular colour. A large, well-placed button with poor contrast is still easy to miss.

Does this check other elements competing for attention?

No. It scores one button. Look at the whole page for other bright or large elements that pull attention away from it.

Numbers looking off?

If the model says one thing and the pipeline says another, that gap is usually where the revenue is. A 30-minute call finds it.

It starts with a 30-minute call. Pick a time below.

Prefer email?