Farbkontrast-Prüfer (WCAG)

WCAG 2.1 AA erfordert 4.5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett). AAA erfordert 7:1 und 4.5:1. UI-Komponenten benötigen >= 3:1.

sRGB wird gamma-korrigiert in linear umgewandelt, dann relative Luminanz = 0.2126R + 0.7152G + 0.0722B. Verhältnis = (L1 + 0.05) / (L2 + 0.05), wobei L1 der hellere Wert ist.

Accessible Perceptual Contrast Algorithm (für WCAG 3) – berücksichtigt Textstärke, Polarität und Ortsfrequenz. Wird als Referenz angezeigt; die WCAG-2-Verhältnisse bleiben heute der maßgebliche Standard.

Ja, der Color Contrast Checker (WCAG) ist zu 100% kostenlos, ohne Registrierung, ohne versteckte Gebühren und ohne Nutzungslimits. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser und gewährleistet vollständige Privatsphäre.

Absolut. Der Color Contrast Checker (WCAG) verarbeitet alles clientseitig in Ihrem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Ihre Inhalte bleiben jederzeit privat auf Ihrem Gerät.

Ja, der Color Contrast Checker (WCAG) ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Sie können ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffnen Sie einfach den Color Contrast Checker (WCAG) in Ihrem Browser und legen Sie sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der Color Contrast Checker (WCAG) unterstützt eine breite Palette beliebter Formate und Sprachen. Die vollständige Liste der unterstützten Optionen finden Sie in der Tool-Oberfläche.

Geben Sie einfach Ihre Eingabe in das vorgesehene Feld ein, passen Sie die Einstellungen nach Belieben an, und das Tool verarbeitet sie sofort. Anschließend können Sie das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Der Color Contrast Checker (WCAG) funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwenden Sie die neueste Version Ihres bevorzugten Browsers.

Nach WCAG 2.1 gilt Text ab 18pt als groß, ebenso Text ab 14pt, wenn er fett ist. Da Design-Tools in Pixeln arbeiten, entspricht das etwa 24px normal oder rund 18,66px (häufig auf 18,5px oder 19px gerundet) fett. Großer Text benötigt nur ein Kontrastverhältnis von 3:1 für AA und 4,5:1 für AAA, während normaler Fließtext die strengeren Werte 4,5:1 und 7:1 erfüllen muss. Der Grund ist einfach: größere, kräftigere Buchstabenformen haben dickere Striche und bleiben deshalb auch bei geringerem Kontrast lesbar. Das ist wichtig, weil eine Überschriftenfarbe, die bei 24px besteht, bei 16px-Fließtext komplett durchfallen kann. Dieser Prüfer zeigt das Verhältnis gegen alle Schwellenwerte gleichzeitig an, sodass du sofort siehst, ob dein Farbpaar die Normaltext-Hürde nimmt oder nur als großer Text durchgeht.

Das hängt davon ab, welcher WCAG-Schwellenwert für die jeweilige Schriftgröße gilt. Eine Überschrift ab 24px (oder 18,66px fett) zählt als großer Text und braucht nur ein Verhältnis von 3:1, während Fließtext unterhalb dieser Größe als normaler Text gilt und 4,5:1 erreichen muss. Ein Vorder- und Hintergrund, die zum Beispiel ein Verhältnis von 3,5:1 ergeben, bekommen also bei der Überschrift ein Bestanden-Abzeichen, beim Absatz mit denselben Farben aber ein klares Nicht bestanden. Das Verhältnis selbst ändert sich mit der Schriftgröße nie, nur die Hürde, die es überwinden muss. Deshalb kann ein Farbschema im Hero-Bereich freigegeben wirken und in Bildunterschriften oder Labels trotzdem still durchfallen. Dieses Tool zeigt im Vorschau-Tab sowohl 16px- als auch 24px-Beispiele und listet jeden Schwellenwert auf, sodass du sofort erkennst, wo ein Paar standhält und wo es scheitert.

Meist musst du nur die Helligkeit einer einzigen Farbe anpassen statt die ganze Palette umzubauen. Am schnellsten geht es, den Text abzudunkeln oder den Hintergrund aufzuhellen (oder umgekehrt) — in kleinen Schritten, bis das Verhältnis 4,5:1 überschreitet, wobei der ursprüngliche Farbton erhalten bleibt und die Markenwirkung so nicht verloren geht. Dieser Prüfer bietet eigene Schaltflächen zum Abdunkeln und Aufhellen, die die Helligkeit einer Farbe schrittweise verschieben und dabei den Farbton beibehalten, während sich das Verhältnis live aktualisiert, sodass du genau dann stoppen kannst, wenn ein Bestanden erscheint. Eine Tauschen-Schaltfläche vertauscht Vorder- und Hintergrund, um die umgekehrte Kombination zu testen, die manchmal besteht, wenn das Original durchfällt. Wenn du lieber neu anfangen möchtest, erzeugt die Schaltfläche für ein zufälliges barrierefreies Paar eine Kombination, die bereits 4,5:1 erreicht — eine konforme Ausgangsbasis, von der aus du weiterarbeiten kannst.

Ja. Du kannst einen 3- oder 6-stelligen HEX-Wert eingeben, einzelne RGB-Kanäle im Bereich 0 bis 255 setzen, Farbton, Sättigung und Helligkeit über HSL anpassen oder den nativen Farbwähler nutzen — alle vier Darstellungen aktualisieren sich automatisch gemeinsam. Änderst du einen Wert, werden die anderen sofort neu berechnet, sodass sich eine Anpassung an einem einzelnen RGB-Kanal unmittelbar in den HEX- und HSL-Feldern sowie im live berechneten Kontrastverhältnis widerspiegelt. Das ist wichtig, weil Design-Vorgaben und Code in unterschiedlichen Formaten vorliegen: Ein Markenleitfaden listet vielleicht HEX-Werte, eine CSS-Datei nutzt rgb(), und ein Design-Tool bietet HSL-Regler. Die Synchronisation erspart manuelle Umrechnungen und Copy-Paste-Fehler. Sobald ein Paar funktioniert, liefert die Schaltfläche „Als CSS-Variablen kopieren“ einen fertigen :root-Block mit Vorder- und Hintergrund-Custom-Properties für dein Stylesheet.

Nein, für sie gilt ein eigener, niedrigerer Schwellenwert. Das Erfolgskriterium 1.4.11 der WCAG 2.1, Kontrast von Nicht-Text-Inhalten, verlangt für Benutzeroberflächen-Komponenten und bedeutungstragende Grafiken nur ein Kontrastverhältnis von 3:1 — dazu zählen Eingabefeld-Rahmen, Icons, Umschaltzustände und Fokus-Indikatoren, gemessen gegen ihre angrenzenden Farben. Das entspricht der Anforderung für großen Text, nicht den 4,5:1 für normalen Text. Die Idee dahinter: Eine Button-Umrandung oder ein Icon muss nicht so scharf abgesetzt sein wie ein Absatz Text, sollte aber trotzdem gut erkennbar bleiben. Ein häufiger Fehler ist ein blassgrauer Eingabefeld-Rahmen, der auf weißem Formularhintergrund verschwindet. Dieser Prüfer listet den Schwellenwert für UI-Komponenten und Grafiken neben den Textstufen auf und zeigt im Vorschau-Tab einen Button und eine Karte mit Rahmen, sodass du bestätigen kannst, dass interaktive Elemente sichtbar sind — nicht nur der Text.