Provide buttons with a large target size

Comparison of a large button size (accessible) vs. very tiny ones (inaccessible)
Image description: Accessible and inaccessible comparison of button size. The accessible example shows a hand pressing a large button (labeled button). The inaccessible example shows the same had with the finger on a series of 6 small buttons.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Large buttons (44 px) are accessible for people with physical disabilities who have dexterity needs.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

Large buttons are both easier to see and interact with. When people interact with small buttons, it's very likely they might accidentally miss the button or click on the wrong button, especially if they have a motor disability that affects their movement, such as paralysis or cerebral palsy.

This references WCAG criterion 2.5.5 Target Size (Level AAA).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

WCAG 2.1 recommends a target size of at least 44 x 44 pixels. However, the button can be smaller in the following scenarios:

  • Equivalent - there is another button that serves the same purpose and is at least 44 x 44 pixels
  • Inline - it's a link in a block of text
  • User agent control - the size of the button is set by the user
  • Essential - a certain presentation is essential

Target Size

There are a couple ways you can accomplish a large target size.

You can expand the size of the entire button so that it’s at least 44px wide in one direction. Sometimes, that might make the button look overwhelming, especially for icons. You can also make the button smaller but keep the target size large by using a link area or increasing the padding around the button.

Text and icon buttons at 44 pixels and slightly smaller.
Image description: Example of 2 buttons, 1 text and 1 icon, that have large target sizes. The button is 110x44 pixels and the garbage can icon at 44x44. In another version, the buttons look visually smaller but the target size is the same.


Buttons for Touch Screens

Even though large buttons are only required for WCAG level AAA, this rule becomes more critical when designing for a touch screen, such as a phone or tablet.

Human fingers are larger than a computer mouse. People who don't use a screen reader or keyboard typically don't tab through all the buttons on screen. Therefore, it’s important that buttons on mobile are large enough to accommodate the human error that could come with fingers and hand movement.

The same display with a smaller button on desktop and larger on mobile.
Image description: Example of the same page on desktop and mobile, showcasing a smaller button and mouse cursor on desktop and a larger button size and hand on mobile. The page displays some black text and a purple button.


Additionally, think about button placement on mobile. Smartphones are increasingly getting bigger and bigger. A human thumb can usually access the lower region of the phone. However, it gets increasingly difficult to access buttons at the top.

Interesting Further Reading



How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • The Android Accessibility Checker can automatically scan for buttons and suggest those that need larger touch target sizes.
  • The Adee plugin can test for button sizes across multiple devices on Figma and Sketch.
  • On computer browsers, use chrome inspect tools to manually inspect the size of the touch target.


No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)