Avoid Common Button Design Mistakes: Practical Tips for Accessible UI

Translated from "Button design tips to avoid common mistakes", this article discusses key considerations for designers when creating buttons.

With almost 20 years of experience, the author reflects on common button design errors that affect usability and accessibility, even among seasoned designers.

Common Button Design Errors

Most projects require three button weights—primary, secondary, and tertiary—to convey the importance of actions. The article examines each group, highlighting issues that can jeopardize accessibility and recommending adherence to WCAG 2.0 AA standards.

Button group 1

UI component contrast ratios should be at least 3:1 to aid users with visual impairments. In this example, the secondary button’s fill color fails that ratio, making it hard to distinguish.

Adding a high‑contrast border can resolve the issue without sacrificing the button’s interactive nature.

Button group 2

The secondary button’s light color may be mistaken for a disabled state; avoid using light gray for interactive elements.

Text contrast is below the required 4.5:1, reducing readability.

The border contrast also falls short of the 3:1 minimum.

Button group 3

For small text (≤18 px), a contrast ratio of at least 4.5:1 is required. Issues found:

Primary and secondary buttons appear too similar, confusing visual hierarchy.

Color‑only differentiation hinders color‑blind users.

Overall contrast is below the 3:1 threshold, affecting visually impaired users.

Button group 4

Similar styles and insufficient contrast cause primary and secondary buttons to clash.

Secondary button text contrast is too low; it should be at least 4.5:1.

Button group 5

The buttons are too similar for visually impaired users; contrast must meet at least a 3:1 ratio and visual hierarchy should not rely solely on color.

Button group 6

Excessive similarity in contrast and style makes the buttons indistinguishable for users with visual impairments.

Tertiary button borders must have at least a 3:1 contrast to be recognized as interactive.

Button group 7

Relying solely on color to differentiate elements excludes color‑blind users; the tertiary button in this example is indistinguishable from plain text.

Button group 8

Inconsistent button shapes without functional differences cause confusion; elements with the same purpose should appear identical.

Button group 9

Visual hierarchy should clearly convey the importance of actions; here primary and secondary buttons share similar visual weight, and secondary button background contrast is below 3:1.

Button Design Tips

Based on the errors above, the following practical guidelines help create user‑friendly and accessible buttons:

Establish a clear visual hierarchy that does not rely solely on color.

Maintain a minimum shape contrast of 3:1 for users with visual impairments.

Ensure text contrast of at least 4.5:1 to meet WCAG 2.1 AA standards.

If buttons share the same style, their mutual contrast must be at least 3:1.

Use a target area of at least 48 pt × 48 pt for easy tapping.

Provide sufficient spacing (e.g., 16 pt) between buttons to prevent accidental clicks.

Safe Button Designs

The following examples illustrate familiar, accessible button styles with a clear visual hierarchy that does not depend solely on color.

Although tertiary buttons may look like text links, the distinction between links (navigation) and buttons (actions) is increasingly blurred; designers should focus on semantic markup rather than visual similarity.

In the banner example below, links lack prominence, making the primary action unclear. Converting them to button styles improves visual hierarchy and user guidance.

In the message dialog example, the three button styles function correctly; even though the tertiary button resembles a link, its purpose is clear—it triggers an action rather than navigation.

Always code buttons as

button

elements and links as

a

elements; this semantic distinction prevents screen‑reader accessibility issues.

For further reading on design principles, see "Using Design Rules for UI Design".