Previous technique
Next technique

Buttons have suficient contrast

WCAG 2.2
AA
#buttons

User interface components like buttons should have a minimum contrast ratio of 3:1

You can either achieve this by either giving them a background-color with enough contrast or by adding a border or box-shadow that would help to make the button stand out.

There is a growing list of tools that help you to find the right colors:

  • Geenes helps you to create a color scale in seconds and export it to sketch or code.
  • WebAim Contrast Checker is probably the most known one
  • Contrast Grid helps you to check your full color palette and to identify color combinations you should avoid.
  • Stark is a very powerful multi platform assistant that supports you during the design process.
  • The axe DevTools browser extension scans your application and identifies color contrast issues in your current UI (and much more).

There are exceptions:

  • Inactive or disabled interface components

Learn more about the related success criteria: