Barrierefreies Design · Touch-Targets

Touch-Targets und Klickflächen

Eine Schaltfläche, die zu klein ist, trifft man daneben – mit der Maus, mit dem Finger, erst recht mit zitternder Hand. Seit WCAG 2.2 gibt es dafür ein verbindliches Maß. Dieser Artikel erklärt, welches – und warum die oft genannten 44 Pixel nicht die ganze Geschichte sind.

  • 8 Minuten Lesezeit
  • Stand: Mai 2026

Warum die Größe einer Klickfläche zählt

Ein Touch-Target – auf Deutsch die Ziel- oder Klickfläche – ist der Bereich, der auf eine Berührung oder einen Klick reagiert: ein Button, ein Link, ein Icon, ein Auswahlkästchen. Ist dieser Bereich zu klein, wird das Treffen zur Geduldsprobe. Und das betrifft weit mehr Menschen, als man zunächst denkt.

Für Menschen mit motorischen Einschränkungen – etwa durch einen Tremor, eine Spastik oder die Folgen eines Schlaganfalls – ist eine knapp bemessene Schaltfläche oft schlicht nicht zuverlässig bedienbar. Aber auch ohne Diagnose trifft es viele: wer das Smartphone in der vollen Bahn mit einer Hand bedient, wer älter wird und an Feinmotorik verliert, wer ein Kind auf dem Arm hat. Situative Einschränkungen sind keine Ausnahme, sondern der Alltag.

Lange war die Mindestgröße von Klickflächen eine Frage von Hausregeln und Plattform-Empfehlungen. Mit der Version 2.2 der Web Content Accessibility Guidelines (WCAG) – der internationalen Grundlage für digitale Barrierefreiheit – ist daraus erstmals ein prüfbares Erfolgskriterium auf der praktisch relevanten Konformitätsstufe AA geworden.

Was die WCAG 2.2 fordert: 2.5.8 und 2.5.5

Zwei Erfolgskriterien der WCAG befassen sich mit der Zielgröße. Sie werden gern verwechselt – dabei ist der Unterschied entscheidend, weil nur eines von beiden verbindlich ist.

Kriterium 2.5.8 „Zielgröße (Minimum)“ – Stufe AA

Dieses Kriterium ist neu in der WCAG 2.2 und gehört zur Stufe AA. Es verlangt, dass die Zielfläche eines Bedienelements mindestens 24 × 24 CSS-Pixel groß ist – oder dass genug Abstand zu benachbarten Zielen besteht (dazu gleich mehr). Stufe AA ist die Konformitätsstufe, auf die sich die Gesetze im deutschsprachigen Raum – BFSG, BITV 2.0 – in der Praxis beziehen. Wer „WCAG-konform“ anstrebt, kommt an 2.5.8 also nicht vorbei.

Wichtig: Gemeint ist die klickbare Fläche , nicht zwingend das sichtbare Symbol. Ein 16 Pixel kleines Icon erfüllt das Kriterium, wenn die unsichtbare Trefferfläche darum herum auf 24 × 24 Pixel vergrößert ist – zum Beispiel über Innenabstand ( padding ).

Kriterium 2.5.5 „Zielgröße (erweitert)“ – Stufe AAA

Dieses Kriterium gibt es schon seit der WCAG 2.1. Es fordert die deutlich großzügigeren 44 × 44 CSS-Pixel – gehört aber zur Stufe AAA, der höchsten und nicht verpflichtenden Konformitätsstufe. Genau hier entsteht das verbreitete Missverständnis: Die oft zitierte „44-Pixel-Regel“ ist eine Empfehlung auf AAA-Niveau, kein Pflichtmaß.

Mindest-Zielgrößen nach Standard und Plattform
Standard / Plattform Mindestgröße Verbindlichkeit
WCAG 2.5.8 – Zielgröße (Minimum) 24 × 24 CSS-Pixel Stufe AA – praktisch relevant für BFSG und BITV 2.0
WCAG 2.5.5 – Zielgröße (erweitert) 44 × 44 CSS-Pixel Stufe AAA – Empfehlung, nicht verpflichtend
Apple Human Interface Guidelines (iOS) 44 × 44 pt Hersteller-Empfehlung für Apple-Plattformen
Material Design 3 (Android) 48 × 48 dp Hersteller-Empfehlung für Android
Größenvergleich der drei Zielgrößen-Maße Drei Quadrate im Größenvergleich, jeweils maßstäblich zueinander: das WCAG-Minimum mit 24 mal 24 Pixeln ist das kleinste, die AAA-Empfehlung mit 44 mal 44 Pixeln deutlich größer, die Material-Design-Empfehlung mit 48 mal 48 Pixeln am größten. Die Maße sind als Beschriftung an jedem Quadrat angegeben. 24 px WCAG AA 44 px WCAG AAA · Apple 48 px Material Design
Die drei Maße im Maßstab zueinander: Das verbindliche AA-Minimum (24 Pixel) ist spürbar kleiner als die verbreiteten Plattform-Werte. Wer sich an Apple oder Material orientiert, erfüllt 2.5.8 mühelos mit.

Die fünf Ausnahmen von Kriterium 2.5.8

Kriterium 2.5.8 ist kein starres Pixelraster. Es nennt fünf klar umrissene Ausnahmen, bei denen ein Ziel auch kleiner als 24 × 24 Pixel sein darf:

  • Abstand: Das Ziel ist kleiner, liegt aber so frei, dass ein gedachter Kreis von 24 Pixeln Durchmesser kein benachbartes Ziel berührt. Ausreichend Platz ersetzt also die Größe.
  • Äquivalent: Es gibt eine zweite Bedienmöglichkeit für dieselbe Funktion, die das Maß erfüllt – etwa ein großer Button zusätzlich zu einem kleinen Listeneintrag.
  • Inline: Das Ziel liegt mitten im Fließtext, etwa ein Link in einem Satz, wo die Größe durch den Zeilenfluss bestimmt wird.
  • Steuerung durch die Software: Größe und Darstellung werden vom Browser oder Betriebssystem vorgegeben und sind nicht von der Seite aus veränderbar.
  • Wesentlich: Eine bestimmte Darstellung ist für die Information unverzichtbar – das klassische Beispiel sind dicht beieinanderliegende Orte auf einer interaktiven Landkarte.

Diese Ausnahmen sind eng gefasst. Sie helfen in echten Sonderfällen, sind aber kein Freibrief: Eine Reihe winziger Icons in einer Toolbar lässt sich damit nicht rechtfertigen.

Abstand statt Größe: der Spacing-Weg

Die Abstands-Ausnahme verdient einen eigenen Blick, weil sie im Alltag häufig die elegantere Lösung ist. Nicht jedes Icon lässt sich beliebig vergrößern, ohne das Layout zu sprengen. Statt das sichtbare Element aufzublähen, kannst du die klickbare Fläche über Innenabstand vergrößern und gleichzeitig dafür sorgen, dass zwischen zwei Zielen genug Luft bleibt.

Praktisch heißt das: Ein 16 Pixel großes Icon bekommt rundherum padding , sodass die Trefferfläche auf mindestens 24 × 24 Pixel wächst – und benachbarte Ziele werden so angeordnet, dass sich ihre gedachten 24-Pixel-Kreise nicht überschneiden. Der sichtbare Eindruck bleibt kompakt, die Bedienbarkeit stimmt trotzdem.

Kriterium 2.5.8: drei Beispiele für Trefferflächen Drei Beispiele für Trefferflächen nebeneinander, im Maßstab eins zu zwei dargestellt: ein CSS-Pixel entspricht zwei SVG-Pixeln. Links: zwei sechzehn Pixel große Icons stehen so dicht beieinander, dass sich die gedachten Schutzkreise von vierundzwanzig Pixel Durchmesser um beide Icons überschneiden. Das Kriterium ist nicht erfüllt. Mitte: ein sechzehn Pixel großes Icon bekommt rundherum Innenabstand, sodass die Trefferfläche insgesamt vierundzwanzig mal vierundzwanzig Pixel groß ist. Das Kriterium ist erfüllt. Rechts: zwei sechzehn Pixel große Icons stehen so weit auseinander, dass die Schutzkreise sich nicht berühren. Auch hier ist das Kriterium erfüllt. ✗ Zu eng Abstand 20 CSS-Pixel 20 px Mittelpunkte unter 24 px Abstand Schutzkreise überlappen sich ✓ Padding Hit-Area 24 × 24 CSS-Pixel 24 px Symbol 16 px Innenabstand vergrößert die klickbare Fläche Symbol bleibt klein, Hit-Area passt ✓ Abstand Abstand 40 CSS-Pixel 40 px Mittelpunkte über 24 px Abstand Schutzkreise stehen frei
Kriterium 2.5.8 lässt sich auf zwei Wegen erfüllen: Entweder ist die Trefferfläche selbst mindestens 24 × 24 Pixel groß (Mitte, durch Padding um ein kleineres Symbol) – oder die Mittelpunkte kleinerer Ziele liegen so weit auseinander, dass sich die gedachten Schutzkreise von 24 Pixel Durchmesser um jedes Ziel nicht überschneiden (rechts). Die Maße sind im Schaubild im Verhältnis 1:2 vergrößert, damit die Differenz lesbar bleibt.
Mythen-Prüfung

„Die WCAG schreibt 44 Pixel große Buttons vor.“

Diese Aussage hört man oft – und sie ist nicht korrekt. Die Zahl 44 stammt aus Kriterium 2.5.5, das zur Stufe AAA gehört und damit ausdrücklich eine Empfehlung ist, keine Pflicht. Verbindlich auf der praktisch relevanten Stufe AA ist seit WCAG 2.2 das Kriterium 2.5.8 mit 24 × 24 Pixeln.

Woher kommt die 44 dann? Sehr wahrscheinlich aus den Apple Human Interface Guidelines, die seit Langem 44 × 44 Punkt empfehlen – ein Plattform-Wert, der über die Jahre als vermeintliche WCAG-Regel weitergereicht wurde. Das ändert nichts daran, dass große Ziele gut sind: 44 oder 48 Pixel sind komfortabler als 24. Nur sollte man Empfehlung und Pflicht auseinanderhalten – gerade, wenn es um die Bewertung von Konformität geht.

Was Apple und Material empfehlen

Wer Apps gestaltet, bewegt sich ohnehin in den Designsystemen der Plattformen – und beide setzen die Latte höher als das WCAG-Minimum:

  • Apple Human Interface Guidelines: empfehlen für iOS eine Mindestgröße von 44 × 44 Punkt. Der „Punkt“ (pt) ist Apples geräteunabhängige Einheit, die je nach Display-Dichte auf physische Pixel umgerechnet wird.
  • Material Design 3: empfiehlt für Android eine Mindest-Zielgröße von 48 × 48 dp – wobei das sichtbare Symbol kleiner sein darf, solange die Trefferfläche das Maß erreicht. „dp“ (density-independent pixels) ist das Android-Pendant zum Punkt.

Die gute Nachricht: Wer diese Plattform-Vorgaben einhält, erfüllt das WCAG-Kriterium 2.5.8 automatisch mit – 44 und 48 liegen beide klar über den geforderten 24 Pixeln. Reibung entsteht meist nur dort, wo eigene Komponenten an den Designsystemen vorbei gebaut werden.

Was du konkret tun kannst

Zusammengefasst lässt sich das Thema auf wenige, gut belegte Punkte eindampfen:

  • 24 × 24 Pixel als harte Untergrenze behandeln. Das ist das verbindliche AA-Maß für jede Klickfläche, die nicht unter eine der fünf Ausnahmen fällt.
  • Die Trefferfläche messen, nicht das Symbol. Kleine Icons über padding auf das nötige Maß bringen.
  • Abstand bewusst einsetzen. Wo Vergrößern nicht geht, sorgt genug Platz zwischen den Zielen für Konformität – und nebenbei für weniger Fehlklicks.
  • An Plattform-Vorgaben orientieren. 44 pt (Apple) oder 48 dp (Material) sind großzügiger und decken das WCAG-Minimum mit ab.
  • Mit dem Finger testen, nicht nur mit der Maus. Der Mauszeiger ist pixelgenau, die Fingerkuppe nicht – echte Touch-Bedienung deckt Probleme zuverlässiger auf.

Großzügige Klickflächen kosten selten Gestaltungsspielraum – sie sind fast immer einfach die robustere Lösung. Das verbindliche Maß ist niedriger als viele denken; es zu übertreffen, schadet niemandem.