Kontrastprüfer
Prüfen Sie das WCAG-Kontrastverhältnis zweier Farben mit AA- und AAA-Bewertung für normalen und großen Text plus Live-Vorschau. Alles läuft lokal in Ihrem Browser.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Daten verlassen Ihr Gerät nie — sie werden auf keinen Server hochgeladen.
So verwenden Sie es
- 1Hex- oder rgb()-Wert eingeben oder die Farbauswahl für den Vordergrund nutzen.
- 2Dasselbe für die Hintergrundfarbe tun.
- 3Verhältnis und AA-/AAA-Bewertung lesen oder eine Voreinstellung antippen.
- 4Den Vorschaublock ansehen und das Paar mit eigenen Augen beurteilen.
Kontrastprüfer
Geben Sie Vordergrund- und Hintergrundfarbe ein — Hex wie #333 oder #1F2937, oder rgb()/rgba() — und lesen Sie das WCAG-Kontrastverhältnis mit zwei Dezimalstellen ab, inklusive sofortiger Bewertung aller vier Schwellen: AA und AAA für normalen und großen Text. Eine Live-Vorschau zeigt Fließtext und große Schrift in den echten Farben.
Gerechnet wird mit der offiziellen Formel für relative Leuchtdichte aus WCAG 2.x — dieselbe wie im W3C-Prüfer: Ein 4.5 hier ist überall 4.5. Zu den Voreinstellungen gehört ein graues Paar mit 4.54:1, das zeigt, wie knapp die AA-Grenze liegt.
Häufige Fragen
Welches Kontrastverhältnis brauche ich zum Bestehen?
Nach WCAG 2.x: normaler Text braucht 4.5:1 für AA und 7:1 für AAA. Großer Text — mindestens 24 px oder 18.7 px fett — braucht 3:1 für AA und 4.5:1 für AAA. UI-Komponenten und Grafiken brauchen 3:1.
Wie wird das Verhältnis berechnet?
Jede Farbe wird aus sRGB linearisiert und zur relativen Leuchtdichte L = 0.2126·R + 0.7152·G + 0.0722·B kombiniert; das Verhältnis ist (helles L + 0.05) / (dunkles L + 0.05) — exakt die Formel der WCAG-2.x-Spezifikation. Ein rgba()-Alpha unter 1 wird vor der Rechnung auf Weiß gelegt.
Verwandte Tools
Farbkonverter
Eine Farbe in hex, rgb() oder hsl() einfügen und alle drei Formate plus eine fertige Reihe Tints und Shades für Ihr Designsystem erhalten.
Alle Tools →
Farbwähler
Eine Farbe aus dem Farbfeld wählen oder direkt vom Bildschirm greifen, mit der EyeDropper-API — hex, RGB und HSL in einem Klick kopiert.
Alle Tools →
Notenrechner
Notenrechner mit Gewichtung oder Punkten: Aufgaben eintragen, Durchschnitt und Note live sehen und genau herausfinden, was Sie in der Abschlussprüfung brauchen.
Alle Tools →
Dieses Tool einbetten
Binden Sie dieses Tool mit einer Zeile in Ihre Website ein — es läuft im Browser des Besuchers.
<iframe src="https://zoyku.com/de/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>