Werkzeug · kostenlos
Kontrast-Checker: Farbkontrast nach WCAG prüfen.
Textfarbe und Hintergrund eingeben, sofort das Kontrastverhältnis ablesen – bewertet nach WCAG 2.2 für Text, großen Text und Bedienelemente, mit Vorschlag, wenn es nicht reicht. Ihre Farben verlassen den Browser nicht.
Farben eingeben
#767676 · rgb(118, 118, 118) · hsl(0, 0%, 46%)
#FFFFFF · rgb(255, 255, 255) · hsl(0, 0%, 100%)
Beispiel: das hellste Grau mit 4,5:1 auf Weiß
Fließtext in 16 px: So liest sich ein Absatz in diesen beiden Farben.
Großer Text ab 18 pt
Großer Text ab 14 pt fett
Kontrastverhältnis
Kontrast 4,54:1
Erfüllt AA für Text jeder Größe, AAA nur für großen Text.
| Anforderung | AA | AAA |
|---|---|---|
| Normaler Text | erfülltab 4,5:1 | nicht erfülltab 7:1 |
| Großer Text | erfülltab 3:1 | erfülltab 4,5:1 |
| Grafik und Bedienelemente | erfülltab 3:1 | – keine Anforderung |
Nächstliegende Farbe für AAA (7:1 bei normalem Text)
- Textfarbe #595959 · 7:1
- Hintergrund: mit dieser Textfarbe nicht erreichbar
Gleicher Farbton, nur die Helligkeit geändert – so wenig wie möglich.
01So wird gerechnet
Helligkeit gegen Helligkeit, nicht Farbe gegen Farbe.
Für jede Farbe wird die relative Luminanz bestimmt: Die drei Kanäle Rot, Grün und Blau werden linearisiert und unterschiedlich gewichtet – Grün mit 0,7152, Rot mit 0,2126, Blau mit 0,0722 –, denn das Auge empfindet Grün am hellsten. Schwarz hat die Luminanz 0, Weiß 1.
Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), mit L1 der helleren Farbe. Es reicht von 1:1 (gleiche Farben) bis 21:1 (Schwarz auf Weiß). Die Reihenfolge der Farben spielt keine Rolle.
Verglichen wird ohne Runden: 4,499:1 erfüllt die Schwelle 4,5:1 nicht. Der Checker schneidet die Anzeige deshalb nach zwei Stellen ab, statt aufzurunden – #777777 auf Weiß zeigt 4,47:1 und verfehlt AA knapp.
02Die Schwellen
Was AA und AAA verlangen.
Drei Erfolgskriterien der WCAG 2.2 regeln Kontraste. In WCAG 2.1 gelten dieselben Werte.
| Kriterium | Stufe | Mindestkontrast |
|---|---|---|
| 1.4.3 Kontrast (Minimum) | AA | 4,5:1 für Text, 3:1 für großen Text |
| 1.4.6 Kontrast (erhöht) | AAA | 7:1 für Text, 4,5:1 für großen Text |
| 1.4.11 Kontrast von Nicht-Text-Inhalten | AA | 3:1 für Bedienelemente, ihre Zustände und Grafiken, die man zum Verstehen braucht |
Groß ist Text ab 18 Punkt oder ab 14 Punkt fett. Mit 1 pt = 1,333 px entspricht das etwa 24 px und 18,5 px. Ausgenommen sind Logos, reine Zierde und Text in inaktiven Bedienelementen.
03Kontrast und BFSG
Für das BFSG zählt Stufe AA.
Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 unter anderem für Online-Shops und Buchungsstrecken, die sich an Verbraucher richten. Es nennt keine Kontrastwerte selbst, sondern verweist auf harmonisierte Normen – derzeit die EN 301 549, die auf WCAG 2.1 Stufe AA verweist.
Für Ihre Farben heißt das: 4,5:1 für Fließtext, 3:1 für große Überschriften, Rahmen von Eingabefeldern, Fokusmarkierungen und Symbole. AAA ist darüber hinaus und vom Gesetz nicht verlangt. Keine Rechtsberatung.
04Grenzen
Was ein Farbpaar nicht zeigt.
- Transparente Farben: Der Kontrast hängt vom Grund darunter ab – geben Sie die sichtbare Mischfarbe ein.
- Verläufe und Bilder als Hintergrund: Prüfen Sie die hellste und die dunkelste Stelle hinter dem Text.
- Sehr dünne Schriften: Sie brauchen mehr Kontrast, als die Zahl sagt.
- Die übrigen Anforderungen einer Seite – dafür gibt es den Barrierefreiheits-Check.
05Fragen
Fragen zum Kontrast-Checker.
Welcher Farbkontrast ist nach WCAG nötig?
Für Stufe AA mindestens 4,5:1 bei normalem Text und 3:1 bei großem Text sowie bei Bedienelementen und wichtigen Grafiken. Stufe AAA verlangt 7:1 bei normalem und 4,5:1 bei großem Text.
Was gilt als großer Text?
Text ab 18 Punkt oder ab 14 Punkt fett – etwa 24 px und 18,5 px. Kleinere Schrift braucht den höheren Wert.
Warum zeigt der Checker 4,47:1, wo andere 4,48:1 schreiben?
Der Checker schneidet nach zwei Stellen ab, statt zu runden. So zeigt die Anzeige nie eine Schwelle als erreicht, die der genaue Wert verfehlt – das W3C verlangt, ungerundet zu vergleichen.
Wie kommt der Farbvorschlag zustande?
Der Checker behält Farbton und Sättigung und ändert nur die Helligkeit, so wenig wie möglich. Hell bleibt dabei hell und dunkel bleibt dunkel: Ist der Text dunkler als der Hintergrund, wird er dunkler. Reicht das nicht, steht daneben der Vorschlag für den Hintergrund.
Welche Eingaben versteht der Checker?
Hex-Werte wie #767676 oder #777, RGB wie rgb(118, 118, 118) und HSL wie hsl(0, 0%, 46%) – oder die Farbe aus dem Farbwähler. Transparente Farben nicht, weil ihr Kontrast vom Grund darunter abhängt.
Werden meine Farben gespeichert oder übertragen?
Nein. Die Rechnung läuft vollständig in Ihrem Browser; nichts wird gesendet oder gespeichert.
Live aus unseren Produkten
Was wir bauen, läuft gerade.
Ein echter Ausschnitt aus einem unserer eigenen Produkte, in dessen Gestaltung und mit aktuellen Daten.
Rechnerzentrale
Kontraste sind ein Punkt. Wir prüfen alle.
Schicken Sie uns die Adresse Ihrer Website. Wir sagen Ihnen, was ein vollständiges Audit nach WCAG 2.2 AA umfasst.