Contrast Checker: WCAG-Kontrastprüfung

Was ist der Contrast Checker?

Der Contrast Checker berechnet das luminanzbasierte Kontrastverhältnis zwischen einer Vordergrundfarbe und einer Hintergrundfarbe, um zu bestimmen, ob die Kombination den WCAG 2.1-Barrierefreiheitsstandards entspricht. Das Tool prüft alle vier Konformitätsschwellen: AA und AAA für normalen Text sowie AA und AAA für großen Text. Eine Live-Textvorschau zeigt genau, was Lesende sehen werden. Barrierefreiheitsprüfer, UI-Designer und Frontend-Entwickler nutzen es vor der Veröffentlichung jeder neuen Farbkombination, um Kontrastfehler in der Produktion zu vermeiden. Alles läuft im Browser — kein Serveraufruf, kein Login.

Hauptfunktionen

• WCAG 2.1 Kontrastverhältnisberechnung — Verwendet die Standard-Relativluminanzformel (mit dem Linearisierungsschwellenwert 0,03928 und der Formel (L1 + 0,05) / (L2 + 0,05)) für Ergebnisse, die mit offiziellen WCAG-Tools übereinstimmen.
• AA- und AAA-Konformitätsprüfung — Vier Konformitätsbadges aktualisieren sich in Echtzeit: Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Groß AA (≥ 3:1) und Groß AAA (≥ 4,5:1). Grünes Badge mit Häkchen bedeutet bestanden; rotes Badge mit X bedeutet nicht bestanden.
• Schwellenwerte für normalen und großen Text — Das Tool wendet separate Schwellenwerte für normalen und großen Text an (definiert als 18pt oder 14pt fett), entsprechend WCAG 2.1 Erfolgskriterium 1.4.3.
• Echtzeit-Vorschau mit Beispieltext — Die Vorschaukarte zeigt eine Überschrift, einen Absatz, Kleintext und einen Button in Ihren gewählten Farben, damit Sie die Lesbarkeit auf einen Blick beurteilen können.
• Kontrastverhältnis in die Zwischenablage kopieren — Klicken Sie auf das Kopiersymbol neben der Verhältnisanzeige, um z. B. 4,53:1 in die Zwischenablage zu schreiben und die Prüfung im Verlauf zu protokollieren.
• Funktioniert offline nach dem Laden — Alle Verhältnisberechnungen sind in JavaScript implementiert, ohne externe API-Aufrufe.

Verwendung des Contrast Checkers

Schritt 1: Vordergrundfarbe festlegen

Öffnen Sie den Contrast Checker. Das Tool öffnet sich mit Schwarz (#000000) als Vordergrund und Weiß (#FFFFFF) als Hintergrund — ein Verhältnis von 21:1, das alle vier WCAG-Stufen besteht.

Legen Sie die Vordergrundfarbe (Textfarbe) fest, indem Sie entweder:

• Auf das Farbfeld (farbiges Quadrat) klicken, um den nativen Browser-Farbwähler zu öffnen
• Einen Hex-Code direkt in das Texteingabefeld neben dem Farbfeld eingeben (z. B. #1E293B)

Sowohl das Farbfeld als auch das Texteingabefeld bleiben synchronisiert. Das Vorschaufarbfeld unterhalb der Eingaben zeigt die Farbe mit automatisch kontrastierendem Beschriftungstext.

Schritt 2: Hintergrundfarbe festlegen

Verwenden Sie dieselben Steuerelemente auf der rechten Seite der Farbeingabekarte, um die Hintergrundfarbe festzulegen. Das Tool verwendet ein dreispaltiges Layout: Vordergrund links, ein Tauschen-Button in der Mitte und Hintergrund rechts.

Schritt 3: Kontrastverhältnis und Konformitätsbadges ablesen

Die Kontrastverhältnis-Karte erscheint unterhalb der Eingaben und zeigt:

• Das berechnete Verhältnis in großer Pixel-Art-Schrift (z. B. 7,23:1)
• Ein Kopiersymbol zum Kopieren der Verhältniszeichenfolge
• Vier Konformitätsbadges: Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Groß AA (≥ 3:1), Groß AAA (≥ 4,5:1)

Ein grünes Badge mit einem Häkchensymbol bedeutet, dass die Kombination diese Stufe besteht. Ein rotes Badge mit einem X bedeutet ein Nichtbestehen. Streben Sie mindestens Normal AA für den gesamten Fließtext an.

Schritt 4: Live-Vorschau prüfen

Scrollen Sie zur Vorschau-Karte. Diese zeigt vier Elemente in Ihren gewählten Farben:

• Eine große Überschrift (text-2xl)
• Fließtext (text-base)
• Kleintext (text-sm)
• Einen Button mit getauschten Farben (Vordergrund wird Hintergrund und umgekehrt)

Diese Vorschau ermöglicht es Ihnen, die Lesbarkeit der Farben zu beurteilen, bevor Sie Code schreiben.

Schritt 5: Farben tauschen oder barrierefreie Palettenvorgaben ausprobieren

Klicken Sie auf den Tauschen-Button (Doppelpfeilsymbol) zwischen den beiden Farbeingaben, um Vordergrund und Hintergrund sofort zu vertauschen. Dies ist nützlich zum Testen von Hell-auf-Dunkel- und Dunkel-auf-Hell-Varianten.

Scrollen Sie zum Panel Barrierefreie Farbpaare am unteren Ende der Seite. Es zeigt 20 Farbkombinationen mit ihren berechneten Kontrastverhältnissen. Klicken Sie auf ein beliebiges Paar, um diese beiden Farben in das Tool zu laden. Die meisten Paare bestehen AA (4,5:1), was durch ein Häkchen angezeigt wird. Einige Paare bestehen nur Groß AA (3:1) und sind mit einem X markiert — diese eignen sich für Überschriften und große UI-Elemente, aber nicht für normalen Fließtext.

Praktische Beispiele

Schaltflächenbeschriftung gegen Hintergrund prüfen

Ihr Design verwendet weißen #FFFFFF Text auf einem blauen #3B82F6 Button. Geben Sie #FFFFFF als Vordergrund und #3B82F6 als Hintergrund ein. Das Tool berechnet ungefähr 3,7:1. Das Normal-AA-Badge schlägt fehl (erfordert 4,5:1), aber Groß AA besteht. Das Blau muss abgedunkelt werden — probieren Sie #1D4ED8, was etwa 6,7:1 ergibt und Normal AA besteht.

Dunkelmodus-Textfarbe validieren

Ihr Dunkelmodus-Design verwendet #94A3B8 (slate-400) Text auf #0F172A (slate-900) Hintergrund. Geben Sie diese Werte ein. Das Verhältnis beträgt etwa 6,96:1 und besteht Normal AA, Groß AA und Groß AAA. Es verfehlt Normal AAA (erfordert 7:1) knapp. Sie können diese Kombination für Fließtext auf AA-Stufe verwenden.

Markenfarbe als Textfarbe testen

Ihre Markenorange ist #F97316. Sie möchten sie als Linkfarbe auf weißem #FFFFFF Hintergrund verwenden. Das Verhältnis beträgt etwa 2,8:1 — Normal AA wird nicht bestanden. Die Vorschau bestätigt, dass der Text für manche Nutzer lesbar aussieht, aber eine Barrierefreiheitsprüfung nicht bestehen würde. Wechseln Sie zu einem dunkleren Farbton wie #C2410C (≈ 5,2:1), um AA zu bestehen.

Tipps und Best Practices

Testen Sie sowohl Vordergrund-auf-Hintergrund als auch Hintergrund-auf-Vordergrund. Mit dem Tauschen-Button können Sie die Rollen mit einem Klick umkehren. Einige UI-Muster (Buttons, hervorgehobene Auswahlen) verwenden die Vordergrundfarbe als kleinflächigen Hintergrund.

Das Panel „Barrierefreie Farbpaare" zeigt Verhältnisse mit einer Dezimalstelle. Diese real berechneten Verhältnisse werden auf jeder Voreinstellungskarte angezeigt. Klicken Sie auf ein Farbfeld, um beide Farben zu laden — nutzen Sie es als Ausgangspunkt, wenn Sie schnell eine funktionierende Palette benötigen.

Großtextschwellenwerte gelten ab 18pt (24px) oder 14pt fett (ca. 18,67px fett). Das Tool zeigt die Ergebnisse für Groß AA und Groß AAA, um Sie daran zu erinnern, dass Überschriften weniger strenge Anforderungen haben. Eine Kombination, die Normal AA nicht besteht, kann dennoch für ausschließlich große Überschriften gültig sein.

Ergebnisse per URL teilen. Die aktuellen Vordergrund- und Hintergrundfarben werden in der Seiten-URL kodiert. Kopieren Sie die Adressleisten-URL nach der Farbeingabe, um eine spezifische Kontrastprüfung an einen Kollegen zu senden oder in einem Design-Review-Dokument zu hinterlegen.

Häufige Farbpaare als Voreinstellungen speichern. Supporter-Konten können sowohl die Vordergrund- als auch die Hintergrund-Hex-Werte als benannte Voreinstellung speichern. Dies ist für Teams nützlich, die dieselben Markenfarbkombinationen wiederholt prüfen.

Häufige Probleme und Fehlerbehebung

Das Verhältnis zeigt 1:1 unabhängig von der Eingabe. Dies bedeutet in der Regel, dass beide Farbfelder denselben Wert haben. Stellen Sie sicher, dass Sie unterschiedliche Farben in Vordergrund und Hintergrund eingegeben haben. Falls Sie denselben Hex-Wert in beide Felder eingefügt haben, muss einer geändert werden.

Das Konformitätsbadge zeigt „nicht bestanden", aber ich dachte, meine Farben seien in Ordnung. Die WCAG-Formel ist strenger als sie visuell erscheinen kann. Eine Schwarz-auf-Dunkelgrau-Kombination wie #333333 Text auf #555555 Hintergrund ergibt nur etwa 1,7:1, weit unter AA. Verwenden Sie das Ergebnis des Tools anstatt auf visuelle Beurteilung zu vertrauen.

Die Verlaufswiederherstellung lädt meine Farben nicht neu. Die Verlaufswiederherstellung analysiert Einträge im Format FG: #XXXXXX / BG: #XXXXXX. Einträge, die außerhalb dieses Tools aufgezeichnet wurden (oder mit beschädigten Daten), werden möglicherweise nicht korrekt analysiert. Geben Sie die Farben in solchen Fällen manuell erneut ein.

Der „Verhältnis kopieren"-Button zeigt keine Reaktion. Die Clipboard-API erfordert HTTPS oder localhost. Bei einfachem HTTP schlägt das Schreiben in die Zwischenablage fehl. Das Tool zeigt in diesem Fall einen Fehler-Toast. Klicken Sie mit der rechten Maustaste auf den Verhältnistext und verwenden Sie die native Kopierfunktion des Browsers als Fallback.

Die Vorschaykarte zeigt unerwartete Textfarben. Die Vorschau rendert Überschriften und Fließtext in Ihrer Vordergrundfarbe auf Ihrem Hintergrund. Der Button in der Vorschau tauscht die beiden Farben absichtlich, um die inverse Kombination zu demonstrieren.

Datenschutz und Sicherheit

Der Contrast Checker führt alle Berechnungen lokal in Ihrem Browser durch. Die Relativluminanzformel und die Kontrastverhältnisberechnung laufen in JavaScript auf Ihrem Gerät. Es werden keine Farbwerte an einen Server gesendet. Das Tool erfordert kein Konto, setzt keine Tracking-Cookies und protokolliert nicht, welche Farbkombinationen Sie testen. Es funktioniert vollständig offline, nachdem die Seite geladen wurde, sodass es sicher für die Bewertung von Farben in vertraulichen Designsystemen oder unveröffentlichten Markenrichtlinien geeignet ist.

Häufig gestellte Fragen

Ist der Contrast Checker kostenlos?

Ja. Die vollständige WCAG-Kontrastprüfungsfunktionalität — einschließlich der vier Konformitätsbadges, der Echtzeit-Vorschau, des Tauschen-Buttons und des Panels mit barrierefreien Farbpaaren — ist vollständig kostenlos und erfordert kein Konto. Supporter-Funktionen wie Voreinstellungen, Verlaufsverfolgung und Tool-Notizen sind mit einem Ko-fi-Supporter-Abonnement verfügbar.

Funktioniert der Contrast Checker offline?

Ja. Sobald die Seite geladen ist, funktionieren alle Kontrastberechnungen, die Vorschau-Darstellung und die Aktualisierungen der Konformitätsbadges ohne Netzwerkzugang. Die Relativluminanzformeln und WCAG-Schwellenwertvergleiche sind reines JavaScript in Ihrem Browser.

Sind meine Daten beim Contrast Checker sicher?

Ja. Es werden keine Farbdaten an einen Server übertragen. Das Tool stellt während einer Kontrastprüfung keine Netzwerkanfragen. Ihre Vordergrund- und Hintergrundfarben befinden sich nur im Arbeitsspeicher des Browsers und, wenn Sie die Freigabefunktion nutzen, in der URL, die Sie kopieren.

Welche WCAG-Version verwendet dieses Tool?

Das Tool implementiert WCAG 2.1 Erfolgskriterium 1.4.3 (Kontrast – Minimum) und 1.4.6 (Kontrast – Erweitert). Die AA-Stufe erfordert ein Verhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Die AAA-Stufe erfordert 7:1 für normalen Text und 4,5:1 für großen Text. Diese Schwellenwerte stimmen mit den Werten in den Konformitätsbadges überein (Normal AA ≥ 4,5:1, Normal AAA ≥ 7:1, Groß AA ≥ 3:1, Groß AAA ≥ 4,5:1).

Was gilt als „großer Text" nach WCAG?

WCAG definiert großen Text als Text mit mindestens 18 Punkt (ca. 24px) in normaler Schriftstärke oder mindestens 14 Punkt (ca. 18,67px) in fett. Das Tool beschriftet das dritte und vierte Konformitätsbadge als „Groß AA" und „Groß AAA". Die Vorschau rendert eine Überschrift in text-2xl, was typischerweise in den Großtextbereich fällt.

Wie wird das Kontrastverhältnis berechnet?

Das Tool konvertiert jede Hex-Farbe in relative Luminanz mithilfe der WCAG-Formel: Jeder RGB-Kanal wird linearisiert (durch 255 geteilt, dann mit der sRGB-Gammakorrektur: s / 12,92 wenn s <= 0,03928, sonst ((s + 0,055) / 1,055) ^ 2,4). Die Luminanz berechnet sich dann als 0,2126 R + 0,7152 G + 0,0722 * B. Das Kontrastverhältnis ist (L_heller + 0,05) / (L_dunkler + 0,05).

Kann ich andere Farben als Hex-Codes testen?

Die Farbeingaben akzeptieren Hex-Codes als Text (mit oder ohne #). Sie können auch den nativen Farbwähler verwenden. Wenn Sie einen RGB- oder HSL-Wert haben, verwenden Sie den Color Picker, um ihn zuerst in Hex umzuwandeln, und fügen ihn dann hier ein.

Was ist das höchstmögliche Kontrastverhältnis?

Das maximale Kontrastverhältnis beträgt 21:1, was dem Verhältnis zwischen reinem Schwarz (#000000) und reinem Weiß (#FFFFFF) entspricht. Das Tool öffnet sich standardmäßig mit diesen beiden Farben, um das maximal erreichbare Verhältnis zu demonstrieren.

Kann ich es auch für andere UI-Elemente als Text verwenden?

WCAG 2.1 umfasst auch Nicht-Text-Kontrast in Erfolgskriterium 1.4.11, das ein Verhältnis von 3:1 für UI-Komponenten und grafische Objekte erfordert. Das Groß-AA-Badge des Tools (≥ 3:1) entspricht diesem Schwellenwert und kann zur Bewertung von Symbolfarben, Fokusindikatoren und Formularsteuerungsrahmen verwendet werden, auch wenn die Vorschau Text rendert.

Wie teile ich eine Kontrastprüfung mit meinem Team?

Nachdem Sie Ihre Vordergrund- und Hintergrundfarben eingegeben haben, kodiert die Seiten-URL beide Werte. Kopieren Sie die Adressleisten-URL und teilen Sie sie direkt. Empfänger, die den Link öffnen, sehen dieselben Farben vorgeladen mit der Benachrichtigung „Aus Freigabe geladen". Sie können auch die Share-Buttons am unteren Ende der Seite verwenden, um auf Twitter, LinkedIn oder Reddit zu teilen.

Verwandte Tools

• Color Picker — Genaue Hex-Werte vom Bildschirm oder aus vorhandenen Designs entnehmen, bevor Sie sie hier testen.
• Color Converter — Farben von RGB, HSL oder CMYK in Hex konvertieren, bevor Sie sie im Kontrastprüfer eingeben.
• Demnächst verfügbar: Palette Generator — Eine vollständige Palette erstellen und dann jede Kombination im Contrast Checker auf Barrierefreiheitskonformität prüfen.

Jetzt Contrast Checker testen: Glyph Widgets Contrast Checker