Kontrast-Prüfer — WCAG-Farbkontrast
Prüfen Sie das Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach WCAG AA/AAA und sehen Sie das Ergebnis sofort.
Zwölf Boxkämpfer jagen Viktor quer über den Sylter Deich.
Zwölf Boxkämpfer jagen Viktor quer über den Sylter Deich.
Lokal berechnet
Sicher für unangekündigte Marken
Kein Konto
Sichere Verbindung
So funktioniert es
- 1
Textfarbe festlegen
Fügen Sie den HEX-Code des Vordergrunds ein oder wählen Sie ihn im Farbfeld.
- 2
Hintergrundfarbe festlegen
Ebenso für das, was hinter dem Text liegt — der tatsächliche Hintergrund, nicht standardmäßig Weiß.
- 3
Ergebnis ablesen
Verhältnis und Bestehen je WCAG-Stufe erscheinen gemeinsam, samt Live-Beispieltext.
Warum dieses Tool
Eine Zahl, keine Meinung
Kontrast ist ein messbares Verhältnis zwischen 1:1 und 21:1. Das Werkzeug rechnet es aus, damit „sieht für mich gut aus“ nicht länger das entscheidende Argument ist.
Alle Schwellen auf einmal
AA und AAA, für normalen und großen Text, gemeinsam bewertet — Sie sehen sofort, für welche Verwendung ein Paar sicher ist.
Live-Vorschau
Echter Text im geprüften Paar gerendert, sodass Zahl und Erscheinung nebeneinander geprüft werden.
Direkt hier korrigieren
Passen Sie eine der beiden Farben an, und das Verhältnis aktualisiert sich mit — so finden Sie den nächstgelegenen bestehenden Ton, statt zu raten.
Nichts wird hochgeladen
Die Berechnung ist Arithmetik in Ihrem Browser — kein Farbwert wird irgendwohin gesendet.
Kostenlos, ohne Konto
Keine Anmeldung, keine Begrenzung und nirgends ein Wasserzeichen.
Was das Kontrastverhältnis tatsächlich misst
Das Verhältnis vergleicht die relative Leuchtdichte zweier Farben — wie viel Licht jede reflektiert oder abstrahlt, gewichtet nach der Empfindlichkeit des menschlichen Sehens für Rot, Grün und Blau. Es reicht von 1:1, wo beide Farben identisch sind und Text unsichtbar bleibt, bis 21:1, also reines Schwarz auf reinem Weiß. Entscheidend ist: Es misst einen Helligkeitsunterschied, keinen Farbtonunterschied. Ein sattes Rot und ein sattes Grün ähnlicher Helligkeit liegen nahe bei 1:1 und sind zusammen kaum lesbar, obwohl sie jemandem mit typischem Farbsehen maximal verschieden erscheinen. Deshalb ist „diese beiden Farben kontrastieren stark“ ein unzuverlässiges Urteil, und deshalb gibt es die Formel.
Die Schwellen — und welche für Sie gilt
Die WCAG definiert zwei Konformitätsstufen. Stufe AA, die die meisten Organisationen und die meisten rechtlichen Vorgaben anstreben, verlangt 4,5:1 für normalen Fließtext und 3:1 für großen Text — groß heißt 18 Punkt oder 14 Punkt in Fett. Stufe AAA hebt das auf 7:1 und 4,5:1 und ist für den Fließtext einer Dokumentationsseite realistisch, für eine markengeführte Marketingseite meist nicht. Zwei Punkte führen regelmäßig in die Irre. Erstens ist die Nachsicht für großen Text so großzügig, dass eine Überschrift bestehen kann, während der Absatz darunter in derselben Farbe durchfällt. Zweitens haben Bedienelemente und bedeutungstragende Grafiken — ein Feldrahmen, ein informationstragendes Symbol — eine eigene Anforderung von 3:1, die eine reine Textprüfung vollständig übersieht.
Warum Markenfarben hier so oft scheitern
Markenpaletten werden nach ihrer Wirkung auf großen Flächen ausgewählt, nicht nach Lesbarkeit bei 16 Pixeln. Mitteltöne sind die üblichen Opfer: Ein Markenorange, Petrol oder Limette, das als Buttonfüllung selbstbewusst wirkt, landet gegen Weiß häufig zwischen 2:1 und 3:1 — und besteht damit nichts. Der Impuls ist, mit der Zahl zu streiten; die Zahl rührt sich nicht. Die produktive Antwort: Die Markenfarbe dort belassen, wo sie funktioniert — Flächen, Rahmen, große Displayschrift — und für den Fließtext eine dunklere Variante ableiten, indem Sie die Helligkeit in HSL senken, bis das Verhältnis passt. Der Farbkonverter macht daraus zwei Handgriffe. So bleibt die Farbtonidentität erhalten und der Text wird lesbar.
Grauer Text ist der häufigste Fehler im Web
Hellgrauer Fließtext auf Weiß wurde zur Gestaltungskonvention, weil er auf einem guten Monitor in einem hellen Raum ruhig und hochwertig wirkt. Gemessen ergibt `#999999` auf Weiß etwa 2,8:1 und fällt bei AA klar durch; `#767676` liegt bei rund 4,5:1 und ist das hellste Grau, das für normalen Text besteht. Der Unterschied zwischen diesen beiden Hex-Codes ist in einer Designabnahme unsichtbar und für jemanden entscheidend, der bei Tageslicht auf ein Telefon schaut oder etwas schlechter sieht. Baut ein Entwurf Hierarchie über graue Schrift auf, liegt die Lösung meist bei Größe und Schnitt statt bei der Helligkeit: Ein kleineres, leichteres Dunkelgrau liest sich als nachrangig, ohne unter die Schwelle zu fallen.
Was das Verhältnis nicht aussagt
4,5:1 zu erreichen ist eine Untergrenze, keine Zusicherung guter Typografie. Die Formel ignoriert die Schriftgröße jenseits der Großtext-Grenze, ignoriert die Strichstärke — eine haarfeine Schrift bei 4,6:1 liest sich schlechter als ein mittlerer Schnitt beim selben Verhältnis — und ignoriert die Farbkombination selbst. Roter Text auf Grün besteht bequem, sofern die Helligkeiten weit genug auseinanderliegen, und bleibt für etwa einen von zwölf Männern mit Rot-Grün-Sehschwäche eine schlechte Wahl, weil ihnen die Farbtonunterscheidung fehlt, auf die der Rest der Gestaltung baut. Kontrast ist notwendig, aber nicht hinreichend: erst bestehen, dann die Typografie beurteilen.
Text über Bildern und Verläufen prüfen
Die Formel nimmt zwei Volltonfarben, und Text auf einer Fotografie oder einem Verlauf hat keinen Hintergrund — er hat hinter jedem Buchstaben einen anderen. Praktisch prüfen Sie gegen den hellsten und den dunkelsten Punkt, den der Text tatsächlich überquert; fällt einer davon durch, braucht das Layout Hilfe und nicht eine andere Textfarbe. Die üblichen Mittel sind eine halbtransparente Ebene zwischen Bild und Text, eine deckende Fläche hinter dem Textblock oder ein Textschatten — allesamt erzeugen sie faktisch einen kontrollierbaren Hintergrund, den Sie dann messen können. Nur gegen die durchschnittliche Bildhelligkeit zu prüfen ist das, was Überschriften erzeugt, die über einer hellen Himmelsstelle verschwinden.
Häufige Fehler, die Sie vermeiden sollten
- Kontrast nach Augenmaß auf einem guten Monitor in hellem Raum beurteilen. Das ist die nachsichtigste Bedingung, der Ihr Entwurf je begegnet; die Schwelle existiert für die Person, die in der Sonne aufs Telefon schaut oder schlechter sieht.
- Die Überschrift prüfen und den Fließtext für unbedenklich halten. Großer Text erreicht 3:1, normaler braucht 4,5:1 — dieselbe Farbe kann auf derselben Seite für das eine bestehen und für das andere durchfallen.
- Nur Textfarben prüfen. Feldrahmen, Fokusringe und bedeutungstragende Symbole haben eine eigene 3:1-Anforderung, die eine rein textbezogene Prüfung sämtlich übersieht.
- Text über einem Foto gegen die mittlere Bildhelligkeit messen. Prüfen Sie gegen den hellsten und dunkelsten Punkt, den der Text überquert, oder legen Sie eine Ebene darunter, damit es einen messbaren Hintergrund gibt.
- Das Bestehen für das Ende der Frage halten. 4,5:1 ist eine Untergrenze — eine haarfeine Schrift, ein enger Zeilenabstand oder eine Rot-Grün-Kombination können bei technisch konformem Verhältnis weiterhin schwer lesbar sein.
Im Vergleich
| KeroTools | Browser-Entwicklerwerkzeuge | Design-Plugins | |
|---|---|---|---|
| AA und AAA gemeinsam | Ja | Meist nur AA | Unterschiedlich |
| Normaler und großer Text | Beides gezeigt | Manchmal | Meistens |
| Nutzbar vor dem Bauen | Ja | Nein — braucht eine gerenderte Seite | Ja |
| Werte gehen an einen Server | Nie | Nein | Je nach Plugin |
| Konto oder Lizenz | Weder noch | Weder noch | Häufig erforderlich |
| Kosten | Kostenlos | Kostenlos | Kostenlos / kostenpflichtig |
Funktionen
WCAG-Verhältnisberechnung
Die offizielle Formel für relative Leuchtdichte, keine Schätzung nach Augenmaß.
Stufen AA und AAA
Beide Konformitätsstufen werden bewertet, damit Sie wissen, wie viel Spielraum ein Paar hat.
Normaler und großer Text
Großer Text hat eine niedrigere Schwelle; beide werden angezeigt, statt Ihnen das Merken zu überlassen.
Live-Beispieltext
Echte Zeichen im geprüften Paar — das deckt Probleme auf, die eine bloße Zahl nicht zeigt.
Sofort anpassen und neu prüfen
Verschieben Sie eine der Farben und beobachten Sie das Verhältnis, um die kleinste bestehende Änderung zu finden.
HEX-Eingabe
Fügen Sie die Codes direkt aus einem Markendokument oder Stylesheet ein.
Keine Installation
Nichts herunterzuladen oder zu installieren — es läuft auf der Webseite.
Arabisch- und RTL-tauglich
Vollständige Oberfläche in acht Sprachen, einschließlich Arabisch von rechts nach links.
Standardmäßig sicher
Über HTTPS ausgeliefert, ohne Datei-Tracking und ohne Upload an Dritte.
Wer es nutzt
Frontend-Entwickelnde
Eine Farbfrage mit einem gemessenen Verhältnis klären statt mit einer Diskussion in der Designabnahme.
Gestaltende
Den nächstgelegenen bestehenden Ton einer Markenfarbe finden, bevor sie in eine Komponentenbibliothek gelangt.
Teams für Barrierefreiheit und Compliance
Dokumentieren, welche Paare AA erfüllen und welche nachgebessert werden müssen — mit den genauen Verhältnissen.
Öffentlicher Dienst und Bildung
Barrierefreiheitsanforderungen erfüllen, die eine rechtliche Pflicht und keine Vorliebe sind.
Häufig Gestellte Fragen
WCAG AA erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text; AAA erfordert 7:1 bzw. 4,5:1.
Nein. Alles läuft lokal im Browser — nichts wird hochgeladen, gespeichert oder geteilt.
Ja — komplett kostenlos, ohne Konto und ohne Limits.