Design Atlas
한국어
◉ Accessibility

Target Size

타깃 크기

WCAG 2.2's minimum size for a clickable or tappable area — 24×24 CSS pixels — and the exceptions that don't need it.

Also known as: WCAG 2.2 target size2.5.8
···
html
<div class="stage">
  <div class="pane"><div class="tag">✗ 16px</div>
    <div class="row tight"><button></button><button></button><button id="hit1"></button><button></button></div>
    <div class="ptr p1"></div>
  </div>
  <div class="pane"><div class="tag">✓ 24px+</div>
    <div class="row roomy"><button></button><button id="hit2"></button><button></button></div>
    <div class="ptr p2"></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.row{display:flex}
.tight{gap:2px}
.tight button{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);background:var(--bg)}
.roomy{gap:12px}
.roomy button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--bg)}
button.err{background:var(--accent-2) !important}
button.ok{background:var(--accent-3) !important}
.ptr{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--fg);top:44%}
.p1{left:47%;animation:tap 3s ease-in-out infinite}
.p2{left:50%;animation:tap 3s ease-in-out infinite}
@keyframes tap{0%,10%{opacity:0}25%,80%{opacity:1}95%,100%{opacity:0}}
js
const h1 = document.getElementById('hit1');
const h2 = document.getElementById('hit2');
function pulse(el, cls) { el.classList.add(cls); setTimeout(function () { el.classList.remove(cls); }, 500); }
setInterval(function () {
  pulse(h1.previousElementSibling, 'err');
  pulse(h2, 'ok');
}, 2000);

New in WCAG 2.2, success criterion 2.5.8 requires pointer-operated targets to be at least **24×24 CSS pixels** (AA). Smaller than that, and a user with hand tremor or limited pointing precision easily mis-hits the neighbor.

It's not unconditional — inline targets that flow within a sentence (a link inside a paragraph), targets smaller than 24px that have an equivalent target elsewhere achieving the same result, and browser-native UI the author can't control are all exempt. If the visual size needs to stay small, padding the hit area out past 24px works without changing how it looks.

Left packs 16px targets tightly, so the pointer (circle) frequently mis-hits a neighbor. Right uses 24px+ with adequate spacing and lands precisely every time.

When to use

For controls you want to draw small — checkboxes, icon buttons, list-row actions — pad the hit area instead of enlarging the visual. For the larger 44px (iOS) / 48dp (Android) recommendations, see the touch-target entry.