How to Choose Accessible Button Colors

Start with the label color

A button label is text, so normal-size labels need at least 4.5:1 contrast for WCAG AA. If the label is large enough to qualify as large text, the AA threshold is 3:1, but most product buttons use compact text.

White text on a saturated brand color often looks correct but can fail if the brand color is too bright. In that case, darken the fill, use a darker accessible brand variant, or switch to a dark label on a lighter fill.

Check the button shape and state

The visible boundary of a button can matter as much as the label, especially for ghost buttons, outline buttons, icon buttons, and controls placed on tinted surfaces. Meaningful non-text boundaries should reach 3:1 against adjacent colors.

Hover, active, selected, disabled, and loading states should not be guessed from the default state. Small lightness changes can turn a passing color pair into a failing one.

• Test label versus fill
• Test outline or border versus page surface
• Test icons, focus rings, and selected states separately

Use accessible variants instead of one brand swatch

A single brand swatch rarely works for every button job. Most systems need a stronger primary fill, a softer secondary fill, a clear danger state, and reliable neutral buttons for quiet actions.

Create button tokens around verified combinations, such as primary-fill plus primary-label, rather than independent colors. Pair-based tokens make it harder to accidentally combine colors that were never tested together.

Keep gradients and shadows from hiding contrast

Gradient buttons need extra testing because the background behind the label changes across the button. Check the label against the lightest and darkest stops that sit under the text, not just the average color.

Shadows can help separation, but they do not replace the need for sufficient contrast between the button surface, text, border, and page background.