Kontrast-Checker: Farbkontraste nach WCAG testen

Geben Sie Ihre Vordergrundfarbe und Ihre Hintergrundfarbe ein – entweder als HEX-Wert, per Farbwähler oder direkt als RGB-Code. Das Tool berechnet dann automatisch das Kontrastverhältnis und zeigt Ihnen an, ob die Kombination die WCAG-Stufen AA oder AAA besteht. Sie sehen außerdem eine Live-Vorschau, wie der Text in dieser Farbkombination tatsächlich aussieht. Probieren Sie verschiedene Abstufungen durch, bis das Ergebnis passt.

Rund 8 Prozent aller Männer haben eine Farbsehschwäche – das ist jeder zwölfte Besucher Ihrer Website. Wer Kontraste nicht prüft, schließt diese Menschen aus, oft ohne es zu merken. Dazu kommt: Seit dem Barrierefreiheitsstärkungsgesetz sind viele Unternehmen ab 2025 rechtlich verpflichtet, ihre digitalen Angebote zugänglich zu gestalten. Ein schneller Check mit diesem Tool kann also nicht nur die Nutzererfahrung verbessern, sondern auch rechtliche Probleme vermeiden.

Stellen Sie sich vor, Sie gestalten einen Call-to-Action-Button. Orange auf Weiß sieht im Designprogramm fantastisch aus, doch der Kontrastwert liegt bei mageren 2,5:1. Für normalen Text bräuchten Sie mindestens 4,5:1. Mit dem Checker erkennen Sie das Problem, bevor der Button live geht, und können die Farbe um ein paar Nuancen abdunkeln.

Oder nehmen wir ein anderes Szenario: Sie erstellen eine Präsentation für ein Meeting und verwenden hellblaue Schrift auf mittelgrauem Hintergrund. Am eigenen Monitor sieht das prima aus. Aber am Beamer im Konferenzraum? Katastrophe. Hätten Sie vorher den Kontrast geprüft, wäre Ihnen das erspart geblieben.

Auch im E-Commerce ist das Thema unterschätzt. Produktbeschreibungen in zartem Grau mögen elegant wirken, doch wenn ältere Kunden die Texte nicht entziffern können, kaufen sie eben woanders. Kennen Sie das? Der Designer findet es ästhetisch, der Kunde findet den Warenkorb nicht.

Besonders relevant wird es bei mobilen Anwendungen. Auf dem Smartphone kommt oft Sonnenlicht ins Spiel, das den sichtbaren Kontrast zusätzlich reduziert. Was im Büro noch lesbar war, wird draußen zum Ratespiel. Hier hilft es, von vornherein auf ausreichende Kontrastwerte zu setzen.

Ein Profi-Tipp, den viele nicht kennen: Testen Sie nicht nur Schwarz auf Weiß, sondern auch Ihre sekundären Farbkombinationen. Fehlermeldungen in Rot auf dunklem Hintergrund, Hinweistexte in Grün, deaktivierte Buttons in Grau – all diese Zustände brauchen einen ausreichenden Kontrast. Die meisten Barrierefreiheitsprobleme verstecken sich genau in diesen Details.

Arbeiten Sie mit einem Designsystem? Dann legen Sie sich eine kleine Kontrastmatrix an. Prüfen Sie systematisch, welche Ihrer Markenfarben miteinander kombiniert werden dürfen und welche nicht. Das spart langfristig enorm viel Zeit, weil Designer und Entwickler direkt wissen, was erlaubt ist.

Noch ein Hinweis aus der Praxis: Die WCAG unterscheidet zwischen normalem Text und großem Text. Ab 18pt Schriftgröße – oder 14pt bei Fettdruck – gelten gelockerte Anforderungen. Das Kontrastverhältnis von 3:1 reicht dann aus statt 4,5:1. Nutzen Sie das bewusst, aber übertreiben Sie es nicht. Nur weil eine Überschrift groß genug ist, heißt das nicht, dass sie unleserlich sein darf.

Achten Sie außerdem auf den Unterschied zwischen AA und AAA. Die Stufe AA ist der Mindeststandard, den Sie immer erfüllen sollten. AAA ist die Königsklasse und besonders bei textlastigen Seiten sinnvoll. Für UI-Elemente und Grafiken reicht in der Regel AA.

Hinter dem Kontrast-Check steckt eine klare mathematische Formel. Das Kontrastverhältnis wird berechnet, indem die relative Leuchtdichte der helleren Farbe plus 0,05 durch die relative Leuchtdichte der dunkleren Farbe plus 0,05 geteilt wird. Klingt kompliziert? Ist es aber nicht – unser Tool erledigt das für Sie in Millisekunden.

Die relative Leuchtdichte einer Farbe ergibt sich aus ihren RGB-Werten. Dabei werden die einzelnen Kanäle allerdings nicht gleichmäßig gewichtet. Grün trägt mit rund 72 Prozent am meisten zur wahrgenommenen Helligkeit bei, Rot mit etwa 21 Prozent und Blau nur mit knapp 7 Prozent. Deshalb ist gelber Text auf Weiß so schlecht lesbar, obwohl Gelb subjektiv doch „kräftig" wirkt.

Die WCAG 2.1 definiert drei Schwellenwerte: Mindestens 3:1 für große Texte und grafische Elemente auf Stufe AA, mindestens 4,5:1 für normalen Text auf Stufe AA und mindestens 7:1 für normalen Text auf Stufe AAA. Diese Werte basieren auf Studien zur Lesbarkeit unter verschiedenen Sehbedingungen, einschließlich altersbedingter Sehschwäche.

Übrigens: Die WCAG 3.0 wird voraussichtlich ein neues Kontrastmodell namens APCA einführen. Dieses berücksichtigt stärker, wie Menschen Kontrast tatsächlich wahrnehmen – etwa dass dunkler Text auf hellem Grund anders wirkt als heller Text auf Dunklem. Bis dahin bleibt aber das bewährte Luminanz-Modell der Standard.

Natürlich gibt es diverse Browser-Erweiterungen und Desktop-Programme, die ebenfalls Kontraste prüfen können. Viele davon sind gut. Aber: Sie müssen erst installiert werden. Unser Tool funktioniert direkt im Browser, ohne Download und ohne Anmeldung. Das macht es besonders praktisch, wenn Sie schnell mal einen Wert überprüfen wollen, etwa in einem Meeting oder beim Kundengespräch.

Einige Online-Tools zeigen nur das nackte Kontrastverhältnis an. Hier bekommen Sie zusätzlich die visuelle Vorschau, die WCAG-Bewertung für verschiedene Textgrößen und konkrete Hinweise, ob Ihre Kombination die jeweilige Stufe besteht. Alles auf einen Blick, ohne zwischen Tabs hin und her zu springen.

Was mich bei vielen Alternativen stört: Die Oberfläche ist oft auf Englisch und mit Fachbegriffen überladen. Wer nicht tief im Thema Accessibility steckt, fühlt sich schnell überfordert. Unser Checker setzt auf klare, deutsche Beschriftungen und zeigt Ergebnisse so an, dass auch Einsteiger sofort verstehen, was zu tun ist.

Ein weiterer Pluspunkt: Die Eingabe ist flexibel. Ob HEX, RGB oder der Farbwähler – Sie arbeiten so, wie es Ihnen am liebsten ist. Manche Tools akzeptieren nur HEX-Werte, was im Alltag unpraktisch sein kann, wenn man gerade mit RGB-Werten aus einem Designprogramm arbeitet. Hier sind Sie flexibel.