Kostenloses Tool

Farbkontrast prüfen

Zwei Farben eingeben, und Sie sehen sofort das Kontrastverhältnis und ob es die Anforderungen der WCAG 2.2 erfüllt. Ohne Anmeldung, ohne Grenze, ohne dass eine einzige Anfrage Ihren Rechner verlässt.

Läuft auf Ihrem Gerät. Die Berechnung passiert in Ihrem Browser. Es geht keine Anfrage an einen Server und es wird nichts gespeichert.

Kontrastverhältnis —

Vordergrundfarbe

—

Hintergrundfarbe

—

Erfüllte Stufen der WCAG 2.2 je Textgröße
Kategorie	AA	AAA
Großer Text ab 24 px, fett ab 18,7 px
Kleiner Text alles darunter
Grafiken und Bedienelemente Symbole, Rahmen, Zustände		kein Kriterium

Vorschau

Ihre Marke

Websites, die alle bedienen können

Hier entscheidet sich, ob jemand Ihre Seite auf dem Handy in der Sonne noch lesen kann. Kontrast ist keine Geschmacksfrage.

Angebot anfordern

Kleingedrucktes in 14 Pixeln – die Größe, an der die meisten Seiten scheitern.

Zum Hintergrund

Zur Bedienung

In die Farbfelder können Sie Hex-Werte wie #1a2b3c oder #abc eintragen, ebenso Angaben wie rgb(26, 43, 60). Der Regler darunter verschiebt ausschließlich die Helligkeit und lässt Farbton und Sättigung stehen – aus Ihrem Magenta wird also ein helleres oder dunkleres Magenta, kein Rosa.

Die Vorschau rechts zeigt beide Farben so, wie sie auf einer echten Seite zusammenwirken: Überschrift, Fließtext, Schaltfläche und Kleingedrucktes in 14 Pixeln. Die Schaltfläche dreht die Farben um – Kontrast kennt keine Richtung, Schwarz auf Weiß ist derselbe Wert wie Weiß auf Schwarz.

Warum der Kontrast zählt

Kontrast ist die Anforderung an Barrierefreiheit, die am häufigsten verletzt wird – und die am leichtesten zu beheben ist. Sie brauchen dafür keine neue Website, oft nur einen anderen Grauton. Betroffen sind nicht nur Menschen mit einer Sehbehinderung: Auch wer mit dem Handy in der Sonne steht oder schlicht über vierzig ist, liest blassgraue Schrift schlechter.

Seit Juni 2025 ist das für viele Unternehmen keine freiwillige Übung mehr. Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet unter anderem Onlineshops, Buchungsstrecken und Bankdienste – und es verweist auf dieselben Kriterien, die dieses Werkzeug prüft.

Der Rechner sagt Ihnen, ob eine Farbkombination die Schwelle hält. Er sagt Ihnen nicht, ob Ihre Website insgesamt barrierefrei ist – dafür braucht es eine Prüfung der ganzen Seite, von Hand und mit Hilfsmitteln. Dafür gibt es unser Barrierefreiheits-Audit.

Wo der Kontrast in der Praxis kippt

Die Stellen, an denen es schiefgeht, wiederholen sich – bei fast jeder Website, die wir prüfen, sind es dieselben fünf:

Platzhaltertext in Formularen

Der graue Text im Eingabefeld ist fast immer zu blass, weil er sich optisch von der echten Eingabe abheben soll. Er zählt aber als Text und muss 4,5 zu 1 halten. Der bessere Weg ist ohnehin eine sichtbare Beschriftung über dem Feld: Der Platzhalter verschwindet beim Tippen, und wer beim Ausfüllen kurz abgelenkt wird, weiß dann nicht mehr, was in das Feld gehört.

Weiße Schrift auf der Markenfarbe

Viele Markenfarben sind zu hell für weiße Schrift. Ein mittleres Blau, ein freundliches Grün, fast jedes Gelb – auf allen dreien liegt Weiß unter 4,5 zu 1. Prüfen Sie es, bevor der Knopf überall auf der Seite steht. Meist reicht es, die Markenfarbe für Flächen um zwei Stufen abzudunkeln und die helle Variante nur für Ränder und Symbole zu nehmen.

Text auf Bildern und Verläufen

Hier gibt es keinen einzelnen Hintergrundwert – der Kontrast ändert sich von Pixel zu Pixel. Prüfen Sie die hellste Stelle unter dem Text, nicht die dunkelste. Wenn es knapp wird, hilft eine abdunkelnde Ebene zwischen Bild und Schrift; dieselbe Lösung setzen wir auf dieser Website im Seitenkopf ein.

Der Fokusrahmen

Wer mit der Tastatur navigiert, braucht eine sichtbare Markierung. Sie ist kein Text, fällt also unter 1.4.11 und muss 3 zu 1 gegen ihre Umgebung halten – und zwar gegen beides, gegen die Fläche daneben und gegen den Knopf darunter. Der hellgraue Standardrahmen mancher Themes erfüllt das auf hellem Grund nicht.

Ausgegraute Schaltflächen

Die einzige Ausnahme in der Reihe: Bedienelemente, die inaktiv sind, nimmt WCAG ausdrücklich aus. Trotzdem sollte man es nicht übertreiben – wenn niemand mehr erkennt, dass dort überhaupt ein Knopf ist, war die Gestaltung schlechter als die Vorschrift.

Häufige Fragen

Woher kommt der Wert 4,5 zu 1?

Aus WCAG 2.2, Erfolgskriterium 1.4.3. Er bildet ab, was Menschen mit einer Sehschärfe von etwa 20/40 – also leicht eingeschränkt, ohne Sehhilfe – noch sicher lesen können. Großer Text darf auf 3 zu 1 herunter, weil dickere Buchstaben mehr Fläche haben.

Was gilt als großer Text?

Ab 24 Pixeln, oder ab 18,66 Pixeln (14 pt), wenn die Schrift fett gesetzt ist. Darunter gilt die strengere Anforderung von 4,5 zu 1.

Gilt das auch für Symbole und Rahmen?

Ja, über ein eigenes Kriterium: 1.4.11 verlangt 3 zu 1 für alles, was Bedeutung trägt, ohne Text zu sein – Symbole, Eingabefeld-Rahmen, Zustandsanzeigen, Diagrammlinien. Reine Zierde ist ausgenommen.

Reicht es, wenn der Kontrast stimmt?

Nein. Kontrast ist eine Anforderung von vielen. Information darf zum Beispiel nie allein über Farbe transportiert werden (1.4.1) – ein rot markiertes Pflichtfeld braucht zusätzlich Text oder ein Zeichen. Genau deshalb steht in der Bewertung unten neben jeder Farbe auch ein Wort.

Wenn Sie nicht ein Paar prüfen, sondern ein ganzes Erscheinungsbild aufbauen: Die Kontrastmatrix rechnet alle Farben einer Palette auf einmal gegeneinander.

Alle Tools ansehen