Designing Accessible Buttons

Your button text to button background should have sufficient contrast. But also consider the contrast of your button background to you page background.

This isn’t is stressful as it sounds, typically you can use your hover state UI + your focus indicator to satisfy your button focus state. However, don’t forget that your hover and focus state should have a design element beyond just color to signify the change in state.

Use consistent CTA styling, don’t mix button shapes like sharp corner rectangles, with pill buttons. This can cause confusion for the user and honestly is just not a great design practice.

This can be accomplished by consistent use of color, by identifying a specific color as your primary CTA color. In order for this to be effective, you would want to limit the use of that color in non-actionable interface elements. You can also help make buttons clearly actionable by using a design element that adds depth. Very flat and minimal designs can sometime suffer from less apparent actionable elements.

This is where people usually get tripped up, because 90% of the buttons we see online use a color change to signify hover. Unfortunately that doesn’t make you buttons very accessible. Any of these solutions will satisfy that requirement. Adding a stroke, underlining text, bolding text, adding a small design element. Also consider more elaborate hover design changes aided by CSS transitions! You will spot one we love on this site for our primary CTA.

Designers, don’t overlook the opportunity to design your focus indicator. You don’t need to use the default styling. A well designed focus indicator can feel much more seamless with your UI.

Don’t apply overly “busy” styling to buttons. Styling effects to avoid: heavy textures and background patterns, heavy text shadows, bevels.

Ensure adequate and proportional horizontal and vertical padding. Apply this formula to make it easier:

Vertical padding is x the horizontal padding is 2x