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.
Auf einen Blick:
- Normaler Text: mindestens 4,5:1 (AA), 7:1 für AAA.
- Großer Text: mindestens 3:1 (AA). Groß heißt ab 24 CSS-Pixeln oder ab etwa 18,67 CSS-Pixeln bei fetter Schrift.
- UI-Komponenten und Grafiken: mindestens 3:1 zu angrenzenden Farben (WCAG 1.4.11).
- Nicht vergessen: Hover, Fokus, Fehlermeldungen, Links, Dark Mode. Der Ausgangszustand allein reicht nicht.
- Ausnahmen: Logos und rein dekorative Elemente sind von den Text-Grenzwerten befreit.
Mit dem WCAG-Kontrastrechner können Sie zwei deckende Hex-Farben direkt vergleichen. Was das Verhältnis technisch bedeutet, erklärt der Glossareintrag zu Kontrast.
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; wie Sie ihn gestalten, zeigt der Leitfaden zu Tastaturbedienung und Fokus.
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. Wo der Kontrast-Check in einer vollständigen Prüfung steht, zeigt der Überblick zum Barrierefreiheit-Testen; die systematische Bewertung aller Zustände übernimmt ein WCAG-Audit.
Häufige Fragen
Welches Kontrastverhältnis verlangt WCAG Level AA?
Normaler Text braucht mindestens 4,5:1, großer Text mindestens 3:1. Wesentliche Bedienelemente, Zustände und grafische Objekte brauchen nach WCAG 1.4.11 ebenfalls mindestens 3:1 gegenüber angrenzenden Farben. Level AAA verlangt 7:1 für normalen und 4,5:1 für großen Text.
Ab wann gilt Text nach WCAG als groß?
Ab 18 pt, oder ab 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 diese Grenze: dünne Schriftschnitte und helle Farbtöne können trotz bestandenem Mindestwert schwer lesbar bleiben.
Gilt die Kontrastanforderung auch für Logos?
Nein, Logos und Markennamen sind von den Text-Kontrastanforderungen ausgenommen, ebenso rein dekorative Elemente. Das ist eine normative Ausnahme und kein Gestaltungsargument: ein schlecht erkennbares Logo bleibt ein schlecht erkennbares Logo.
Braucht der Fokusindikator einen Mindestkontrast?
Ja. Als visuelle Information zum Erkennen eines Zustands fällt er unter WCAG 1.4.11 mit 3:1 auf Level AA. Die ausführlicheren Anforderungen an Größe und Form des Fokus stehen in WCAG 2.2 unter „Focus Appearance“ und sind dort Level AAA. Prüfen Sie den Fokus gegen den Hintergrund und gegen das Element selbst.
Quellen
Stand: 7. August 2026.