Kontrast, Farben, Schrift: Die Regeln mit Prüfer

Die kurze Antwort: Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zu seinem Hintergrund, große Schrift mindestens 3:1, und wer die höhere Stufe AAA anstrebt, rechnet mit 7:1 ^[1]. Das sind die Schwellen der Erfolgskriterien 1.4.3 Kontrast (Minimum) und 1.4.6 Kontrast (Erhöht) der WCAG 2.2 ^[1][5]. Dieser Artikel ist eine Orientierung, keine Rechtsberatung.

Als groß gilt Schrift ab 18 Punkt oder ab 14 Punkt fett. Weil 1 pt im CSS-Maßsystem 1,333 px entspricht, sind das etwa 24 px beziehungsweise 18,5 px ^[1]. Für viele Schriften entspricht das 1,5 em und 1,2 em des Fließtexts, aber das hängt von der Schrift ab und ist im Einzelfall zu prüfen ^[1]. Eine dritte Zahl kommt aus dem Erfolgskriterium 1.4.11 Nicht-Text-Kontrast: Bedienelemente und grafische Objekte, die zum Verständnis nötig sind, brauchen 3:1 gegenüber den angrenzenden Farben, etwa die Umrandung eines Eingabefelds, der Haken in einer Checkbox, das Icon eines Buttons oder der Fokusrahmen ^[2].

Das Verhältnis wird als (L1 + 0,05) / (L2 + 0,05) berechnet, wobei L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe ist; die Skala reicht von 1:1 bis 21:1 ^[1]. Der Farbton spielt dabei keine Rolle, nur die Helligkeit; deshalb kann ein kräftiges Orange auf Weiß durchfallen, während ein unscheinbares Dunkelgrau besteht ^[1]. Die Schwellen sind harte Grenzen: Das W3C schreibt, dass berechnete Werte nicht gerundet werden, 4,499:1 erfüllt die 4,5:1 nicht ^[1]. Hinter den Zahlen steht eine einfache Herleitung. 3:1 ist der Mindestkontrast aus den Normen für Bildschirmarbeit für Menschen mit normaler Sehkraft; eine Sehschärfe von 20/40, wie sie mit etwa 80 Jahren typisch ist, kostet ungefähr den Faktor 1,5, also 4,5:1; bei 20/80 sind es etwa 7:1 ^[1]. Mit dem Prüfer unten können Sie jedes Farbpaar Ihres Corporate Designs sofort gegen alle drei Werte halten.

Platzhalter, Hover und Fokus zählen. Das Kriterium gilt für jeden Text auf der Seite, ausdrücklich auch für Platzhaltertext in Formularfeldern und für Text, der erst beim Überfahren mit der Maus oder bei Tastaturfokus erscheint ^[1]. Das hellgraue „Ihre E-Mail-Adresse“ im leeren Feld ist der Klassiker, der durchfällt.

Inaktive Elemente sind ausgenommen. Ein ausgegrauter Absenden-Button, der erst nach dem Ausfüllen aktiv wird, muss keinen Kontrast erfüllen, weder für seinen Text noch für seine Umrandung ^[1][2]. Sobald er bedienbar ist, gilt die Regel wieder.

Logos ja, Markenfarben nein. Text, der Teil eines Logos oder Markennamens ist, hat keine Kontrastanforderung ^[1]. Alles andere schon: Das W3C stellt klar, dass Text, dem aus Gründen der Corporate Identity oder der Markenrichtlinien der Kontrast fehlt, nicht ausgenommen ist ^[1]. Wer sein Logo bewusst kontrastarm zeigt, obwohl die Markenrichtlinie eine kontrastreiche Variante erlaubt, verliert sogar die Logo-Ausnahme ^[1].

Text auf Bildern. Hintergrundbilder, die dem Text davor nicht genug Kontrast geben, sind als Fehlerfall F83 dokumentiert ^[1]. Ein Hero mit weißer Headline auf einem Foto besteht nur, wenn jede Stelle hinter jedem Buchstaben dunkel genug ist, in der Praxis also mit Verlauf oder Fläche dahinter. Dasselbe gilt für Bilder von Text, die 1.4.5 ohnehin vermeiden will ^[1].

Dünne Schriften wirken schwächer als gerechnet. Durch Kantenglättung stellt der Browser sehr dünne Schnitte heller dar, als die CSS-Farbe vorgibt; das W3C empfiehlt deshalb kräftigere Schnitte oder einen Sicherheitsabstand über der Schwelle ^[1]. Außerdem ist es ein Fehler (F24), nur die Textfarbe oder nur die Hintergrundfarbe zu setzen, weil dann die jeweils andere vom System kommt und nicht prüfbar ist ^[1].

Fokus und Zustände. Der Fokusrahmen braucht 3:1 zu den angrenzenden Farben (1.4.11) ^[2]; WCAG 2.2 ergänzt mit 2.4.13 auf Stufe AAA eine Mindestgröße von zwei CSS-Pixeln Umriss und 3:1 zwischen fokussiertem und unfokussiertem Zustand ^[4]. Auch ein X zum Schließen oder ein Pfeil zählt als grafisches Symbol und braucht 3:1 ^[1]. Und schließlich: Ein Dark Mode ist ein zweites Farbsystem mit eigenen Paaren, das getrennt durchgerechnet werden muss. Auf 83,9 % der Startseiten fanden sich im Februar 2026 im Schnitt 34 Stellen mit zu wenig Kontrast ^[3]; die Liste der anderen häufigsten Fehler zeigt, wie oft genau diese Details den Ausschlag geben.