Farbkontrast prüfen nach WCAG 2.1
Der Farbkontrast-Prüfer ermittelt das Kontrastverhältnis zwischen Vordergrundfarbe und Hintergrundfarbe in Echtzeit. Die Farbwerte lassen sich per Hex-Code oder Farbwähler anpassen, um den Farbkontrast prüfen und nach den Vorgaben der WCAG 2.1 bewerten zu lassen. Alle Ergebnisse für die Stufen AA und AAA werden ohne Server-Upload direkt auf Ihrem Gerät berechnet.
Anleitung: Farbkontrast prüfen in drei Schritten
Das Prüfen von Farbkombinationen erfordert keine manuellen Formulareingaben. Die Berechnung startet automatisch beim Ändern der Werte.
- Geben Sie für die Vordergrundfarbe einen 3- oder 6-stelligen Hex-Code ein oder wählen Sie eine Farbe über das Farbfeld aus.
- Geben Sie auf dieselbe Weise die gewünschte Hintergrundfarbe ein.
- Lesen Sie das ermittelte Kontrastverhältnis, die Live-Textvorschau und alle vier Status-Badges für AA und AAA direkt ab.
WCAG-Kontrast-Rechner: Funktionen und Eingabe
Dieser WCAG-Kontrast-Rechner akzeptiert Hexadezimal-Codes im dreistelligen (#333) und sechsstelligen Format (#767676). Führende Raute-Zeichen oder ungültige Eingaben werden automatisch gefiltert, sodass kopierte Werte aus Design-Tools oder CSS-Dateien direkt funktionieren.
Ein Klick auf das jeweilige Farbfeld öffnet die native Farbpipette Ihres Geräts. Mit der Farbtausch-Funktion lässt sich die Zuordnung von Text- und Hintergrundfarbe sofort umkehren.
Kontrastverhältnis berechnen nach W3C-Standard
Das Werkzeug ermittelt das Kontrastverhältnis auf Basis der relativen Luminanz im sRGB-Farbraum nach der offiziellen W3C-Formel (L1 + 0,05) / (L2 + 0,05). Die Ergebnisskala reicht von 1:1 bei fehlendem Kontrast bis 21:1 bei maximalem Kontrast zwischen Schwarz und Weiß.
Sämtliche Berechnungen erfolgen lokal im Browser. Es werden weder Farbwerte noch Nutzungsdaten an externe Server übertragen.
Barrierefreiheit: Farben testen für BFSG und BITV 2.0
In Deutschland verlangt das Barrierefreiheitsstärkungsgesetz (BFSG) seit Juni 2025 die barrierefreie Gestaltung vieler digitaler Angebote und E-Commerce-Plattformen im privaten Sektor. Für Webauftritte und Anwendungen öffentlicher Stellen gilt die BITV 2.0.
Beide Regelwerke basieren auf der europäischen Norm DIN EN 301 549, welche die WCAG 2.1 Level AA als verbindlichen Mindeststandard festlegt. Das Bestehen des AA-Tests bestätigt die Erfüllung dieser rechtlichen Vorgaben.
Barrierefreiheit: Farbkontrast prüfen für AA und AAA
Die Richtlinien unterscheiden zwischen normalem Fließtext und großem Text. Für normalen Text verlangt WCAG 2.1 Level AA ein Kontrastverhältnis von mindestens 4,5:1. Für großen Text gilt der reduzierte Schwellenwert von 3,0:1.
Als großer Text definiert der Standard Schriftgrößen ab 18 pt (24 px) bei normaler Strichstärke oder ab 14 pt (18,66 px) bei fetter Schrift. Die strengere Stufe AAA fordert 7,0:1 für normalen Text sowie 4,5:1 für großen Text.
Häufig gestellte Fragen
Welcher Farbkontrast ist für WCAG AA mindestens erforderlich?
Für normalen Text erfordert WCAG 2.1 Level AA ein Kontrastverhältnis von mindestens 4,5:1. Für großen Text gilt ein Mindestwert von 3,0:1. Als groß gilt Text ab 18 pt (24 px) bei normaler Schriftstärke oder ab 14 pt (18,66 px) bei Fettschrift.
Wie lässt sich das Kontrastverhältnis berechnen?
Das Kontrastverhältnis wird anhand der relativen Luminanz beider Farben im sRGB-Farbraum ermittelt. Die Formel des W3C lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe repräsentiert. Das Online-Tool führt diese Berechnung automatisch im Browser aus.
Was ist der Mindestkontrast für normalen Text im Web?
Der Mindestkontrast für normalen Fließtext liegt nach WCAG 2.1 Level AA bei 4,5:1. Für die höhere Stufe AAA ist ein Verhältnis von mindestens 7,0:1 erforderlich. Dieser Wert gilt für alle Standard-Schriftgrößen unterhalb der Schwelle für großen Text.
Ab welcher Schriftgröße gilt Text als großer Text nach WCAG?
Text gilt nach WCAG 2.1 als groß, wenn er eine Schriftgröße von mindestens 18 pt (24 px) aufweist. Bei fett gedrucktem Text reicht eine Schriftgröße ab 14 pt (18,66 px) aus. Für großen Text gelten abgesenkte Kontrastanforderungen.
Was unterscheidet die WCAG-Stufen AA und AAA beim Kontrast?
Level AA definiert den gesetzlich geforderten Standard für Barrierefreiheit, während Level AAA strengere Werte für optimierte Lesbarkeit ansetzt. Für normalen Text erfordert AA einen Wert von 4,5:1 und AAA einen Wert von 7,0:1. Bei großem Text fordert AA 3,0:1 und AAA 4,5:1.
Kann ich Farbkontraste direkt mit Hex-Codes aus Design-Tools testen?
Ja, 3- und 6-stellige Hex-Codes können direkt in die Felder für Vorder- und Hintergrundfarbe eingegeben oder eingefügt werden. Das Ergebnis und die Status-Badges aktualisieren sich sofort nach der Eingabe eines gültigen Codes. Alternativ lässt sich die Farbe über die integrierte Farbpipette auswählen.
Ist dieser Farbkontrast-Checker kostenlos und ohne Anmeldung nutzbar?
Ja, dieses Werkzeug ist vollständig kostenlos und erfordert kein Benutzerkonto. Sämtliche Auswertungen erfolgen lokal auf Ihrem Gerät im Browser. Es werden keine Daten an einen Server gesendet.
Welche Kontrastwerte verlangt das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland?
Das BFSG verweist über die Norm DIN EN 301 549 auf die WCAG 2.1 Level AA. Gefordert ist somit ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3,0:1 für großen Text. Wenn eine Farbkombination den AA-Test besteht, erfüllt sie die Vorgaben des BFSG.
