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.