Developer guide

Button Color Contrast Checklist

Check button labels, borders, focus states, and disabled states before shipping an interface.

Short answer

A button needs more than one passing text color. Its label, boundary or fill, focus indicator, and every interactive state need review.

When this applies

WCAG contrast requirements differ by element and state. A readable label can still fail if a visible control boundary or focus indicator disappears into the background.

Practical review steps

  1. Check label text against the button fill.
  2. Check the button boundary or fill against the surrounding surface.
  3. Test hover, focus, disabled, loading, and error states in the real UI.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.