Farbkontraste richtig einstellen

Kontrast ist eine der wenigen Barrierefreiheits-Anforderungen, die sich in eine Zahl fassen lassen – und gerade deshalb wird sie so oft knapp verfehlt. Zu hellgraue Texte, zarte Platzhalter, Buttons in Pastell: Das sieht in der Designvorlage edel aus, ist aber für viele schwer bis gar nicht lesbar. Betroffen sind nicht nur Menschen mit Seheinschränkung, sondern auch alle bei Sonnenlicht auf dem Handy oder mit zunehmendem Alter.

Die gute Nachricht: Weil es Zahlen sind, ist Kontrast eines der am leichtesten prüfbaren Kriterien. Man muss die Werte nur kennen – und ernst nehmen.

Die Mindestwerte (WCAG AA)

Das maßgebliche Kriterium ist 1.4.3 „Kontrast (Minimum)“ auf Stufe AA:

Der Kontrastwert ist ein Verhältnis zwischen 1:1 (kein Unterschied) und 21:1 (Schwarz auf Weiß). „Großer Text“ meint ab 18 pt bzw. 14 pt fett – ab dieser Größe genügt das geringere Verhältnis, weil dickere Buchstaben leichter lesbar sind. Auf Stufe AAA steigen die Werte auf 7:1 bzw. 4,5:1.

Wichtig ist die dritte Zeile, die gern vergessen wird: Auch Bedienelemente (Rahmen von Eingabefeldern, Icons, der Fokus-Indikator) brauchen 3:1 gegen ihre Umgebung. Ein hellgrauer Feldrahmen auf Weiß reißt das oft.

Farbe ist nie das einzige Signal

Kontrast ist die eine Hälfte, die Unabhängigkeit von Farbe die andere. Kriterium 1.4.1 verlangt, dass Farbe nie der alleinige Träger einer Information ist – denn wer farbenblind ist, sieht den Unterschied nicht.

• Ein Link im Fließtext braucht ein zweites Merkmal, klassischerweise die Unterstreichung – nicht nur eine andere Farbe.
• Ein Pflicht- oder Fehlerfeld braucht Text oder Symbol, nicht bloß rote Farbe – siehe Fehlermeldungen.
• Ein Diagramm braucht Beschriftungen oder Muster, nicht nur farbige Flächen.

Mein Test dafür ist simpel und mache ich gern früh: die Ansicht gedanklich (oder per Filter) in Graustufen denken. Verschwindet dann eine Information, fehlt das zweite Signal.

Tools – und ein Blick ins eigene CSS

Den Kontrast zweier Farben rechnet man nicht im Kopf. Ich nutze Kontrast-Prüfer (WebAIM Contrast Checker, die Browser-DevTools, Plugins im Design-Tool), die Verhältnis und Bestehen/Nichtbestehen direkt anzeigen.

Hilfreich finde ich, die geprüften Werte gleich im Code zu dokumentieren. Auf dieser Website stehen sie als Kommentar an den Design-Tokens – etwa der Fließtext mit rund 15:1 und das Primärblau mit etwa 6,3:1 auf Weiß. So sieht jeder im Team sofort, dass die Farben bewusst gewählt und geprüft sind, nicht nach Gefühl gesetzt.

Typische Kontrast-Fallen

• Platzhaltertext ist standardmäßig hellgrau und unterschreitet oft 4,5:1. Verlasse dich ohnehin nicht auf placeholder als Label.
• Text über Bildern schwankt mit dem Motiv – hier hilft ein abdunkelnder Verlauf oder eine Textbox.
• Disabled-Zustände sind absichtlich blass; das ist okay, solange die eigentliche Bedienung kontraststark bleibt.
• Markenfarben sind manchmal zu hell für Text – dann als großflächiges Element nutzen, nicht für kleine Schrift.

Häufige Fragen

Gilt der Kontrast auch für Logos und deaktivierte Buttons?

Nein. Reine Logos und inaktive (disabled) Bedienelemente sind von der Kontrastpflicht ausgenommen. Das ist aber kein Freibrief, sie absichtlich unleserlich zu machen.

Reicht es, „dunkelgrau statt schwarz“ zu nehmen?

Oft ja, solange der Wert stimmt. Vollschwarz auf Weiß kann sogar überstrahlen; ein sehr dunkles Grau mit z. B. 15:1 ist angenehm und weit über der Anforderung. Prüfen statt schätzen.

Was ist mit dunklem Modus?

Dieselben Regeln, nur andere Farbpaare. Heller Text auf dunklem Grund muss genauso 4,5:1 erreichen – und reines Weiß auf reinem Schwarz blendet leicht, weshalb ich beides etwas abmildere.

Fazit

Für Text gilt 4,5:1, für große Schrift und Bedienelemente 3:1 – und Farbe darf nie das einzige Signal sein. Beides ist mit einem Kontrast-Prüfer in Minuten kontrolliert und gehört für mich zur Grundausstattung jedes Designs. Es ist die Art von Detail, die kaum auffällt, wenn sie stimmt – und sofort ausschließt, wenn nicht.