DEV Community

Cover image for Generate Accessible Button Colors With ButtonBuddy
Stephanie Eckles
Stephanie Eckles

Posted on

Generate Accessible Button Colors With ButtonBuddy

Introducing ButtonBuddy.dev:

Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

Preview of Buddy the Button which is a blue button with a cartoon face. A speech bubble animates upwards then displays "Hello, I'm ButtonBuddy!" after which the cartoon face's left eye winks twice.

First, Buddy will help you learn about what it takes to create accessible button color palettes.

Then, you can use the interactive generator to create or check your own button color palette to ensure accessible contrast.

The more successful contrast ratios you have, the happier Buddy will be!

Buddy's face first has a frown, then a partial closed mouth smile as the contrast improves, then finally a full open mouth smile plus a wink when the contrast is fully passing

When using the generator you have the option of either using the browser's native color pickers (the default) or switching to text input. Text inputs allow you to more easily enter your existing palette and will accept any valid CSS color value, including ones with an alpha channel.

Interacting first with the native color picker to select a purple, then toggling on the text inputs and changing the purple hex code to the CSS color value of "rebeccapurple"

With every color change, by color picker or text input, the associated color contrast ratios will update. Emojis indicate "passing" or "invalid". The default text contrast is for normal text size which is 4.5:1, but if your button will use large text (18.66px and bold or larger than 24px) you can use the "Large text ratio" switch to update text ratios to the reduced ratio of 3:1.

Shows the contrast ratios dynamically updating and the emoji indicator changing when the ratio passes, followed by updating the text ratio to 3.0 by using the "Large text ratio" switch.

Visit ButtonBuddy.dev to learn more about accessible button contrast and create your own accessible palettes!

Creator's Notes

ButtonBuddy was created by myself, Stephanie Eckles, to help folx solve a common issue I see as both a code reviewer and a web user. ButtonBuddy is also a utility I myself have wanted to see exist, and know I will use!

If you encounter any issues or have a feature request, file an issue on GitHub. Please be sure to read the intro learning content which describes the specific scenario ButtonBuddy was created for before suggesting a feature.

Discussion (3)

Collapse
georgedoescode profile image
George Francis

Ah this is really cool! I love how adding some eyes and a mouth to even a simple shape / button can give so much personality 💙

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

I love this! So glad this tool exists, I'll definitely be using in the future - thank you!

Collapse
5t3ph profile image
Stephanie Eckles Author

Awesome, thanks so much, I'm so happy to hear you'll find it helpful! 💫