Der Farbkontrast beschreibt den Helligkeitsunterschied zwischen Text und seinem Hintergrund. Ausgedrückt wird er als Kontrastverhältnis auf einer Skala von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Je höher der Wert, desto besser die Lesbarkeit. Das WCAG-Erfolgskriterium 1.4.3 (Kontrast Minimum, Stufe AA) legt die Mindestwerte fest. Wichtig: Es geht um Helligkeit, nicht um Farbton – deshalb fällt es schwer, allein mit dem Auge zu urteilen.
Die Grenzwerte
- Normaler Text: mindestens 4,5:1.
- Großer Text (ab 18 pt bzw. 14 pt fett, etwa 24 px bzw. 18,5 px): mindestens 3:1.
- Logos und inaktive Elemente sind ausgenommen.
Für grafische Bedienelemente und Zustände gilt zusätzlich SC 1.4.11 (Nicht-Text-Kontrast) mit 3:1. Wer Stufe AAA anstrebt, braucht laut SC 1.4.6 sogar 7:1 für normalen Text.
Wie du es prüfst und umsetzt
Schätzen reicht nicht – nutze ein Mess-Tool. Du gibst Vorder- und Hintergrundfarbe ein und bekommst das exakte Verhältnis.
- Prüfe alle Textfarben, auch Formular-Labels, Platzhalter und Fehlertexte.
- Achte auf Text über Bildern oder Farbverläufen – dort schwankt der Kontrast.
- Hellgrauer Text auf Weiß ist der häufigste Verstoß; oft fehlen nur wenige Prozent.
In WordPress legen Theme-Farbpaletten den Kontrast vieler Elemente auf einen Schlag fest. Wähle die Palette von Anfang an kontraststark, dann ersparst du dir Korrekturen auf jeder Unterseite. Der Farbkontrast ist auch beim Fokus-Indikator wichtig und Teil der POUR-Prinzipien (wahrnehmbar). Passende Prüfwerkzeuge findest du unter Tools.