Touch-Target-Prüfer
Größe von Touch-Zielen prüfen: WCAG 2.2 mit 24 und 44 px, Apple 44 pt und Material 48 dp – mit Abstand und Empfehlung.
Der Touch-Target-Prüfer testet, ob Bedienelemente groß genug für Fingerbedienung sind. Du gibst Breite, Höhe und den Abstand zu Nachbarn ein und erhältst die Bewertung nach WCAG 2.2 (24 px, AAA 44 px), Apple (44 pt) und Material Design (48 dp). Bei zu kleinen Zielen berechnet das Tool, wie viel Padding fehlt, und liefert CSS und Tailwind.
- Erfüllt
WCAG 2.2, Erfolgskriterium 2.5.8 (Stufe AA)
Mindestens 24 × 24 px, oder ausreichend Abstand zu Nachbarn
Größe ausreichend.
- Nicht erfüllt
WCAG 2.2, Erfolgskriterium 2.5.5 (Stufe AAA)
Mindestens 44 × 44 px
- Nicht erfüllt
Apple Human Interface Guidelines
Mindestens 44 × 44 pt
- Nicht erfüllt
Google Material Design
Mindestens 48 × 48 dp, mit 8 dp Abstand
So kommst du auf 44 × 44 px
Es fehlen 6 px Padding links und rechts sowie 6 px oben und unten.
/* Mindestgröße */
.target {
min-width: 44px;
min-height: 44px;
}
/* oder vergrößerte Fläche über Padding */
.target {
padding: 6px 6px;
}Warum Mindestgrößen für Touch-Ziele?
Finger sind ungenauer als Mauszeiger. Kleine oder eng stehende Bedienelemente führen zu Fehlklicks, besonders bei motorischen Einschränkungen, Zittern oder unterwegs. Mindestgrößen und Abstände machen Oberflächen für alle zuverlässiger bedienbar.
Empfehlungen im Vergleich
| Quelle | Mindestgröße | Hinweis |
|---|---|---|
| WCAG 2.2, 2.5.8 (AA) | 24 × 24 px | Ausnahme bei ausreichendem Abstand |
| WCAG 2.2, 2.5.5 (AAA) | 44 × 44 px | Erweiterte Anforderung |
| Apple HIG | 44 × 44 pt | Für iOS-Bedienelemente |
| Material Design | 48 × 48 dp | Mit mindestens 8 dp Abstand |
So gehst du vor
- Größe und Nachbarschaft eintragen.
- Nicht erfüllte Kriterien beheben, meist mit Padding.
- Buttons gestaltest du im Button-Generator, Dichte-Stufen berechnet der UI-Dichte-Rechner.
Beispiel
Ein Icon-Button mit 20 × 20 px erreicht 44 × 44 px, wenn du 12 px Padding auf jeder Seite ergänzt. Das Icon bleibt gleich groß, die tippbare Fläche wächst. Nutzen Menschen dein Formular mobil, prüfe auch die Farben mit dem Farbkontrast-Prüfer.
Häufige Fragen
Wie groß muss ein Touch-Ziel sein?
WCAG 2.2 verlangt auf Stufe AA mindestens 24 × 24 CSS-Pixel (Kriterium 2.5.8), Stufe AAA empfiehlt 44 × 44 (2.5.5). Apple nennt 44 × 44 pt, Google Material 48 × 48 dp. Als Faustregel für gute Bedienbarkeit gelten etwa 44 bis 48 px.
Was ist die Abstandsausnahme bei WCAG 2.5.8?
Ein Ziel unter 24 × 24 px besteht trotzdem, wenn ein 24-px-Kreis um seine Mitte kein anderes Ziel und keinen Kreis eines anderen kleinen Ziels berührt. Der Rechner nimmt dafür gleich große Nachbarn im angegebenen Abstand an.
Muss das sichtbare Element so groß sein?
Nein, entscheidend ist die klickbare Fläche. Ein 20-px-Icon kann durch Padding oder ein größeres umgebendes Element auf 44 px kommen, ohne dass es größer aussieht.
Gilt die Vorgabe auch für Textlinks?
Links im Fließtext sind von 2.5.8 ausgenommen. Links in Listen, Navigationen und Fußzeilen brauchen dagegen ausreichend Fläche oder Abstand.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.