CTA Visual Hierarchy Tester

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

Button colour

Background colour

Button size

Placement

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

Compute the WCAG contrast ratio between your CTA and its background, then factor size and placement into a visibility score so your primary button never blends in.

Everything runs in your browser — nothing you type is sent anywhere or stored. Use it to sanity-check a plan, pressure-test a channel, or brief a team before you commit budget.