Welche Kontrastwerte verlangt WCAG?
Kurzantwort: Normaler Text benötigt auf Level AA mindestens 4,5:1, großer Text mindestens 3:1. Für Level AAA gelten 7:1 beziehungsweise 4,5:1. Wesentliche grafische Objekte, Zustände und sichtbare Grenzen von Bedienelementen benötigen auf Level AA in vielen Fällen mindestens 3:1 zu angrenzenden Farben.
Mit dem WCAG-Kontrastrechner können Sie zwei deckende Hex-Farben direkt vergleichen.
Normaler und großer Text
Als „groß“ gilt nach WCAG mindestens 18 pt oder 14 pt bei fetter Schrift. Im Web entsprechen 18 pt typischerweise 24 CSS-Pixeln und 14 pt etwa 18,67 CSS-Pixeln. Verlassen Sie sich nicht allein auf die nominelle Größe: dünne Schrift, enge Zeichenformen und helle Farbtöne können trotz bestandenem Mindestwert schwer lesbar sein.
| Inhalt | WCAG AA | WCAG AAA |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text | 3:1 | 4,5:1 |
| Wesentliche UI-Komponenten und Grafiken | 3:1 | kein zusätzlicher AAA-Grenzwert |
Logos und rein dekorative Elemente sind von den Text-Kontrastanforderungen ausgenommen. Das bedeutet nicht, dass schlecht erkennbare Logos eine gute Gestaltung wären.
Zustände nicht übersehen
Prüfen Sie nicht nur den Ausgangszustand. Relevant sind auch:
- Hover und Tastaturfokus,
- deaktivierte und ausgewählte Elemente,
- Fehlermeldungen und Platzhalter,
- Links im Fließtext,
- besuchte Links,
- Text über Bildern oder Verläufen,
- Dark Mode und erzwungene Farben.
Wenn ein Link nur durch Farbe vom umgebenden Text unterschieden wird, gelten zusätzliche Anforderungen. Eine dauerhafte Unterstreichung ist meist robuster und leichter verständlich.
Kontrast von Bedienelementen
WCAG 1.4.11 betrifft visuelle Informationen, die zum Erkennen von Komponenten und Zuständen nötig sind. Ein Eingabefeld, das nur durch eine sehr helle Umrandung sichtbar wird, kann deshalb scheitern. Hat es jedoch einen klaren Hintergrundwechsel oder eine andere ausreichend kontrastreiche Begrenzung, muss nicht jede dekorative Linie den Grenzwert erreichen.
Auch der Fokusindikator braucht genügend Kontrast. WCAG 2.2 verschärft die Anforderungen an seine Größe und Sichtbarkeit. Prüfen Sie den Fokus sowohl gegen den Hintergrund außerhalb als auch gegen das Element selbst.
Transparenz und Bilder
Bei halbtransparenten Farben hängt das Ergebnis vom tatsächlichen Hintergrund ab. Verläufe und Fotos können an unterschiedlichen Stellen verschiedene Kontrastwerte erzeugen. Prüfen Sie die ungünstigste Stelle oder legen Sie hinter Text eine deckende Fläche beziehungsweise einen ausreichend starken Verlauf.
Der Rechner dieser Website verarbeitet bewusst nur deckende sRGB-Hex-Farben. Dadurch bleibt das Ergebnis nachvollziehbar und suggeriert keine Genauigkeit, die bei komplexen Hintergründen nicht existiert.
Praktischer Prüfablauf
- Ermitteln Sie Vorder- und Hintergrundfarbe im tatsächlich gerenderten Zustand.
- Berechnen Sie das Verhältnis.
- Ordnen Sie Textgröße und erforderliches Level korrekt ein.
- Wiederholen Sie die Prüfung für Interaktionszustände.
- Prüfen Sie UI-Grenzen, Icons, Diagramme und Fokus getrennt.
- Testen Sie zusätzlich bei Zoom, Dark Mode und erzwungenen Farben.
Ein bestandener Zahlenwert ist eine Mindestanforderung, kein vollständiger Lesbarkeitstest. Schriftwahl, Zeilenabstand, Bildschirmqualität und individuelle Wahrnehmung bleiben relevant.
Quellen
Stand: 7. August 2026.