Farbkontrast-Checker

Dieser Kontrast-Checker sagt dir, ob eine Textfarbe auf ihrem Hintergrund lesbar genug ist. Nach WCAG 2.2, mit einer echten Rechnung, nicht nach Augenmaß. Du trägst zwei Hex-Werte ein oder wählst sie über den Farbwähler. Sofort siehst du das Kontrastverhältnis und ob es für die fünf gängigen WCAG-Stufen reicht.

Gedacht ist das für den schnellen Check zwischendurch. Bevor eine neue Textfarbe ins CSS wandert. Bevor ein Kundenlogo auf einem hellen Header landet. Bevor ein Design-Token in den Code geht.

Gebaut ist es für alle, die im Alltag Farbentscheidungen treffen, ohne selbst Accessibility-Spezialist zu sein: Designerinnen, Frontend-Entwickler, Freelancer, die ein Kundenlogo einbauen, oder wer einfach das eigene Blog-Theme prüfen will. Für einen vollständigen Accessibility-Audit einer Website reicht das nicht. Dafür ist es zu schmal gebaut. Genau das macht es aber schnell.

So funktioniert es

Zwei Felder, Vordergrund und Hintergrund. Jeweils als Hex-Wert oder über den nativen Farbwähler des Browsers. Beide Eingaben tragen eigene Labels für Screenreader. Bei einem Barrierefreiheits-Tool sollte das selbstverständlich sein, ist es aber nicht überall. Der Tauschen-Button dreht beide Farben um. Praktisch, wenn du eine Kombination auch andersherum prüfen willst, etwa für einen Dark-Mode-Entwurf, in dem Text- und Hintergrundfarbe die Rollen tauschen.

Beide Felder verlangen den vollen, sechsstelligen Hex-Code, #RRGGBB. Das dreistellige Kurzformat wie #fff nimmt das Tool nicht an. Es lässt sich beim Tippen nicht zuverlässig von einem angefangenen sechsstelligen Wert unterscheiden.

Die Berechnung folgt der WCAG-2.2-Formel für relative Luminanz. Beide Farben werden aus sRGB linearisiert. Dann gewichtet summiert: 0,2126 für Rot, 0,7152 für Grün, 0,0722 für Blau. Aus den beiden Luminanzwerten ergibt sich das Kontrastverhältnis: der hellere Wert plus 0,05, geteilt durch den dunkleren Wert plus 0,05. Das prüft die Ergebnisliste gegen fünf Schwellenwerte:

• AA, Fließtext: mindestens 4,5:1
• AA, große Schrift: mindestens 3:1
• AAA, Fließtext: mindestens 7:1
• AAA, große Schrift: mindestens 4,5:1
• AA, Grafiken und Bedienelemente: mindestens 3:1

Die letzte Zeile hat bewusst keine AAA-Spalte. Es gibt keine. WCAG definiert den Kontrast für Icons, Formularrahmen und Diagrammlinien nur auf AA-Niveau (Success Criterion 1.4.11, Non-text Contrast). Wer da eine fehlende AAA-Zahl sucht, sucht etwas, das im Standard nicht existiert.

Unter den Ergebnissen läuft die Vorschau live mit. Ein Satz auf echtem Papier und echter Tinte, in genau den Farben, die du gerade eingetragen hast. Der Satz ist ein deutsches Pangramm, "Franz jagt im Taxi quer durch das völlig verwahrloste Bayern", damit jeder Buchstabe im Bild ist. Sobald ein Wert unter die Schwelle rutscht, kippt die passende Zeile in der Ergebnisliste von PASS auf FAIL. Und in der Vorschau siehst du gleichzeitig, wie sich das tatsächlich liest.

Wann du es brauchst

Am häufigsten brauchst du das Tool, wenn eine Textfarbe für einen neuen Hintergrund feststehen muss. Etwa für einen Button oder eine neue Sektion im Layout. Auch bei einer Markenpalette lohnt sich der Blick. Firmenfarben werden meistens fürs Auge gewählt, nicht für Kontrastwerte. Ein Rotton, der auf Weiß gut aussieht, liegt beim Fließtext oft knapp unter 4,5:1.

Genauso praktisch: der Check vor dem Commit eines neuen --color-Tokens im Design-System. Bevor er sich in zwanzig Komponenten verteilt und der Fehler überall gleichzeitig auftaucht. Oder wenn ein Kunde ein Mockup schickt und du kurz prüfen willst, ob die vorgeschlagenen Farben überhaupt lesbar sind, bevor du das ansprichst.

Der Lesbarkeit-Checker ist danach ein gutes Gegenstück. In einem eigenen Artikel erkläre ich, warum ich den Lesbarkeit-Checker gebaut habe. Farbe und Satzlänge hängen bei Barrierefreiheit enger zusammen, als man beim ersten Hinsehen denkt.

Und bevor eine Seite live geht, lohnt sich neben dem Kontrast auch ein Blick auf den Meta-Checker. Damit Title und Description nicht mitten im Wort in den Suchergebnissen abgeschnitten werden.

Was WCAG 2.2 tatsächlich verlangt

WCAG unterscheidet zwei Konformitätsstufen, AA und AAA. Und innerhalb jeder Stufe zwischen normalem und großem Text. Groß heißt hier nicht "wirkt groß".

Die Definition liegt bei 18 Punkt, etwa 24px, im Normalschnitt. Oder 14 Punkt, etwa 18,7px, fett. Alles darunter zählt als normaler Text und braucht den strengeren Wert (W3C, WCAG 2.2 Understanding: Contrast Minimum, Success Criterion 1.4.3).

Der Gedanke dahinter: Größere, kräftigere Buchstabenformen bleiben auch bei geringerem Kontrast noch erkennbar. Kleine Schrift verzeiht das nicht.

Für die meisten Websites reicht AA. Das ist auch die Stufe, gegen die deutsche Behörden und mittlerweile viele private Anbieter prüfen. AAA (Success Criterion 1.4.6) ist die schärfere Stufe. Für Inhalte, bei denen Lesbarkeit besonders zählt: lange Fließtexte, Formulare im öffentlichen Bereich, alles mit einer breiten, teils älteren Zielgruppe.

Was viele übersehen: Icons, Eingabefeldrahmen, Diagrammlinien und andere nicht-textliche Bedienelemente haben einen eigenen Schwellenwert von 3:1 (WCAG 2.2, Success Criterion 1.4.11). Unabhängig vom Text daneben.

Ein Formular mit dunkelgrauem Text auf Weiß kann die Textkontraste locker erfüllen. Und trotzdem an einem hellgrauen Eingabefeldrahmen scheitern, den kaum jemand als eigenes Kriterium auf dem Schirm hat.

Genauso klassisch: hellgrauer Placeholder-Text in Formularfeldern. Er wirkt auf den ersten Blick clean. In der Rechnung rutscht er trotzdem oft unter jede AA-Schwelle, weil Design-Systeme Placeholder gern bewusst blass halten.

Ein Beispiel zum Nachrechnen: #999999 auf Weiß landet bei 2,85:1. Deutlich unter der 4,5:1-Schwelle für Fließtext, wirkt aber in einem Screenshot nur "dezent grau", nicht "kaputt". #767676 auf Weiß liegt mit 4,54:1 knapp über der Grenze. Viele Styleguides führen es deshalb als dunkelstes Grau, das bei normaler Schriftgröße noch als AA-sicher gilt.

Warum das kein Nice-to-have mehr ist

Weltweit leben laut WHO mindestens 2,2 Milliarden Menschen mit einer Sehbeeinträchtigung (WHO, Fact Sheet: Blindness and Visual Impairment). Dazu kommt Farbfehlsichtigkeit. Sie betrifft nach Zahlen von Colour Blind Awareness etwa jeden zwölften Mann und eine von 200 Frauen, weltweit rund 300 Millionen Menschen (Colour Blind Awareness, About Colour Blindness).

Für die entscheidet Farbkontrast nicht, ob eine Website hübsch aussieht. Er entscheidet, ob sie sich überhaupt lesen lässt.

In Deutschland ist das inzwischen auch rechtlich relevant. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es verpflichtet eine ganze Reihe digitaler Dienstleistungen zur Barrierefreiheit: Onlineshops, Bankdienstleistungen für Verbraucher, Telekommunikationsdienste und E-Book-Anbieter gehören ausdrücklich dazu (Barrierefreiheitsstärkungsgesetz, gesetze-im-internet.de).

Kleinstunternehmen sind bei Dienstleistungen ausgenommen, alle anderen nicht. Farbkontrast ist dabei nur eines von vielen Kriterien. Aber eines der am leichtesten zu prüfenden. Ein WCAG-Check wie dieser ist der erste Schritt dahin, nicht der letzte.

Was es nicht kann

Das Tool prüft ein Farbpaar, nicht deine ganze Website. Es sagt dir das Kontrastverhältnis zwischen genau den zwei Farben, die du eingibst, mehr nicht. Verläufe, Hintergrundbilder, halbtransparente Overlays oder Text auf Fotos rechnet die Formel gar nicht erst mit ein. Sie braucht zwei feste sRGB-Werte.

Es simuliert auch keine Farbfehlsichtigkeit. Ein PASS bei diesem Tool heißt, dass der rechnerische Kontrast stimmt. Nicht, dass eine Rot-Grün-Kombination für alle gleich gut zu unterscheiden ist. Das ist ein anderes Problem, meistens gelöst mit Simulatoren, die ein Bild durch die jeweilige Sehschwäche filtern.

Und es findet nichts automatisch. Für einen kompletten Audit einer bestehenden Seite brauchst du ein Tool, das über das echte, gerenderte Layout läuft. Eines, das jede Kombination selbst aufspürt, nicht nur die eine, die du gerade testest. Und im Idealfall auch Tastaturbedienung und Screenreader-Ausgabe mitprüft.

Für den schnellen Griff zwischendurch, bevor eine Farbe live geht, reicht das hier. Er ist eines von zwölf Tools, die ich nach und nach für diese Seite gebaut habe. Warum und wie, steht in meiner Liste der zwölf Tools.