Skip to main content

Curbcut WCAG AAA

Button

Primary, secondary and danger actions at a guaranteed 44px target.

Show the markup 
<button class="cc-button" type="button">Submit application</button>
<button class="cc-button cc-button--secondary" type="button">Save draft</button>
<button class="cc-button cc-button--danger" type="button">Delete</button>
Show the markup 
<button class="cc-button cc-button--sm" type="button">Filter</button>

Accessibility

  • Minimum 44×44px target (2.5.5), regardless of variant.
  • White-on-brand and brand-on-white pairings both exceed 7:1.
  • Buttons do things; links go places. Use <a class="cc-button"> only for a link that must look like a button — never the reverse.
  • Disabled buttons stay in the accessibility tree via aria-disabled when the reason should be discoverable.