How to design accessible buttons?

Deep dive

Button accessibility involves several important factors, which can sometimes feel complex and overwhelming. Let’s focus on the key ones to build a strong foundation for your design.

☝️We've already discussed important topics like button size, spacing, and inactive or disabled buttons accessibility in this article. Be sure to check it out, as these are crucial aspects of button accessibility. To avoid repetition, we won't go over them again in this article.

Follow familiar design patterns for buttons

Buttons should follow familiar shapes that users easily recognize. This reduces confusion, minimizes cognitive effort, shortens the learning curve, and allows for faster, more enjoyable interactions.

Common button shapes typically include:

1. Rectangular buttons: These are the most traditional and widely used shapes for buttons. They provide ample space for text and icons and are almost universal.

2. Rounded rectangular buttons: A modern variation of the rectangular button with rounded corners, creating a softer look.

3. Circular buttons: Often used for floating action buttons (FAB) or icons, circular buttons stand out and are typically used for prominent, single-action tasks, such as creating a new document or logging work hours.

4. Pill-shaped buttons: These are elongated buttons with fully rounded ends, often used for actions that require more emphasis or for buttons that contain longer text.

Pro tip: You can sometimes break the rules and use unconventional shapes. Just ensure the button still looks like a button. Here's an example of an unusual yet thoughtfully designed shape on the Cohere website:

Distinguish between buttons and links

Though buttons and links may seem similar, they serve different purposes and should be designed accordingly. 

Purpose

• Buttons trigger actions—submitting forms, confirming decisions, or starting processes. Even if a button leads to a new page, it first performs an action (e.g., logging in).

• Links are for navigation. They take users to different pages or sections, typically appearing in line with text, like in Confluence by Atlassian.

Styling

• Text buttons often have more padding, may include icons, and offer distinct feedback, such as color changes or loading animations. Sometimes, text buttons are indeed hard to distinguish from links. 

• Links are usually underlined or have a different color to stand out from the text. Their hover effects are usually more subtle than those of buttons.

Source

Related reading: Links and Hypertext by WebAIM

Behavior

• Buttons provide interactive feedback (hover, active states), signaling action. They change their color and may have loading animations. 

• Links change slightly when clicked and offer simpler interactions.

Source

Placement

• Buttons are placed where actions are needed (e.g., “Submit” or “Add to Cart”).

• Links guide users within text or navigation elements to related content.

Create a clear button hierarchy

Usually, a page in your application has one primary action for users to take, represented by a primary button. 

Primary buttons are designed to stand out the most. They often use:

• Bold, saturated colors that contrast with the background;   

• Solid fill;   

• Larger size or more prominent placement (the top right corner of the page).

Example: "Submit", "Sign Up", "Subscribe". 

Secondary buttons, which represent alternative actions, are less visually prominent than primary buttons. They often use:

• Outlined styles or lighter colors;   

• Smaller size or less prominent placement.

Example: "Cancel", "Learn More", "Skip". 

Tertiary buttons, which represent additional actions or less common options, are the least visually prominent button type. They often appear as:

• Text links with minimal styling;

• Small icons with subtle hover effects.

Example: "Back", "Help", "Advanced Settings". 

Use readable text labels

Button labels should be simple and easy to understand. Avoid lengthy or irrelevant text. For example, instead of a vague label like "Process," use "Submit Request" or "Approve Invoice" to provide clarity on the action being taken. 

Similarly, generic labels such as "Ok," "Yes," or "No" should be replaced with specific actions that the user will perform, like "Confirm Payment" or "Decline Request."

It helps users quickly understand what will happen when they click, especially when they don’t have time to read every detail on the page.

Prioritize strong color contrast

When it comes to color contrast on buttons, there are two important best practices to keep in mind:

1. The contrast between the button text and the button background meets a ratio of at least 4.5:1.

2. The contrast between the button and its background meets a ratio of at least  3:1.

☝️These guidelines follow the Web Content Accessibility Guidelines (WCAG) Level AA standards, which are commonly used by most organizations.

Don’t rely on color alone 

An accessible button shouldn’t use color alone to show different states like active or disabled. Add other visual cues, such as icons, animations, underlines, or changes in text formatting, to make the meaning clear. This is especially important for users with color vision deficiencies.

Design clear focused and hovered states

Make sure buttons have clear focused and hovered states. A visible focused state is essential for users who navigate with a keyboard, as they need to easily see where they are on the page. Use noticeable visual cues like borders, color changes, or outlines to highlight the button when it’s focused

Include labels for screen readers

In addition to making buttons visually clear, consider using ARIA labels. These are special codes that developers can add to buttons to provide extra information about their function, particularly for users relying on screen readers. ARIA labels help people with visual impairments by enabling screen readers to announce exactly what the button does, making interactions more accessible.

Source

Related reading: Accessible Rich Internet Applications (WAI-ARIA) 1.2, Enhancing Web Accessibility With ARIA Labels

Make buttons usable with a keyboard

Not everyone relies on a mouse, so it's important to ensure people who use keyboards can navigate and click buttons easily. Buttons should be designed to work with keyboard shortcuts and provide a clear visual indicator, like a border or color change, when selected with the Tab key.

See how Smashing Magazine and Deque University implement it on their websites.

🛠️ Useful tools 

These tools will make your job easier and more effective.

• Color Blind – A Figma plugin to simulate how users with different types of color blindness perceive colors.

• Contrast – A Figma plugin for evaluating color contrast (note: it doesn't support gradients).

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• 14 Rules to Design Accessible Buttons by Saadia Minhas

• Designer Tips: Improving Button Accessibility by Level Access

• The Definitive Guide to Buttons in UX: Part 1 by Lauren Waage

• Accessible Buttons Made Easy: Get Started Today with These Tips by Continual Engine

📚 Keep exploring 

Never stop growing. Explore resources on accessible button design thoughtfully handpicked by Cieden’s designers. 

• Designing Usable and Accessible Buttons by Chris Lorensson

• Web Accessibility WCAG 2.1 Knowledge Base

• Accessibility Hub by Niagara College

• A guide to designing accessible, WCAG-conformant focus indicators by Sara Soueidan 

• It’s time for a more sophisticated color contrast check for data visualizations by Lisa Charlotte Muth

• The Myths of Color Contrast Accessibility by Anthony