Buttons have suficient contrast
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:
1.4.3 Contrast (Minimum) (Level: AA)