Farbkontrast-Karo
Prüfen Sie die Vorder-/ Hintergrund auf Konformität mit den WCAG 2.1 AA- und AAA-Barrierefreiheitsstandards.
Normaler Text
Großformatiger Text (18pt / 14pt fett)
The quick brown fox jumps over the lazy dog.
Kontrastverhältnis
17.40:1
Warum den PixConvert Contrast Checker verwenden?
WCAG-Konformitätsprüfung mit einem einzigen Tool – Farben auswählen, Ergebnisse sofort sehen.
WCAG 2.1-Konformität
Prüft alle relevanten WCAG 2.1-Erfolgskriterien: AA normal, AA large, AAA normal, AAA large und UI-Komponenten.
Live-Vorschau
Sehen Sie den Text in der tatsächlichen Hintergrund in den Größen Normal, Groß und UI-Komponente.
Farbauswahl
Nativer Browser-Farbwähler plus Hex-Eingabe für präzise Farbauswahl.
Exaktes Verhältnis
Zeigt das genaue Kontrastverhältnis auf 2 Dezimalstellen genau an (z. B. 4,53:1) zur Dokumentation.
Farben tauschen
Mit einem Klick können Sie Vorder- und Hintergrund tauschen und so beide Kombinationen sofort überprüfen.
100 % privat
Reine WCAG-Formel, berechnet in Ihrem Browser. Kein Server, kein Tracking.
Wann man den Farbkontrast prüfen sollte
Barrierefreiheit ist in vielen Ländern eine gesetzliche Voraussetzung. Informieren Sie sich frühzeitig.
Designprüfung
Prüfen Sie, ob die Farbauswahl in Figma-Designs den WCAG-Anforderungen entspricht, bevor Sie diese an die Entwicklungsabteilung übergeben.
- Primäre Schaltflächenfarben prüfen
- Text auf Markenhintergründen prüfen
- Lesbarkeit des Platzhaltertextes testen
Barrierefreiheitsprüfung
Prüfen Sie bestehende Benutzeroberflächen auf WCAG 2.1 AA-Konformität im Rahmen einer rechtlichen oder Qualitätsprüfung.
- Fehlerhafte Farbpaare identifizieren
- Dokumentenkontrastverhältnisse
- Priorisieren Sie die Korrekturen nach Schweregrad
Designsystem
Prüfen Sie vor der Veröffentlichung jedes einzelne Token Ihrer Farbpalette auf Barrierefreiheit.
- Farbtoken-Paare validieren
- Barrierefreie Designvarianten erstellen
- Dokumentkonforme Kombinationen
So prüfen Sie den Farbkontrast
Wählen Sie Ihre Textfarbe (Vordergrundfarbe) und Hintergrund mithilfe der Farbauswahlfelder oder der Hex-Eingabe.
Das Kontrastverhältnis und die WCAG-Prüfungsergebnisse werden sofort aktualisiert. Verwenden Sie „Swap“, um die umgekehrte Kombination zu überprüfen.
Prüfen Sie die Ergebnisse für die Konformitätsstufen AA und AAA – alle Berechnungen folgen der offiziellen WCAG 2.1-Formel und werden vollständig in Ihrem Browser ausgeführt.
Weitere Tools entdecken
Entdecken Sie weitere kostenlose Tools, die hervorragend mit diesem Tool harmonieren.
CSS-Gradientengenerator
Erstellen Sie benutzerdefinierte CSS-Verläufe visuell
Boxschattengenerator
CSS-Box-Shadows mit Live-Vorschau gestalten
Farbkonverter
Konvertieren Sie HEX-, RGB- und HSL-Farbcodes sofort
Farbpaletten-Extraktor
Dominante Farben aus beliebigen Bildern extrahieren
JSON-Formatter
JSON sofort formatieren, validieren und minimieren
Regex-Tester
Reguläre Ausdrücke live testen und debuggen
Häufig gestellte Fragen
Farbkontrast und Barrierefreiheit erklärt.
Welche Anforderungen stellt der WCAG an das Kontrastverhältnis?
WCAG 2.1 Stufe AA fordert ein Textverhältnis von 4,5:1 für normalen Text, 3:1 für großen Text (ab 18 pt bzw. ab 14 pt fett) und 3:1 für UI-Komponenten und grafische Objekte. Stufe AAA fordert ein Textverhältnis von 7:1 für normalen Text und 4,5:1 für großen Text.
Wie wird das Kontrastverhältnis berechnet?
Das Kontrastverhältnis berechnet sich wie folgt: (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren Farbe und L2 die relative Leuchtdichte der dunkleren Farbe ist. Die Leuchtdichte wird anhand der linearisierten sRGB-Werte mithilfe der WCAG-2.1-Formel berechnet.
Was gilt als „große Schrift“?
WCAG definiert große Schrift als 18 pt (24 px) oder größer, ODER 14 pt (ca. 18,67 px) oder größer, wenn sie fett gedruckt ist. Für große Schrift gelten weniger strenge Kontrastanforderungen (3:1 statt 4,5:1), da sie von Natur aus besser lesbar ist.
Muss ich die AAA-Mitgliedschaft abschließen?
WCAG-Level AA ist in den meisten Ländern die gesetzliche Standardanforderung (ADA in den USA, EN 301 549 in der EU). AAA ist das höhere Ziel – streben Sie mindestens AA an, für kritische Inhalte nach Möglichkeit AAA.
Funktioniert das auch für Bilder und Farbverläufe?
Dieses Tool prüft Volltonfarbenpaare. Bei Text über Bildern oder Farbverläufen muss die ungünstigste Hintergrund ermittelt werden (der hellste Punkt hinter dem Text bei dunklem Text, der dunkelste Punkt bei hellem Text). WCAG schreibt keinen erforderlichen Kontrast für Bildhintergründe vor – es handelt sich jedoch um eine empfohlene Vorgehensweise.