WCAG-Kontrast-Checker — AA/AAA-Verhältnis

Wählen Sie Text- und Hintergrundfarbe, um das WCAG-Kontrastverhältnis sowie AA/AAA für normalen und großen Text zu sehen. Schritte: Farbe wählen oder HEX eingeben, Prüfen klicken, Verhältnis und Badges lesen, tauschen oder Vorschläge testen. Beispiel: #767676 auf #ffffff ≈ 4,54:1 — AA normaler Text bestanden, AAA normaler Text nicht bestanden. Farben werden nicht hochgeladen.

Vordergrund

Hintergrund

Live-Vorschau

Beispiel großer Text

Beispiel normaler Text

Kontrastverhältnis

—

Vorschläge

So funktioniert es

Legen Sie Text und Hintergrund per Farbwähler oder HEX fest. Die Seite wandelt sRGB in relative Luminanz um, berechnet das Kontrastverhältnis und zeigt Bestanden/Nicht bestanden für AA und AAA (normaler und großer Text). Tauschen, Zusammenfassung kopieren oder Vorschlag anwenden, wenn der Kontrast zu niedrig ist.

Erwartete Regeln

WCAG-Kontrast basiert auf relativer Luminanz — nicht allein auf dem Farbton. Diese Regeln helfen, wenn das Verhältnis überrascht.

Relative Luminanz L stammt aus sRGB-Kanälen nach der WCAG-Linearisierungskurve. Verhältnis = (Lhell + 0,05) / (Ldunkel + 0,05).
Schwellen: AA normaler Text 4,5:1, AA großer Text 3:1, AAA normaler Text 7:1, AAA großer Text 4,5:1. Ein Verhältnis speist alle vier Badges.
Nur undurchsichtiges sRGB-HEX (#RGB oder #RRGGBB). Ungültiges HEX zeigt einen Fehler; gleicher Vorder- und Hintergrund ergibt 1:1 und scheitert auf allen Stufen.
Datenschutz: Farben werden lokal in diesem Tab verarbeitet — nichts geht an den Server.

Beispiel

Beispiel laden: Vordergrund #767676 auf Hintergrund #ffffff ergibt etwa 4,54:1. AA normaler Text bestanden (≥4,5:1), AA großer Text bestanden (≥3:1), AAA normaler Text nicht bestanden (≥7:1), AAA großer Text bestanden (≥4,5:1). Farben tauschen, um die Änderung des Verhältnisses zu sehen.

Gute Einsatzfälle

UI-Design: Fließtext und Labels auf Markenhintergrund vor Abgabe prüfen.
Buttons und Chips: Weiß auf Farbe oder umgekehrt für AA normal oder groß testen.
Dark Mode: helle/dunkle Flächen tauschen und prüfen, ob Sekundärtext 4,5:1 oder 3:1 für großen Text hält.

Frequently asked questions

Welche WCAG-Kontrastschwellen gelten?

AA normaler Text mindestens 4,5:1; AA großer Text (18 pt regular oder 14 pt fett) 3:1; AAA normaler Text 7:1; AAA großer Text 4,5:1. Diese Seite zeigt alle vier Badges auf einmal.

Was zählt als großer Text?

Großer Text ist leichter lesbar und erlaubt weniger Kontrast. WCAG definiert groß als ≥18 pt regular oder ≥14 pt fett. Die Vorschau zeigt eine große und eine normale Zeile zum Vergleich.

Verlassen meine Farben den Browser?

Nein. Die Berechnung läuft vollständig im Browser — Farbwerte werden nicht gesendet.

Wie nutze ich die Farbvorschläge?

Unter 4,5:1 kann das Tool einen helleren oder dunkleren Vorder- oder Hintergrund vorschlagen, der AA für normalen Text erreicht. Das sind Startpunkte durch Mischung mit Schwarz/Weiß, keine finalen Markenpaletten.

Zusammenhang mit Brand-Color-Tokens?

Nutzen Sie diese Seite für jedes Text/Hintergrund-Paar. Für eine vollständige Markenpalette mit semantischen Tokens öffnen Sie das Brand-Color-Token-Tool; Farben aus Fotos können Sie mit dem Farbextraktions-Tool zuerst abtasten.

Fragen oder Feedback

Unklar, kaputt oder etwas fehlt? Schreib unten eine Nachricht — wir lesen jede Notiz zu diesen Tools.