What Is the WCAG 2.5.8 Target Size Minimum and How Do You Meet It?

WCAG 2.5.8 Target Size Minimum is a new Level AA success criterion in WCAG 2.2 requiring that interactive targets be at least 24 by 24 CSS pixels, or have sufficient spacing from adjacent targets. Touch target accessibility matters: research from MIT's Touch Lab found that the average human fingertip is 16-20mm wide, and users with motor impairments experience error rates up to 75% higher on small targets. This guide covers everything you need to implement accessible target sizes across your website or application.

Key Takeaways

Target size accessibility ensures all users can accurately activate interactive elements. Here are the essential facts:

• Interactive targets must be at least 24x24 CSS pixels, or have 24px spacing from adjacent targets
• This criterion is new in WCAG 2.2 (October 2023) and is required for AA conformance
• The stricter WCAG 2.5.5 (Level AAA) requires 44x44 CSS pixels for enhanced accessibility
• Inline links within text blocks are exempt from this requirement
• Mobile touch targets benefit from even larger sizes (48x48 pixels per platform guidelines)

Understanding WCAG 2.5.8 Target Size Minimum

The Requirement Explained

WCAG 2.5.8 states that interactive targets must meet one of the following conditions:

1. Size: The target is at least 24 by 24 CSS pixels, OR
2. Spacing: The target has at least 24 CSS pixels of spacing from any adjacent target, OR
3. Equivalent: A conforming alternative target exists on the same page, OR
4. Inline: The target is within a sentence or block of text, OR
5. User Agent: The target size is controlled by the browser, not the author, OR
6. Essential: The specific size is legally required or essential to the information

Why 24x24 Pixels?

The 24x24 pixel minimum balances several factors:

• Physical finger size: The average fingertip covers approximately 44px at typical DPI
• Motor control variation: Users with tremors need larger targets to compensate for movement
• Practical design constraints: 24px allows reasonable density for complex interfaces
• Device variation: Works across desktop, tablet, and mobile

The 24x24 size is a minimum floor, not an optimal target. Apple's Human Interface Guidelines recommend 44x44 points, and Google's Material Design suggests 48x48dp for touch targets.

Relationship to WCAG 2.5.5 Target Size (Enhanced)

WCAG includes two target size criteria:

+----------------------------------+------------+----------------------+
|            Criterion             |   Level    |     Minimum Size     |
+----------------------------------+------------+----------------------+
|   2.5.8 Target Size (Minimum)    |     AA     |   24x24 CSS pixels   |
+----------------------------------+------------+----------------------+
|   2.5.5 Target Size (Enhanced)   |    AAA     |   44x44 CSS pixels   |
+----------------------------------+------------+----------------------+

Most organizations target Level AA, making 24x24 the common requirement. However, organizations serving users with significant motor impairments should consider AAA compliance.

Measuring Target Size Correctly

What Counts as Target Size?

The target size is the entire clickable/tappable area, not just the visible element:

<!-- Visible button is small, but padding creates larger target -->
<button class="icon-button">
  <svg width="16" height="16"><!-- icon --></svg>
</button>

<style>
.icon-button {
  /* Visual size: 16x16 */
  width: 16px;
  height: 16px;

  /* But padding extends the clickable area */
  padding: 12px;
  /* Actual target: 40x40 (16 + 12 + 12) */

  background: transparent;
  border: none;
}
</style>

CSS Pixels vs Device Pixels

WCAG uses CSS pixels, not physical or device pixels:

/* This creates a 24x24 CSS pixel target */
.target {
  width: 24px;
  height: 24px;
}

/* On a 2x Retina display, this is 48x48 device pixels */
/* On a 3x display, this is 72x72 device pixels */
/* But WCAG only cares about the 24x24 CSS pixels */

The Spacing Alternative

If a target is smaller than 24x24, it can still pass if adequately spaced:

/* Small icon buttons that pass via spacing */
.toolbar-button {
  width: 20px;
  height: 20px;
  padding: 4px;
  /* Total: 28x28 - this passes by size */
}

/* Truly small targets need spacing */
.tiny-button {
  width: 16px;
  height: 16px;
  /* Fails size requirement */

  margin: 6px;
  /* With margin, center-to-center distance exceeds 24px */
  /* This passes via spacing */
}

The spacing is measured from the center of one target to the edge of the next. If the undersized target has a 24-pixel "dead zone" around it, it complies.

Common Target Size Failures

Icon Buttons Without Padding

/* FAILS - Only 16x16 clickable area */
.icon-only-fail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
}

/* PASSES - Padding extends clickable area */
.icon-only-pass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: none;
}

.icon-only-pass svg {
  width: 16px;
  height: 16px;
}
/* Total target: 32x32 (16 + 8 + 8) */

Densely Packed Navigation

<!-- FAILS - Links too close together -->
<nav class="dense-nav">
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/services">Services</a>
  <a href="/contact">Contact</a>
</nav>

<style>
.dense-nav a {
  padding: 4px 8px;
  margin: 0 2px;
  /* Links may render at 18px tall, too close together */
}
</style>

<!-- PASSES - Adequate spacing and padding -->
<nav class="accessible-nav">
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/services">Services</a>
  <a href="/contact">Contact</a>
</nav>

<style>
.accessible-nav a {
  display: inline-block;
  padding: 12px 16px;
  margin: 0 4px;
  /* Each link is at least 24px tall with spacing */
}
</style>

Small Checkbox and Radio Inputs

/* Default browser checkboxes may be too small */
input[type="checkbox"],
input[type="radio"] {
  /* Browser default often ~13x13 */
}

/* Solution 1: Scale up the input */
input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
}

/* Solution 2: Custom styling with adequate hit area */
.custom-checkbox {
  position: relative;
  padding-left: 32px;
  min-height: 24px;
  cursor: pointer;
}

.custom-checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  background: white;
}

Close Buttons on Modals and Alerts

/* FAILS - Tiny X button */
.close-button-fail {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  font-size: 12px;
  padding: 0;
}

/* PASSES - Adequate touch target */
.close-button-pass {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.close-button-pass svg {
  width: 16px;
  height: 16px;
}

Implementation Best Practices

Minimum Size System

Create a consistent sizing system:

:root {
  /* Target size tokens */
  --target-minimum: 24px;
  --target-comfortable: 44px;
  --target-large: 48px;

  /* Spacing tokens */
  --target-gap-minimum: 8px;
  --target-gap-comfortable: 12px;
}

/* Base interactive element styles */
button,
.button,
[role="button"] {
  min-width: var(--target-minimum);
  min-height: var(--target-minimum);
}

/* Touch-optimized buttons */
.button-touch {
  min-width: var(--target-comfortable);
  min-height: var(--target-comfortable);
}

Responsive Target Sizing

Increase target sizes on touch devices:

/* Base desktop size */
.action-button {
  min-height: 32px;
  padding: 6px 16px;
}

/* Larger on touch devices */
@media (pointer: coarse) {
  .action-button {
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* Or using hover capability */
@media (hover: none) {
  .action-button {
    min-height: 44px;
    padding: 12px 20px;
  }
}

Icon Button Component

<button class="icon-button" aria-label="Delete item">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="..."/>
  </svg>
</button>

<style>
.icon-button {
  /* Minimum touch target */
  min-width: 44px;
  min-height: 44px;

  /* Center the icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Remove default button styles */
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  /* Visual feedback */
  border-radius: 50%;
}

.icon-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.icon-button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.icon-button .icon {
  width: 24px;
  height: 24px;
}
</style>

Link Spacing in Lists

/* Navigation list with adequate spacing */
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  margin: 0;
}

.nav-list a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}

/* Ensures 24px+ between targets */
.nav-list a + a,
.nav-list li + li a {
  border-top: 1px solid #eee;
}

Form Input Sizing

/* Accessible form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px; /* Prevents iOS zoom */
}

/* Checkbox and radio groups */
.form-option {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
}

.form-option input {
  width: 24px;
  height: 24px;
  margin: 0;
}

How to Test for WCAG 2.5.8 Target Size

Manual Testing Methods

Using Browser DevTools:

1. Open DevTools > Elements panel
2. Select an interactive element
3. Check the Computed styles for width/height
4. Or use the box model visualization
5. Verify dimensions are at least 24x24

Overlay method:

// Add visual overlay to check target sizes
function showTargetSizes() {
  const targets = document.querySelectorAll(
    'a, button, input, select, textarea, [role="button"], [onclick]'
  );

  targets.forEach(target => {
    const rect = target.getBoundingClientRect();
    const overlay = document.createElement('div');

    overlay.style.cssText = `
      position: fixed;
      left: ${rect.left}px;
      top: ${rect.top}px;
      width: ${rect.width}px;
      height: ${rect.height}px;
      background: ${rect.width >= 24 && rect.height >= 24 ? 'rgba(0,255,0,0.3)' : 'rgba(255,0,0,0.3)'};
      pointer-events: none;
      z-index: 10000;
      border: 1px solid ${rect.width >= 24 && rect.height >= 24 ? 'green' : 'red'};
    `;

    overlay.setAttribute('data-size', `${Math.round(rect.width)}x${Math.round(rect.height)}`);
    document.body.appendChild(overlay);
  });
}

Automated Testing

// Using axe-core
axe.run({
  runOnly: {
    type: 'rule',
    values: ['target-size']
  }
}).then(results => {
  console.log('Target size violations:', results.violations);
});

# Using Lighthouse
lighthouse https://example.com --only-categories=accessibility --output=json | jq '.audits["tap-targets"]'

Testing Checklist

## Target Size Audit

### Global Elements
- [ ] Header navigation links (desktop and mobile)
- [ ] Logo/home link
- [ ] Search button
- [ ] Menu toggle button
- [ ] Social media icons
- [ ] Footer links

### Content Areas
- [ ] In-content links (inline text exempt)
- [ ] CTA buttons
- [ ] Image links
- [ ] Pagination controls
- [ ] Sorting/filtering controls

### Forms
- [ ] Text inputs
- [ ] Checkboxes
- [ ] Radio buttons
- [ ] Select dropdowns
- [ ] Submit buttons
- [ ] Clear/reset buttons

### Interactive Components
- [ ] Modal close buttons
- [ ] Carousel arrows
- [ ] Accordion toggles
- [ ] Tab buttons
- [ ] Dropdown triggers
- [ ] Date picker controls

How to Fix WCAG 2.5.8 Target Size Issues

Quick Fixes

Add padding without changing visual size:

/* Before: 16x16 icon button */
.small-button {
  width: 16px;
  height: 16px;
}

/* After: 44x44 touch target, same visual size */
.small-button {
  width: 16px;
  height: 16px;
  padding: 14px;
  margin: -14px;
  box-sizing: content-box;
}

Increase spacing between targets:

/* Before: Tightly packed */
.button-group button {
  margin: 2px;
}

/* After: Adequate spacing */
.button-group button {
  margin: 6px;
}

Systematic Remediation

Step 1: Audit current sizes

function auditTargetSizes() {
  const results = [];
  const targets = document.querySelectorAll(
    'a, button, input, select, [role="button"], [tabindex]:not([tabindex="-1"])'
  );

  targets.forEach((el, i) => {
    const rect = el.getBoundingClientRect();
    const styles = getComputedStyle(el);

    results.push({
      index: i,
      element: el.tagName,
      text: el.textContent?.substring(0, 20),
      width: Math.round(rect.width),
      height: Math.round(rect.height),
      passes: rect.width >= 24 && rect.height >= 24,
      isInline: styles.display === 'inline'
    });
  });

  console.table(results.filter(r => !r.passes && !r.isInline));
}

Step 2: Create size utility classes

/* Size utilities */
.min-target-aa {
  min-width: 24px;
  min-height: 24px;
}

.min-target-aaa {
  min-width: 44px;
  min-height: 44px;
}

.touch-target {
  min-width: 48px;
  min-height: 48px;
}

/* Apply to interactive elements globally */
button,
[role="button"],
.btn {
  min-width: 24px;
  min-height: 24px;
}

Step 3: Fix component-by-component

/* Before: Failing icon button */
.icon-btn {
  padding: 4px;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* After: Passing icon button */
.icon-btn {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn svg {
  width: 24px;
  height: 24px;
}

Frequently Asked Questions

Are inline links within paragraphs exempt?

Yes. Links within sentences or blocks of text are explicitly exempt from WCAG 2.5.8. The rationale is that these links are constrained by line height and would require impractical spacing if the criterion applied. However, ensuring adequate line height (1.5 or more) helps touch accessibility for inline links.

Do I need to resize all buttons to exactly 24x24?

No. The 24x24 size is a minimum, not a target. Buttons can be any size at or above 24x24 pixels. Most design systems use larger sizes (32-48 pixels) for better usability. The 24px minimum is a floor to prevent inaccessibly small targets.

How does zoom affect target size compliance?

WCAG measures target size at the default zoom level (100%). When users zoom in, targets become larger in terms of physical screen area, which helps accessibility. Your baseline design at 100% zoom must meet the 24px minimum.

What about native mobile app targets?

WCAG applies to web content. Native iOS and Android apps have their own guidelines: Apple recommends 44x44 points minimum, and Google's Material Design recommends 48x48dp. These are stricter than WCAG 2.5.8 but align with WCAG 2.5.5 (Level AAA).

Is there a maximum target size I should consider?

While there's no WCAG maximum, extremely large touch targets (taking up most of the screen) can cause accidental activation. Balance accessibility with usability. Platform guidelines suggest 48-60px as comfortable for primary actions.

How do I handle space-constrained interfaces like data tables?

In dense interfaces, use the spacing exception: ensure small targets have 24px spacing from adjacent targets. Alternatively, provide an alternative interaction method (like a details panel) with adequately sized controls.

Related Resources

• WCAG 2.2 Compliance Guide: Everything You Need to Know
• Complete Accessibility Testing Guide for Web Developers
• Best Shopify Accessibility Tool 2025: A Complete Review

This article was crafted using a cyborg approach—human expertise enhanced by AI to deliver comprehensive, accurate, and actionable accessibility guidance.