Textkontrast: 4,5:1 und 3:1
1.4.3 Kontrast (Minimum) verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund. Für großen Text genügt 3:1. Als groß gilt Text ab 18 Punkt oder ab 14 Punkt fett; im Browser entspricht das ungefähr 24 px beziehungsweise rund 18,7 px fett.
Ausgenommen sind reine Dekoration, Text in Logos und Text auf inaktiven Bedienelementen. Das Verhältnis reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Prüfen Sie Ihre Farben mit unserem Kontrast-Checker; er schlägt den nächsten passenden Farbton vor.
.hint { color: #999; background: #fff; }
/* etwa 2,8:1 */.hint { color: #595959; background: #fff; }
/* etwa 7:1 */Information nie nur über Farbe
Rund um Farbe gibt es ein eigenes Kriterium: 1.4.1 Benutzung von Farbe. Wer Rot und Grün schlecht unterscheiden kann, erkennt einen roten Fehlerrahmen oder einen grünen Statuspunkt nicht. Ergänzen Sie Farbe immer durch Text, ein Symbol oder ein Muster.
- Links im Fließtext: unterstrichen, nicht nur andersfarbig.
- Pflichtfelder und Fehler: mit Text („Pflichtfeld“, „Bitte prüfen Sie …“).
- Diagramme: Beschriftung direkt an den Linien oder unterschiedliche Muster.
- Status: „Bezahlt“ neben dem grünen Punkt.
Bedienelemente und Grafiken: 3:1
1.4.11 Nicht-Text-Kontrast gilt für alles, was man zum Erkennen eines Bedienelements oder einer Grafik braucht: Rahmen von Eingabefeldern, das Häkchen einer Checkbox, Icons ohne Text, Linien in Diagrammen. Sie brauchen mindestens 3:1 gegenüber den angrenzenden Farben. Ein hellgrauer Feldrahmen auf Weiß fällt hier oft durch. Ist ein Feld nur durch eine Fläche erkennbar, muss diese Fläche den Kontrast zum Umfeld erreichen.
Der Fokus muss sichtbar bleiben
Wer mit der Tastatur arbeitet, muss jederzeit sehen, wo er ist (2.4.7 Fokus sichtbar). Die häufigste Ursache für Fehler ist eine einzige CSS-Zeile: outline: none. Entfernen Sie den Standard-Fokus nur, wenn Sie einen besseren gestalten.
WCAG 2.2 ergänzt 2.4.11 Fokus nicht verdeckt (Minimum): Das fokussierte Element darf nicht vollständig von eigenen Inhalten verdeckt sein, etwa von einem klebenden Kopfbereich oder einem Cookie-Banner. Mit scroll-padding-top sorgen Sie dafür, dass beim Springen nichts unter dem Header verschwindet.
Bewährt hat sich ein deutlicher Rahmen von 2 bis 3 px mit gutem Kontrast zum Hintergrund, über :focus-visible, damit er bei Mausklicks nicht stört. Selbst ausprobieren können Sie das im Tastatur-Test.
*:focus { outline: none; }:focus-visible {
outline: 3px solid #16181d;
outline-offset: 3px;
}
html { scroll-padding-top: 6rem; }Der Rahmen erscheint bei Tastaturbedienung, und Sprungziele bleiben unter einem festen Header sichtbar.
Kontrast im Design-System verankern
- Legen Sie Farbpaare fest, nicht Einzelfarben: „Text auf Hintergrund“, „Link auf Fläche“. Notieren Sie das Verhältnis gleich daneben.
- Prüfen Sie alle Zustände: Hover, Fokus, deaktiviert, Fehler, ausgewählt.
- Text auf Fotos: eine ausreichend dunkle Fläche hinter den Text legen, statt auf das Motiv zu hoffen.
- Dunkelmodus: alle Paare erneut prüfen; Werte übertragen sich nicht von selbst.
- Transparenz und Verläufe: an der ungünstigsten Stelle messen.
Checkliste zum Abhaken
0 von 7 erledigt
Ihre Häkchen bleiben nur in diesem Browser-Tab und werden nirgends gespeichert.
Passende WCAG-Kriterien
- 1.4.1 Benutzung von Farbe
- 1.4.3 Kontrast (Minimum)
- 1.4.11 Nicht-Text-Kontrast
- 2.4.7 Fokus sichtbar
- 2.4.11 Fokus nicht verdeckt (Minimum)
- 1.4.5 Bilder eines Textes
Werkzeuge und Muster dazu
Häufige Fragen
Zählt der Kontrast des Logos?
Nein. Text in Logos und Markennamen ist von 1.4.3 ausgenommen. Ist das Logo aber ein Link, braucht es trotzdem einen Alternativtext.
Muss deaktivierter Text den Kontrast erreichen?
Text auf inaktiven Bedienelementen ist ausgenommen. Achten Sie trotzdem darauf, dass erkennbar bleibt, warum ein Element nicht bedienbar ist.
Reicht es, wenn der Fokus die Farbe leicht ändert?
Häufig nicht. Ein feiner Farbwechsel ist schwer zu erkennen. Ein deutlicher Rahmen mit gutem Kontrast ist die sichere Lösung.
Quellen
Wie steht Ihre Website da?
Der kostenlose Check prüft Ihre Startseite in zwei Minuten. Das Audit entscheidet alle 55 Kriterien, durch einen Menschen.