Accessible button colors that still look on-brand
Audit season arrives and suddenly every primary button is “almost” AA. You can darken text until it looks like a tax form, or you can fix the pairings — background, label, hover, focus — as a set.
Buttons are where brand and accessibility collide loudest. Marketing wants saturated purple; WCAG wants 4.5:1 between label and fill for normal text. The trick is treating the button as four colors, not one: default fill, hover fill, label, and focus ring — each with a job.
Fix the fill before you punish the label
Teams often lighten text when the real problem is a pastel background. Nudge the fill darker or shift hue slightly (many brand purples pass contrast around 600–700 on a ramp, not 400). Generate candidates in the accessible colors tool or swap pairs in the contrast checker until the default state passes without whisper-thin font weights.
Hover and active are not optional checks
Hover that drops contrast feels broken to keyboard users who never see it — but auditors still flag inconsistent states, and sighted users notice muddy hovers. Aim for equal or better contrast on hover, not “slightly lighter because it looks clickable.” Active/pressed can go darker; disabled should look disabled but stay readable if your guidelines require it.
The background is whatever is behind the button — card, gradient, photo. Check label against that surface, not against transparent white.
Focus rings deserve a real color
A 2px outline in brand-400 on brand-500 fails more often than people admit. Use a ring color with clear separation from both button fill and page background — high chroma accent, or white/dark ring with offset shadow. Focus-visible styles should survive dark mode swaps; reuse tokens from your design tokens setup so focus does not get orphaned.
Links are buttons’ quiet cousins
Inline links on body copy need 4.5:1 against the paragraph background. Links on tinted callouts need the same check on the tint. Underline plus color beats color alone for color-blind readers — our contrast workflow article covers the habit; this is the component where it pays off fastest.
You do not need dull buttons to be compliant. You need one ramp slot labeled “primary fill” that was chosen with white text in mind from the start, then hovers and focus planned as siblings — not afterthoughts the week before launch.