Farbkontrast-Prüfer

WCAG-Farbkontrast im Browser prüfen

Dieser Farbkontrast-Prüfer misst das WCAG-Kontrastverhältnis zwischen einer Text- und einer Hintergrundfarbe und zeigt Ihnen sofort, ob das Paar die Stufen AA und AAA für normalen Text, großen Text und UI-Komponenten besteht. Geben Sie einen Hex-Wert ein, bearbeiten Sie die RGB- oder HSL-Felder, ziehen Sie den Helligkeitsregler oder nutzen Sie die Pipette, um eine beliebige Farbe vom Bildschirm aufzunehmen — Verhältnis, Ergebnismatrix und Live-Vorschau aktualisieren sich beim Tippen.

Es funktioniert wie die Werkzeuge, denen Designer bereits vertrauen — dieselbe WCAG-Formel wie WebAIM und Adobe Color — ergänzt durch eine Live-Lesbarkeitsvorschau, einen APCA-Score (WCAG 3) und eine automatische Korrektur für nicht bestandene Paare. Alles läuft lokal in JavaScript: Ihre Farben verlassen niemals Ihr Gerät und es ist kein Konto erforderlich.

WCAG AA und AAA Schwellenwerte erklärt

Das WCAG-Kontrastverhältnis reicht von 1:1 (zwei identische Farben) bis 21:1 (Schwarz auf Weiß). Stufe AA — der Standard, den die meisten Gesetze wie die ADA und Section 508 verlangen — erfordert 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA erhöht diese Werte auf 7:1 und 4,5:1. Großer Text ist definiert als mindestens 18pt (24px) oder 14pt (ca. 18,66px) in Fettschrift.

Die Ergebnismatrix schlüsselt jeden Schwellenwert separat auf, sodass Sie auf einen Blick sehen, dass ein Grauton wie #767676 auf Weiß AA für Fließtext mit 4,54:1 besteht, die 7:1 für AAA aber verfehlt. Wenn Ihr Team die gesetzliche Konformität (ADA, EN 301 549, Section 508) erfüllen muss, ist AA das Ziel. AAA lohnt sich bei leseintensiven Oberflächen, bei denen sehbehinderte Nutzer Priorität haben.

Barrierefreie Farbpaare vorschauen, korrigieren und einsetzen

Zahlen erzählen nur die halbe Geschichte, deshalb rendert die Live-Vorschau echte Überschriften, Fließtext, Kleingedrucktes sowie einen Beispielbutton und -chip in Ihren exakten Farben — sehen Sie die Lesbarkeit, statt nur das Verhältnis zu lesen. Wenn ein Paar nicht besteht, behält der 'Zum Bestehen bringen'-Vorschlag Farbton und Sättigung bei und justiert die Helligkeit zur nächstgelegenen Farbe, die die gewählte Stufe (AA, AA Großtext oder AAA) erfüllt, und wendet diese mit einem Klick an. Sie können Text oder Hintergrund anpassen, je nach Präferenz.

Das Paarweise Raster nimmt eine vollständige Palette an und zeigt auf einen Blick, welche Farbkombinationen bestehen — nützlich beim Aufbau eines Designsystems, in dem jede Vordergrund-Hintergrund-Kombination sicher sein muss. Statt Dutzende von Paaren einzeln zu testen, fügen Sie Ihre Palette einmal ein und sehen die vollständige Matrix sofort.

APCA: Ein Vorgeschmack auf den WCAG 3-Kontrast

Neben dem klassischen Verhältnis zeigt dieser Prüfer einen APCA Lc-Score — die wahrnehmungsbasierte Kontrastmetrik, die für WCAG 3 vorgeschlagen wird. APCA modelliert, wie das Auge hellen Text auf dunklem Hintergrund versus dunklen Text auf hellem Hintergrund tatsächlich liest, und berücksichtigt die Schriftstärke, sodass es Lesbarkeitsprobleme erkennt, die das WCAG-2-Verhältnis manchmal übersieht. Richtwerte: Lc 75+ für Fließtext, Lc 60+ für großen Text, Lc 45+ für große Überschriften.

WCAG 3 befindet sich noch im Entwurfsstadium und hat WCAG 2.2 nicht abgelöst, sodass Konformität heute die Einhaltung der Schwellenwerte 4,5:1 und 3:1 bedeutet. APCA neben den aktuellen Verhältnissen anzuzeigen erlaubt es, Ihre Palette zukunftssicher zu gestalten, ohne auf die Fertigstellung der Spezifikation zu warten.

Nicht-Text-Kontrast für Symbole und UI-Komponenten

Kontrast betrifft nicht nur Text. WCAG 2.1 SC 1.4.11 verlangt 3:1 Kontrast für die Grenzen interaktiver Komponenten — Eingabefelder, Fokusindikatoren, Umschaltzustände — und für bedeutungsvolle Symbole und Grafiken. Die Matrix enthält eine eigene Prüfung für UI und Grafiken bei 3:1, damit Sie bestätigen können, dass ein Button-Umriss oder Symbol sichtbar ist.

Dies ist ein Bereich, in dem viele Teams Prüfungen nicht bestehen, ohne es zu merken. Eine hellgraue Eingabefeldbegrenzung (#D1D1D1 auf Weiß ergibt 1,4:1) ist ein häufiger WCAG-2.1-Verstoß, auch wenn der gesamte Text der Seite besteht. Ihre UI-Komponenten hier zu prüfen dauert Sekunden und verhindert Überraschungen bei einer formalen Prüfung.

Vergleich mit WebAIM, Adobe Color und Chrome DevTools

WebAIMs Kontrastprüfer auf webaim.org ist das meistzitierte kostenlose Barrierefreiheitstool und verwendet dieselbe WCAG-2-Formel wie dieses. Es zeigt kein APCA, hat keine Live-Text-Vorschau, kann nicht-bestandene Paare nicht automatisch korrigieren und hat kein paarweises Palettenraster.

Adobe Colors Barrierefreiheits-Tools zeigen AA/AAA-Ergebnisse und enthalten einen Farbenblindheit-Simulator, erfordern aber ein kostenloses Adobe-Konto zum Speichern und können keine bestehende Farbe automatisch vorschlagen.

Chrome DevTools hat ein Kontrastverhältnis-Badge im Farbauswähler des Elemente-Panels, das für In-Browser-Prüfungen nützlich ist — aber nur innerhalb von DevTools.

Dieser Prüfer funktioniert ohne Anmeldung, zeigt sowohl WCAG-2-Verhältnisse als auch den APCA-Lc-Score, rendert eine Live-Vorschau in Ihren Farben und ermöglicht das Testen eines vollständigen Palettenrasters in einer Ansicht. Alle Berechnungen laufen lokal in JavaScript.