Ratgeber

WCAG-Zielgröße 24 Pixel selbst messen: Kriterium 2.5.8 im Shop prüfen

Veröffentlicht am 30. Oktober 2026

Nach dem WCAG-Kriterium 2.5.8 „Zielgröße (Minimum)“ muss jedes Element, das man anklickt oder antippt, mindestens 24 × 24 CSS-Pixel groß sein. Ist es kleiner, besteht es trotzdem, wenn ein gedachter Kreis von 24 Pixel Durchmesser um seine Mitte kein anderes Ziel und keinen solchen Kreis eines anderen zu kleinen Ziels schneidet, oder wenn eine der vier weiteren Ausnahmen greift. Ob Ihre Mengenknöpfe, Farbmuster oder Schließen-Kreuze das schaffen, messen Sie in wenigen Minuten selbst mit den Entwicklertools von Chrome oder Firefox.

2.5.8 ist Stufe AA und kam mit WCAG 2.2 neu hinzu; die WCAG 2.2 wurden laut W3C am 5. Oktober 2023 erstmals veröffentlicht, die aktuelle Fassung trägt das Datum 12. Dezember 2024. Welche WCAG-Version für Ihren Shop zählt und welche weiteren Kriterien neu sind, erklärt der Überblick WCAG 2.2 für Onlineshops. Alle AA-Kriterien in Kurzform stehen in der WCAG-AA-Checkliste. Dieser Artikel nimmt sich nur die Zielgröße vor, dafür mit jedem Messschritt. Eine offizielle deutsche Übersetzung der WCAG 2.2 listet das W3C auf seiner Übersetzungsseite bisher nicht; „Zielgröße (Minimum)“ ist unsere Übersetzung von „Target Size (Minimum)“.

Was 2.5.8 genau verlangt

Der Normtext in WCAG 2.2 lautet: „The size of the target for pointer inputs is at least 24 by 24 CSS pixels“, gefolgt von fünf Ausnahmen. „Pointer inputs“ sind laut Begriffsbestimmung Eingaben mit Maus, Stift oder Finger. Ein „Ziel“ (target) ist der Bereich der Anzeige, der eine solche Eingabe annimmt, etwa die klickbare Fläche eines Buttons oder Links.

Was „24 × 24“ heißt, erklärt das Understanding-Dokument zu 2.5.8: Es muss möglich sein, ein volles Quadrat von 24 × 24 CSS-Pixeln waagerecht und senkrecht ausgerichtet vollständig in das Ziel zu legen. Daraus folgen drei Punkte, die beim Messen oft übersehen werden:

• Runde Buttons: Ein runder Button mit 24 Pixel Durchmesser ist zu klein, weil die abgerundeten Ecken kein 24er-Quadrat zulassen. Laut Understanding (Abbildung 3) kann er trotzdem bestehen, wenn genug Abstand zu anderen Zielen da ist.
• Zoom zählt nicht: Die Anforderung gilt laut Understanding unabhängig vom Zoom. Sie können nicht argumentieren, dass der Button beim Vergrößern groß genug wird.
• Überlappende Ziele: Überlappen sich zwei Ziele, zählt die Überlappung laut Begriffsbestimmung nicht zur Zielgröße, außer beide Ziele lösen dieselbe Aktion aus oder öffnen dieselbe Seite.

Das W3C empfiehlt im Understanding ausdrücklich, als gute Praxis die 24 Pixel unabhängig vom Abstand einzuhalten und für wichtige Bedienelemente zu erwägen, die strengeren 44 Pixel aus 2.5.5 zu erreichen.

Die fünf Ausnahmen

Ein Ziel unter 24 × 24 CSS-Pixel besteht 2.5.8 trotzdem, wenn eine dieser Ausnahmen aus dem Normtext greift. Die Erläuterungen stammen aus dem Understanding 2.5.8, die Shop-Beispiele sind unsere Einordnung.

Wichtig für die Praxis:

• Abstand ist eine Ausweichlösung, keine Abkürzung. Laut Understanding kann ein sehr kleines Ziel bestehen, solange keine anderen Ziele zu nah sind. Zwei Reihen von 16 Pixel hohen Buttons mit 1 Pixel Lücke fallen dagegen durch (Abbildung 7).
• Inline gilt für Links im Satz oder in Fließtext. Eine Reihe von Links in der Fußzeile oder eine Liste von Kategorien steht in keinem Satz, und ihre Höhe begrenzt kein umgebender Text. Nach unserer Lesart greift die Ausnahme dort nicht.
• Vom Browser bestimmt endet, sobald Sie die Größe ändern. Laut Understanding gilt die Ausnahme nur, solange der Shop die vom Browser vorgegebene Größe nicht verändert hat. Nach unserer Lesart ist das nicht mehr der Fall, wenn Ihr Theme die Checkbox mit eigener Breite und Höhe gestaltet oder durch eine Grafik ersetzt.
• Wesentlich ist eng. Laut Begriffsbestimmung ist etwas nur wesentlich, wenn sein Wegfall Information oder Funktion grundlegend ändern würde und es keinen anderen konformen Weg gibt. Gestaltungswünsche gehören nicht dazu.
• Schieberegler zählen als ein Ziel. Anmerkung 1 zum Kriterium: Ziele, in denen man einen Wert über die Position auswählt, gelten als ein Ziel, etwa Schieberegler oder Farbverläufe zur Farbwahl.
• Verdeckte Ziele zählen nicht, solange sie verdeckt sind. Laut Understanding gilt die Anforderung nicht für Ziele, die gerade von Inhalten verdeckt werden, die nach einer Nutzeraktion oder per Skript erscheinen; ausdrücklich genannt ist ein Cookie-Banner nach dem Laden der Seite. Für die Ziele im neuen Inhalt selbst, also die Buttons im Cookie-Banner, gilt sie aber.

Abgrenzung: 2.5.8 (AA) und 2.5.5 (AAA)

Für AA zählt 2.5.8. 2.5.5 ist freiwillig; das Understanding zu 2.5.5 empfiehlt sogar Ziele über dessen Mindestmaß von 44 Pixeln, besonders für Bedienelemente, die oft genutzt werden, deren Ergebnis sich nicht leicht rückgängig machen lässt, die am Bildschirmrand liegen oder Teil eines Ablaufs sind. Unsere Einschätzung: Im Shop trifft das auf „In den Warenkorb“, die Mengenknöpfe und die Buttons im Checkout zu.

CSS-Pixel und Gerätepixel: was Sie messen

Die WCAG messen in CSS-Pixeln, nicht in Bildschirmpunkten. Laut MDN zu devicePixelRatio gibt dieser Wert an, wie viele echte Bildschirmpixel der Browser für einen CSS-Pixel verwendet; ein Wert von 2 ist laut MDN für HiDPI- und Retina-Bildschirme zu erwarten. Für Ihre Messung heißt das:

• Entwicklertools zeigen CSS-Pixel. Die Werte im Tooltip, im Box-Modell und in der Konsole sind die Werte, die Sie mit 24 vergleichen.
• Screenshots täuschen. Auf einem Retina-Bildschirm ist ein 24-Pixel-Button im Screenshot oft 48 Bildpunkte breit. Messen Sie deshalb nie mit einem Bildbearbeitungsprogramm im Screenshot.
• Zoom ändert nichts. Laut Understanding bleibt die CSS-Pixel-Größe beim Zoomen gleich. Prüfen Sie trotzdem bei 100 % Zoom, damit Messlineale und Ihr Augenmaß zusammenpassen.
• Smartphone-Ansicht prüfen. Viele Themes zeigen auf dem Handy andere, oft kleinere Bedienelemente. Messen Sie Desktop und Handy-Ansicht getrennt.

Schritt für Schritt messen in Chrome

Die Schritte folgen der Chrome-Dokumentation zum Inspect-Modus, zur CSS-Ansicht und zum Gerätemodus. Die Google-Dokumentation nennt die Menünamen auf Englisch; in einem deutschen Chrome lauten sie entsprechend übersetzt.

1. Element auswählen. Drücken Sie Strg + Umschalt + C (Windows, Linux) oder Cmd + Option + C (Mac). Das öffnet die Entwicklertools direkt im Auswahlmodus. Alternativ: Rechtsklick auf das Element und den Eintrag zum Untersuchen wählen (englisch Inspect).
2. Tooltip lesen. Fahren Sie mit der Maus über den Button, ohne zu klicken. Laut Chrome-Dokumentation zeigt der Tooltip unter anderem die Maße des Elements in Pixeln sowie Innenabstand (Padding) und Außenabstand (Margin). Halten Sie Strg + Alt (Mac: Ctrl + Option), bleibt der Tooltip stehen, während Sie die Maus bewegen.
3. Das richtige Element treffen. Oft ist das Symbol (ein svg oder i) kleiner als der Button oder Link darum. Maßgeblich ist das Element, das den Klick annimmt, meist das a oder button. Klicken Sie im Elemente-Bereich eine Ebene höher, bis Sie beim Link oder Button sind.
4. Box-Modell ansehen. Wählen Sie das Element per Klick aus. Laut Dokumentation zeigt der Reiter Styles über die Schaltfläche Show sidebar das Box-Modell: innen die Inhaltsfläche, darum Padding, Rahmen und Margin. Nach unserer Lesart zählt zur klickbaren Fläche Inhalt plus Padding plus Rahmen, der Margin nicht.
5. Handy-Ansicht prüfen. Schalten Sie mit Toggle device toolbar in die Geräteansicht, wählen Sie ein Smartphone und wiederholen Sie die Schritte 2 bis 4.
6. Notieren. Breite × Höhe in CSS-Pixeln, und ob das kleinere Maß unter 24 liegt.

Schritt für Schritt messen in Firefox

Grundlage ist die Firefox-Dokumentation zum Auswählen eines Elements, zum Box-Modell und zum Messwerkzeug. Auch hier nennt die Dokumentation die englischen Namen.

1. Inspektor öffnen. Rechtsklick auf das Element und den Eintrag zum Untersuchen wählen (englisch Inspect Element).
2. Tooltip lesen. Mit aktivierter Auswahl (Schaltfläche Select element) zeigt Firefox laut Dokumentation beim Überfahren das Box-Modell auf der Seite und einen Tooltip mit Tag und Größe.
3. Box-Modell ansehen. Ist das Element ausgewählt, zeigt die Box-Modell-Ansicht (englisch Box Model) die Maße im Detail. Fahren Sie über einen Wert, zeigt Firefox, aus welcher CSS-Regel er stammt; so finden Sie die Stelle für die Behebung.
4. Abstände messen. Für den Abstand zwischen zwei Zielen schalten Sie das Messwerkzeug ein: in den Einstellungen der Entwicklertools unter Available Toolbox Buttons das Häkchen Measure a portion of the page setzen. Danach erscheint oben rechts ein Knopf; mit gedrückter Maustaste ziehen Sie ein Rechteck auf und sehen seine Maße in Pixeln.
5. Handy-Ansicht prüfen. Öffnen Sie die Ansicht für responsives Design (englisch Responsive Design Mode) mit Strg + Umschalt + M (Mac: Cmd + Option + M) oder über ihren Knopf in der Werkzeugleiste der Entwicklertools, wählen Sie ein Smartphone-Format und wiederholen Sie die Schritte 2 bis 4.

Schnelle Prüfmethode: der Mittelpunktabstand

Liegt ein Ziel unter 24 Pixeln, prüfen Sie die Abstandsausnahme. Den Kreis müssen Sie nicht zeichnen. Aus den Beispielen im Understanding 2.5.8 ergibt sich diese Faustregel (unsere Ableitung; der Kreis hat einen Radius von 12 Pixeln):

Die Bedingung mit 12 Pixeln bis zum Rand gilt für jeden Nachbarn. Sie zählt besonders, wenn der Nachbar nur in einer Richtung zu klein ist, etwa ein breiter, aber nur 16 Pixel hoher Button: Ein 16 × 16 Pixel großes Symbol direkt daneben braucht dann 4 Pixel Lücke, obwohl die Mittelpunkte weit auseinanderliegen.

Notieren Sie je Ziel Breite, Höhe und die Lücke zum Nachbarn. Sind zwei zu kleine Ziele nebeneinander gleich breit, ist der Mittelpunktabstand Zielbreite plus Lücke; ergibt das 24 oder mehr, besteht die Stelle. Sind die Ziele verschieden groß, rechnen Sie mit der Tabelle oben: Der Mittelpunktabstand ist die halbe Breite des einen Ziels plus Lücke plus die halbe Breite des anderen, der Abstand vom Mittelpunkt bis zum Rand des Nachbarn ist die halbe Breite plus Lücke.

Alle kleinen Ziele einer Seite auf einmal finden. Öffnen Sie in Chrome oder Firefox die Konsole (Reiter Console), fügen Sie diese Zeile ein und drücken Sie Enter. Zeigt der Browser beim ersten Einfügen eine Warnung, tippen Sie den dort verlangten Text ab und fügen Sie die Zeile danach erneut ein. In Chrome ist das laut Google der Text „allow pasting“, und danach erscheint die Warnung nicht mehr.

Die Zeile umrandet jedes Bedienelement, dessen Rahmen schmaler oder niedriger als 24 Pixel ist, rot und listet es mit seinen Maßen; auch unsichtbar gemachte Elemente wie versteckte Original-Checkboxen erscheinen in der Liste. Runde Buttons mit genau 24 Pixel Durchmesser meldet sie nicht, obwohl sie zu klein sind; prüfen Sie diese von Hand. Sie nutzt getBoundingClientRect, das laut MDN die Größe einschließlich Padding und Rahmen liefert. Die Liste ist ein Startpunkt, kein Urteil: Links im Fließtext, unveränderte Browser-Elemente und Ziele mit genug Abstand sind trotz roter Umrandung in Ordnung. Ziele, die nur per Skript klickbar sind, ohne eines der genannten Merkmale, findet die Zeile nicht. Nach dem Neuladen der Seite sind die Umrandungen wieder weg. Automatische Werkzeuge wie axe prüfen das Kriterium ebenfalls mit der Regel target-size; wie Sie axe einsetzen, steht in axe DevTools: den Shop selbst prüfen.

Typische Stellen im Shop

Diese Stellen sind nach unserer Erfahrung die häufigsten Kandidaten. Die Bewertung hängt immer von Ihren Messwerten ab.

So beheben Sie: Padding, Mindestmaße, Abstand

Es gibt drei Wege, und meist reicht einer:

• Padding: Vergrößert die klickbare Fläche, ohne das Symbol zu verändern. Ein 16-Pixel-Symbol mit 4 Pixel Padding ringsum ergibt 24 × 24 Pixel.
• min-width und min-height: Setzt eine Untergrenze, auch wenn der Inhalt schmal ist, etwa die Zahl „1“ in der Paginierung. Eine verwandte Variante beschreibt das W3C als ausreichende Technik C42: Dort bekommt das umgebende Listenelement mindestens 24 × 24 Pixel, sodass die kleineren Links darin genug Abstand haben.
• Abstand: Margin oder gap zwischen den Zielen. Das erfüllt nur die Abstandsausnahme; die Fläche bleibt klein. Das Understanding empfiehlt, möglichst die Größe selbst zu erreichen.

Ein Beispiel für Mengenknöpfe, Social-Icons und Kreuze (Klassennamen sind Platzhalter, in Ihrem Theme heißen sie anders):

Die Lücke von 4 Pixel reicht nur, wenn die Ziele mindestens 20 Pixel breit und hoch sind; bei kleineren Zielen rechnen Sie mit der Faustregel oben nach.

box-sizing: border-box sorgt dafür, dass min-width und min-height die ganze Fläche mit Padding meinen. display: inline-flex braucht es, weil reine Inline-Elemente wie ein a ohne Anzeigeart Breite und Höhe nicht übernehmen. Prüfen Sie nach der Änderung, ob Zeilen jetzt umbrechen oder Symbole verrutschen und ob ausgeblendete Elemente plötzlich sichtbar sind, und messen Sie erneut.

Was Sie Ihrem Theme-Anbieter sagen: „Bitte alle Bedienelemente auf mindestens 24 × 24 CSS-Pixel klickbare Fläche bringen, nach WCAG 2.2 Kriterium 2.5.8. Betroffen sind: [Liste aus Ihrem Prüfprotokoll].“

Prüfprotokoll: Checkliste Zielgröße

Vorbereitung

• Seiten festgelegt: Startseite, Kategorieseite, Produktseite, Warenkorb, Checkout bis vor die Zahlung.
• Browser auf 100 % Zoom, Entwicklertools offen.
• Desktop und Handy-Ansicht getrennt geprüft.

Messen

• Konsolenzeile ausgeführt, rot umrandete Elemente notiert.
• Jedes notierte Element mit Tooltip oder Box-Modell gemessen, am Link oder Button, nicht am Symbol.
• Runde Buttons, auch nicht gemeldete: Passt ein 24er-Quadrat hinein, oder braucht es die Abstandsausnahme?
• Je Element festgehalten: Seite, Stelle, Breite × Höhe, Lücke zum Nachbarn.

Ausnahmen prüfen

• Ziel unter 24 Pixel: vom Mittelpunkt bis zum Rand jedes anderen Ziels mindestens 12 Pixel; zu jedem anderen zu kleinen Ziel zusätzlich Mittelpunktabstand mindestens 24 Pixel.
• Gibt es dieselbe Funktion über ein ausreichend großes Element auf derselben Seite?
• Steht der Link wirklich in einem Satz oder Fließtext? Fußzeilen und Linklisten zählen nach unserer Lesart nicht.
• Ist das Element unverändert vom Browser gestaltet, ohne eigenes CSS für die Größe?
• Ist die Darstellung wirklich wesentlich, etwa eine Karte? Begründung notiert.

Typische Stellen abgehakt

• Mengen-Plus und -Minus, Entfernen-Symbol im Warenkorb
• Farbmuster und Größenauswahl
• Sternebewertung zum Abgeben
• Punkte und Pfeile im Bild-Karussell, Preisfilter-Regler
• Paginierung
• Social-Icons und Linkreihen in der Fußzeile
• Schließen-X und Buttons im Cookie-Banner, in Popups und im Mini-Warenkorb
• Gestaltete Checkboxen und Radio-Buttons

Nach der Behebung

• Jede behobene Stelle erneut gemessen, Desktop und Handy.
• Kein neuer Zeilenumbruch, keine Überlappung von Zielen.
• Protokoll mit Datum abgelegt; nach jedem Theme-Update die Konsolenzeile wiederholt.

Ihr nächster Schritt

Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Als automatische Prüfung findet er nur einen Teil der Barrieren; ob eine kleine Schaltfläche unter eine Ausnahme fällt, prüfen Sie selbst mit der Checkliste oben.

Stand: 30.10.2026. Quellen gelesen am 30.10.2026.