ButtonBuddy - Accessible button contrast generator

Hello, I'm ButtonBuddy!

Scroll to learn about accessible button contrast
Or skip to the generator to begin creating button styles with accessible contrast

First things first...

What is accessible contrast?

The Web Content Accessibility Guidelines (WCAG) determine accessible contrast and provide a ratio system to be able to check contrast consistently and programmatically.

We're frequently most concerned about contrast in the following categories: text and user interface components. Buttons count as a user interface component, whether they are really <button> elements, or links styled as buttons (learn the difference).

So, what about my contrast?

Contrast Requirements for Buttons

Since buttons are interactive elements, we need to be concerned about contrast across states. The critical states are the default appearance and the focus state.

In the default state, we have the following levels of contrast:

• Button Background vs. Text: 4.5:1, or 3:1 for large text*
• Button Background vs. Surface: 3:1 minimum, including over images and gradients

In the focus state, we have these same requirements, plus one additional if you choose to only rely on the background-color. In this case, we need to be sure that the focus background color has at least a 3:1 contrast change from the default background color.

Still unsure? Check out this diagram >

* Large text is defined as 18.66px and bold, or 24px and larger.

Ok, cool! How do we check contrast?

Ensuring Accessible Contrast for Buttons

There are many ways to check contrast, including right in Chrome, Edge, and Firefox! Start by inspecting any text element, then locating the color property and selecting the color swatch which will open an additional panel. The browser will display the contrast ratio by detecting the computed background-color or background-image behind the element.

You can also keep scrolling to the ButtonBuddy generator to check your existing palette or explore creating a new palette that meets all the contrast vectors for buttons!

Important to note is that you can choose alternate methods to indicate :focus on a button instead of changing the background-color. Review the upcoming WCAG 2.2 draft success criteria for focus to help determine what's best for interactive elements across your site or application. Using ButtonBuddy will help prepare you to meet WCAG 2.2 focus requirements.

Accessible Button Contrast Generator

Full guide to button styling • File an issue on GitHub.

About

This project was created by Stephanie Eckles - @5t3ph - using semantic, accessible HTML, modern CSS, a dash of vanilla JavaScript, and generated using Eleventy and Parcel.

Steph is the author of the ModernCSS.dev tutorial series which aims to help you upgrade your CSS skills by learning modern solutions to old CSS problems. She also is the creator of StyleStage.dev which is a modern CSS showcase styled by community contributions. Other projects include 11ty.Rocks, and LearnFromSteph.dev, and you may also enjoy her egghead video front-end lessons

Support this project • Star on GitHub

Credits

Many thanks to Jeff Escalante for the color-contrast package which is calculating ratios for the contrasting colors. The base Eleventy project is borrowing from Michelle Barker's eleventy-parcel starter to enable JS bundling.

© 2021 Stephanie Eckles