button-contrast-checker

Another contrast checker? Yikes!

We were in need of a tool to test the contrast of all buttons and links of a page at once. So we built Button Contrast Checker. You can use it for free.

We test default, hover and focus.

Buttons have several states: default, hover, focus, active, disabled, etc.

Many websites have insufficient contrast in these states. Maybe it’s because the tools don’t help much in this regard, but not anymore. In a few seconds you’ll know if your buttons and links have enough contrast in the three most common states.

Button background vs. Adjacent background.

Let’s picture this scenario: we launch a website with perfect buttons and great contrast. Later down the road, unaware of the accessibility implications, we change the background of sections of the website. This might make some buttons fail contrast with adjacent colors.

Add this tool to your workflow and prevent going live with less-than-perfect buttons.

Save and share results with your team.

Each time you scan a page, we store the results in a unique URL. You can send it to your team or save it for future comparisons.

  • AAA

    2

  • AA

    3

  • Fail

    7

Color contrast level of buttonsDonut chart showing total of 12 buttons. 7 buttons fail every color contrast level, 3 meet AA contrast level and 2 meets AAA contrast level.AAAChart segment spanning 16.666666666666664% of the whole, which is 2 buttons with AAA contrast level.AAChart segment spanning 25% of the whole, which is 3 buttons with AA contrast level.FailChart segment spanning 58.333333333333336% of the whole, which is 7 buttons that fail every contrast level.

12Elements

Be the first to know when we’re ready

We’re building the next-generation accessibility tool, and this can’t be done without you. We’re looking for accessibility superheroes.

To be notified when we launch, drop your email below.

Leave your email and we’ll get in touch when we launch. You won’t get SPAMed.

Leave a Reply

Your email address will not be published. Required fields are marked *