Entwickler-Tool

Farbkontrast-Prüfer

Prüfen Sie anhand des Barrierefreiheitsstandards, ob Text tatsächlich lesbar sein wird.

Farbkontrast-Prüfer Läuft auf Ihrem Gerät

Läuft in Ihrem Browser — Ihr Text wird nirgendwohin gesendet
Ohne Anmeldung, ohne Kontingent, so oft nutzbar, wie Sie möchten

So funktioniert es

Hellgrauer Text auf Weiß ist der häufigste Barrierefreiheitsmangel im Web, und er ist völlig vermeidbar. Die Richtlinien zur Barrierefreiheit definieren Kontrast als präzises Verhältnis, sodass es eine Frage der Rechnung und nicht der Meinung ist, ob eine Farbkombination besteht.

Wie das Verhältnis berechnet wird

Die relative Luminanz jeder Farbe wird so berechnet, wie es die Richtlinien vorgeben – mit Gammakorrektur pro Kanal –, und das Verhältnis wird zwischen der helleren und der dunkleren Farbe gebildet. Das Ergebnis stimmt mit dem überein, was ein Barrierefreiheits-Audit ausweist, denn es ist dieselbe Formel.

Die Schwellenwerte

Normaler Text braucht 4,5:1 für AA und 7:1 für AAA. Großer Text – grob 24px oder bei Fettdruck 18,7px – braucht nur 3:1 für AA und 4,5:1 für AAA. Bedienelemente und aussagekräftige Grafiken brauchen 3:1. AA verlangen die meisten Organisationen und die meisten Gesetze.

Warum bei großem Text weniger erlaubt ist

Größere Buchstaben haben mehr Pixel pro Strich und bleiben deshalb auch bei geringerem Kontrast lesbar. Deshalb darf eine Überschrift ein helleres Grau verwenden als Fließtext.

Was das Verhältnis nicht erfasst

Es sagt nichts über Farbfehlsichtigkeit aus, die eine eigene Prüfung ist, und nichts darüber, ob der Text groß genug oder die Schrift gut lesbar ist. Ein bestandenes Verhältnis ist die Untergrenze, kein Beweis für ein lesbares Design.

FAQ