CTA Visual Hierarchy Tester
Check your button's colour contrast and prominence at a glance.
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
- Pick your button colour and background colour, either with the colour swatch or by typing a hex value.
- Select your button size, large/prominent, medium, or small/text-like.
- Select placement: above the fold and standout, inline with content, or below the fold / crowded.
- 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.
FAQ
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.
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.
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.