A button that passes every criterion at once

Text contrast, boundary contrast, target size and focus visibility checked together — because passing four of six is not passing.

HomeProfessionsDesign › Accessible buttons

A button that passes every criterion at once

Text contrast, boundary contrast, target size, focus visibility, state distinction and the disabled exemption — checked together, because a button that passes four of six is not a passing button.

Local tool — nothing you make here is uploaded
Nothing here leaves this browser. Colours, images, SVG and generated code are processed on your own device. No file is uploaded, nothing you enter is stored on a server, and none of it is passed to the analytics or advertising scripts on this page.
What a contrast check does and does not prove. Meeting a ratio satisfies one WCAG success criterion. It does not make an interface accessible, and it says nothing about focus order, labelling, motion, or whether the thing is usable at all. Automated checks find a minority of real barriers.
Six criteria, and why disabled is exempt

1.4.3 the label against the fill, 4.5:1 (or 3:1 at 18.66px bold / 24px). 1.4.11 the button's boundary against the surface, 3:1. 2.5.8 the target, 24×24 at AA. 2.4.11 the focus indicator visible.

Disabled controls are exempt from contrast requirements under 1.4.3 and 1.4.11, because a low-contrast disabled state is how the control communicates that it is unavailable. That exemption is real and it is also frequently abused — a disabled button nobody can read is technically compliant and practically useless.

The usual better answer is not to disable the button at all: leave it enabled and explain what is missing when it is pressed. A disabled control gives no feedback, cannot be focused by default, and offers nothing to a screen reader beyond the fact that it exists.

The boundary is separate from the label

A blue button with white text passes 1.4.3 comfortably and can still fail 1.4.11 if the blue is close to the surface behind it. The label is readable; the button is not findable.

A filled button's boundary is its fill against the surface. If those are close, it needs a border — and the border is then what has to reach 3:1.

Do not rely on colour alone for state

Hover, active, selected and error all need something besides a colour shift: a shadow, a border weight, a position change, an icon. 1.4.1 requires it, and it is also what makes states legible in bright sunlight and on cheap screens.