Wie groß müssen Klickflächen auf dem Smartphone sein?

Klickflächen auf dem Smartphone sollten mindestens 24 × 24 CSS-Pixel groß sein – das verlangt die Barrierefreiheits-Richtlinie WCAG 2.2 auf Stufe AA. Für Hauptaktionen wie „In den Warenkorb“, Menü-Schalter oder Schließen-Kreuze ist 44 × 44 CSS-Pixel die bessere Zielgröße, und Android empfiehlt für Apps sogar 48 × 48 dp. Entscheidend ist dabei nicht das sichtbare Symbol, sondern die Fläche, die einen Tipp tatsächlich annimmt – und genug Abstand zum nächsten Element.

In dieser Anleitung erfährst du, welche Werte wofür gelten, wie die 24-Pixel-Regel mit ihren Ausnahmen funktioniert, wie du deine Seite prüfst und wie du zu kleine Ziele per CSS vergrößerst, ohne das Layout umzubauen.

Was zählt als Klickfläche?

Die WCAG sprechen von einem „Ziel“ (target) und meinen damit den Bereich der Anzeige, der eine Zeigeraktion annimmt – also den interaktiven Bereich eines Bedienelements (W3C: Understanding SC 2.5.8 Target Size (Minimum)). Das ist nicht automatisch dasselbe wie das, was du siehst:

• Ein Lupen-Symbol kann 16 Pixel groß sein, der umgebende Button aber 44 Pixel. Dann zählt der Button.
• Ein Link mit Innenabstand (padding) ist so groß wie seine Box inklusive Innenabstand – der Abstand gehört zur Trefferfläche.
• Ein Außenabstand (margin) gehört dagegen nicht zum Ziel. Er hilft nur beim Abstand zu Nachbarn.

Gemessen wird in CSS-Pixeln. Das ist die Maßeinheit, mit der du im Stylesheet arbeitest, unabhängig davon, wie viele Gerätepixel ein hochauflösendes Display dafür verwendet.

Welche Mindestgrößen gelten für Buttons und Links?

Es gibt nicht „den einen“ Wert. Die gängigen Vorgaben haben unterschiedliche Herkunft und unterschiedliche Verbindlichkeit:

Vorgabe	Mindestgröße	Einordnung
WCAG 2.2, Kriterium 2.5.8 Target Size (Minimum)	24 × 24 CSS-Pixel (mit Ausnahmen)	Stufe AA – der übliche Prüfmaßstab für Barrierefreiheit
WCAG 2.2, Kriterium 2.5.5 Target Size (Enhanced)	44 × 44 CSS-Pixel (mit Ausnahmen)	Stufe AAA – erhöhter Standard, sinnvoll für wichtige Aktionen
Android-Entwicklerdokumentation	48 × 48 dp	Empfehlung für Touch-Oberflächen in Apps, „größer ist noch besser“
Nielsen Norman Group	ca. 1 × 1 cm physisch	Usability-Empfehlung auf Basis von Forschung zu Fingergrößen

Die 44 Pixel aus Kriterium 2.5.5 (Target Size Enhanced) begründet das W3C unter anderem mit Menschen, die zittern oder feinmotorische Einschränkungen haben, mit Bedienung im fahrenden Fahrzeug, mit Einhandbedienung und mit Menschen, die mit großen Fingern oder nur mit einem Teil des Fingers tippen. Android empfiehlt in seiner Anleitung zu barrierefreien Apps für jedes interaktive Element mindestens 48 × 48 dp und weist darauf hin, dass Ziele für präzise Eingaben mit Maus oder Trackpad kleiner sein können.

Die Nielsen Norman Group nennt in ihrem Beitrag Touch Targets on Touchscreens rund 1 × 1 cm als Mindestmaß. Die Begründung: Eine Fingerkuppe ist im Schnitt 1,6 bis 2 cm breit, ein Daumen etwa 2,5 cm. Kleine Ziele brauchen länger und führen zu mehr Fehltipps. Der Kernsatz des Beitrags: Nicht die Finger sind das Problem, sondern zu kleine Ziele.

Praxisregel: Nutze 24 × 24 CSS-Pixel als Untergrenze, die kein Element unterschreiten sollte, und 44 × 44 CSS-Pixel als Standard für alles, was häufig oder mit Folgen angetippt wird.

Was bedeutet die 24-Pixel-Regel genau?

Kriterium 2.5.8 verlangt 24 × 24 CSS-Pixel, lässt aber fünf Ausnahmen zu. Wer die Ausnahmen kennt, vermeidet zwei Fehler: unnötig aufgeblähte Fließtextlinks und vermeintlich erfüllte Anforderungen, die in Wahrheit durchfallen.

Die Abstandsausnahme mit dem 24-Pixel-Kreis

Ein Ziel darf kleiner als 24 × 24 Pixel sein, wenn es genug Abstand hat. Der Test funktioniert so: Du legst gedanklich einen Kreis mit 24 Pixel Durchmesser auf die Mitte der Box jedes zu kleinen Ziels. Dieser Kreis darf kein anderes Ziel und keinen anderen solchen Kreis schneiden. Ein 16 Pixel großes Symbol ist also in Ordnung, wenn rundherum genug Platz ist – stehen fünf solcher Symbole dicht nebeneinander, fällt die Reihe durch.

Die weiteren Ausnahmen

• Gleichwertige Alternative: Dieselbe Funktion ist auf der Seite über ein anderes, ausreichend großes Element erreichbar.
• Inline: Links im Fließtext müssen die 24 Pixel nicht erfüllen, weil ihre Höhe durch die Zeilenhöhe vorgegeben ist. Diese Ausnahme gilt nicht für Links in Navigationen, Footer-Listen oder Kartenrastern.
• Vom Browser gesteuert: Unveränderte Standard-Bedienelemente des Browsers, etwa ein natives Datumsfeld, sind ausgenommen. Sobald du sie gestaltest, gilt die Ausnahme nicht mehr.
• Wesentlich: Die Darstellung ist für die Information unverzichtbar, etwa Punkte auf einer Karte.

Ziele, die nur vorübergehend von Inhalten verdeckt werden, die du selbst geöffnet hast – etwa ein aufgeklapptes Menü –, fallen ebenfalls nicht unter die Anforderung, solange sie verdeckt sind.

Ist die Mindestgröße für Klickflächen Pflicht?

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es erfasst unter anderem Dienstleistungen im elektronischen Geschäftsverkehr, also viele Onlineshops. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz, die Dienstleistungen anbieten, sind ausgenommen (Bundesfachstelle Barrierefreiheit zum BFSG).

Als technischer Maßstab dient die europäische Norm EN 301 549. Hier gibt es gerade eine Übergangssituation: Im September 2026 ist die Version 4.1.1 erschienen, die WCAG 2.2 übernimmt – und damit auch Kriterium 2.5.8. Laut AccessibleEU, dem Kompetenzzentrum der EU-Kommission, ist die neue Version aber noch nicht die rechtliche Referenznorm. Bis sie formal zitiert wird, bleibt EN 301 549 v3.2.1 auf Basis von WCAG 2.1 maßgeblich, und dort ist die 24-Pixel-Regel noch nicht enthalten.

Für dich heißt das: Plane neue Komponenten schon jetzt nach WCAG 2.2. Die Umstellung ist absehbar, und zu kleine Klickflächen sind unabhängig von der Rechtslage ein Bedienproblem. Ob und wie das BFSG für dein Angebot gilt, klärst du im Zweifel mit einer rechtlichen Beratung – dieser Beitrag ersetzt keine Rechtsberatung.

So prüfst du die Klickflächen deiner Website

Google hat den Bericht „Nutzerfreundlichkeit auf Mobilgeräten“ in der Search Console und den Mobile-Friendly-Test zum 1. Dezember 2023 eingestellt und verweist stattdessen unter anderem auf Lighthouse (Search Engine Land zur Einstellung der Mobile-Tools). Eine Warnung aus der Search Console bekommst du also nicht mehr. Prüfe stattdessen in vier Schritten:

1. Automatisch scannen: Prüfwerkzeuge auf Basis von axe-core melden zu kleine Ziele mit der Regel target-size. Sie prüft genau die 24-Pixel-Anforderung aus WCAG 2.2 inklusive Abstand und stuft Verstöße als schwerwiegend ein.
2. In den Entwicklertools messen: Öffne die Geräteansicht deines Browsers, wähle eine Smartphone-Breite und fahre mit dem Element-Inspektor über Buttons, Symbole und Links. Die angezeigte Box zeigt dir die tatsächliche Trefferfläche in CSS-Pixeln.
3. Problemzonen gezielt ansehen: Automatische Tests erfassen nicht jeden Zustand. Öffne Menüs, Filter, Warenkorb und Cookie-Hinweis und prüfe dort von Hand.
4. Auf einem echten Gerät tippen: Bediene die wichtigsten Abläufe einhändig mit dem Daumen. Wo du zweimal tippen musst oder das falsche Element triffst, besteht Handlungsbedarf.

Typische Problemstellen sind:

• Schließen-Kreuze in Pop-ups, Hinweisen und dem Offcanvas-Menü
• Plus- und Minus-Schalter für die Menge im Warenkorb
• Symbolreihen für Social Media, Teilen oder Bewertungssterne
• Seitenzahlen in der Paginierung und Punkte in Slidern
• Eng gesetzte Linklisten im Footer und Links im Cookie-Banner
• Checkboxen und Radiobuttons ohne klickbares Label

So vergrößerst du Klickflächen, ohne das Design zu ändern

Die gute Nachricht: Meist musst du nichts sichtbar größer machen. Du vergrößerst nur die Fläche, die den Tipp annimmt.

Innenabstand statt Außenabstand

Gib Links in Menüs und Listen einen Innenabstand und eine Mindesthöhe, statt sie über margin zu verteilen. So wächst die Trefferfläche mit, ohne dass sich die Optik ändert:

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

Symbol-Buttons mit fester Mindestgröße

Ein 20 Pixel großes Schließen-Symbol bleibt sichtbar klein, wenn der Button selbst mindestens 44 × 44 Pixel misst und das Symbol mittig enthält:

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}

Labels klickbar machen

Verbinde Checkboxen und Radiobuttons mit ihrem <label>. Dann nimmt auch der Text den Tipp an, und die Trefferfläche wächst deutlich. Das hilft zugleich Screenreadern und passt zu verständlichen Formularen, wie sie im Beitrag Fehlermeldungen im Checkout verständlich gestalten beschrieben sind.

Abstand zwischen Nachbarn sichern

Setze in Symbolreihen und Paginierungen einen festen Abstand mit gap. Vermeide negative Außenabstände, mit denen Elemente zusammengeschoben werden – genau dieses Muster nennt axe als typisches Fehlerbeispiel. Achte außerdem darauf, dass vergrößerte Trefferflächen sich nicht überlappen. Sonst trifft der Tipp das falsche Element.

Wenn du mit Bricks arbeitest, prüfe insbesondere den Menü-Schalter und das Schließen-Symbol im mobilen Menü. Wie du das Offcanvas-Menü insgesamt sauber aufbaust, zeigt der Beitrag Bricks Offcanvas-Menü ohne horizontalen Überlauf. Für die Bedienung ohne Maus und Touch lohnt sich zusätzlich ein Blick auf die Prüfung der Tastaturbedienung.

Checkliste: Klickflächen auf dem Smartphone

• Kein Bedienelement außerhalb von Fließtext ist kleiner als 24 × 24 CSS-Pixel – oder es hat ausreichend Abstand nach dem 24-Pixel-Kreis-Test.
• Hauptaktionen wie Kaufen, Absenden, Menü öffnen und Schließen messen mindestens 44 × 44 CSS-Pixel.
• Symbol-Buttons haben eine feste Mindestgröße, unabhängig von der Symbolgröße.
• Links in Navigation und Footer haben Innenabstand und Mindesthöhe.
• Checkboxen und Radiobuttons sind mit ihrem Label verbunden.
• Benachbarte Ziele überlappen sich nicht und sind nicht mit negativem Außenabstand zusammengeschoben.
• Menüs, Filter, Warenkorb, Pop-ups und Cookie-Hinweis wurden im geöffneten Zustand geprüft.
• Die wichtigsten Abläufe wurden auf einem echten Smartphone einhändig getestet.

Häufige Fragen zu Klickflächen

Gilt die Mindestgröße auch auf dem Desktop?

Ja. Kriterium 2.5.8 gilt für alle Zeigereingaben, also auch für Maus und Trackpad. Auf dem Smartphone fallen zu kleine Ziele nur am schnellsten auf, weil der Finger ungenauer ist als ein Mauszeiger.

Müssen Links im Fließtext 24 Pixel hoch sein?

Nein. Links innerhalb eines Satzes sind ausgenommen, weil ihre Größe von der Zeilenhöhe abhängt. Eine gut lesbare Schriftgröße und Zeilenhöhe helfen trotzdem beim Treffen.

Reicht es, wenn das Symbol groß genug aussieht?

Nein. Entscheidend ist die Fläche, die den Tipp annimmt. Ein großes Symbol in einem zu kleinen Link hilft nicht, ein kleines Symbol in einem ausreichend großen Button dagegen schon.

Warum 44 Pixel, wenn 24 Pixel reichen?

24 Pixel sind die Untergrenze für Stufe AA. 44 Pixel entsprechen der erhöhten Stufe AAA und kommen Menschen mit Zittern, eingeschränkter Feinmotorik oder Einhandbedienung deutlich mehr entgegen. Für häufig genutzte Aktionen ist das der sinnvollere Wert.

Wirken sich zu kleine Klickflächen auf SEO aus?

Google bewertet Klickflächen nicht mehr in einem eigenen Search-Console-Bericht. Mobile Nutzerfreundlichkeit bleibt aber Teil einer guten Seitenerfahrung. Konkret messbar sind die Folgen eher in deinen Daten: abgebrochene Bestellungen oder Fehltipps auf falsche Links. Wie du Gestaltung und Bedienbarkeit insgesamt zusammenbringst, zeigt der Beitrag Modernes Webdesign mit Klarheit und Charakter.