Werkzeug
Ist Ihre Schrift gut lesbar?
Zwei Farben eingeben, Kontrastverhältnis ablesen. Das Ergebnis sagt Ihnen, ob Ihre Schrift die Anforderungen der Barrierefreiheit erfüllt — für normalen Text, für große Überschriften und für die strengere Stufe AAA.
Als Vorlagen haben wir die echten Farben dieser Website hinterlegt. Zwei davon fallen durch — auch das zeigen wir Ihnen.
Großer Text (28 px)
Fetter Text (19 px)
Normaler Fließtext in 16 Pixel. Genau an dieser Größe entscheidet sich, ob eine Seite für Menschen mit eingeschränktem Sehvermögen noch lesbar ist.
6.9:1
Kontrastverhältnis
- AA — normaler Text (ab 4.5:1) – bestandenDie Grenze, die für den allergrößten Teil Ihrer Website gilt: Fließtext, Beschriftungen, Menüpunkte, alles unter 18,5 Pixel. Wer diesen Wert reißt, macht seine Seite für einen erheblichen Teil der Besucher anstrengend.
- AA — große Schrift (ab 3:1) – bestandenGilt ab etwa 24 Pixel normaler Schrift oder ab 18,5 Pixel fetter Schrift. Große Buchstaben haben mehr Fläche pro Zeichen und bleiben deshalb auch bei geringerem Kontrast erkennbar. Für Überschriften und Zahlen in Kacheln.
- AAA — normaler Text (ab 7:1) – nicht bestandenDie strenge Stufe. Verpflichtend ist sie nur selten, aber sie ist der richtige Anspruch, wenn Ihre Kundschaft überwiegend älter ist oder wenn Menschen Ihre Seite draußen auf dem Handy lesen — bei Sonnenlicht bricht der wahrgenommene Kontrast ein.
- AAA — große Schrift (ab 4.5:1) – bestandenDieselbe Zahl wie AA für normalen Text, aber für große Schrift. Praktisch heißt das: Wenn Ihre Überschriftenfarbe schon 4,5:1 erreicht, erfüllt sie für Überschriften bereits die höchste Stufe.
Farbpaare dieser Website zum Ausprobieren
Das Ergebnis ist eine exakte Rechnung nach der Formel der WCAG 2.1 — aber es prüft nur zwei Farben zueinander. Ob Ihre Website insgesamt barrierefrei ist, hängt an deutlich mehr: Tastaturbedienung, Vorlesbarkeit, Beschriftung von Formularfeldern, Verhalten beim Vergrößern. Ein guter Kontrastwert ist notwendig, aber längst nicht ausreichend.
Was ein Kontrastverhältnis überhaupt bedeutet
Ein Kontrastverhältnis ist ein Vergleich der Helligkeit zweier Farben, ausgedrückt als Verhältnis wie 4,5:1 oder 7:1. Der schlechteste mögliche Wert ist 1:1 — zwei identische Farben, die Schrift ist unsichtbar. Der beste ist 21:1: reines Schwarz auf reinem Weiß. Alles, was Sie tatsächlich verwenden, liegt irgendwo dazwischen.
Wichtig ist, dass die Rechnung nicht mit den Farbwerten arbeitet, die Sie eingeben, sondern mit der wahrgenommenen Helligkeit. Deshalb sind die Ergebnisse manchmal überraschend: Ein sattes Gelb wirkt kräftig, ist aber sehr hell und hat gegen Weiß kaum Kontrast. Ein mittleres Blau wirkt dezent und schlägt es deutlich. Ihr Auge ist bei dieser Frage kein guter Ratgeber — die Rechnung schon.
Ebenfalls wichtig: Es zählt immer die Farbe direkt hinter der Schrift, nicht die Seitenfarbe. Schrift auf einem Foto ist deshalb der schwierigste Fall — dort ändert sich der Hintergrund alle paar Pixel. Die übliche Lösung ist ein halbtransparenter dunkler Streifen unter dem Text.
Drei Regeln, die fast alles abdecken
4,5:1 für alles, was man liest
Fließtext, Menü, Beschriftungen, Fußzeile. Diese eine Zahl im Kopf zu haben erspart neunzig Prozent aller Kontrastprobleme.
Akzentfarben sind keine Schriftfarben
Ein freundliches Grün ist prima für Knöpfe, Rahmen und Flächen — aber als Textfarbe auf Weiß fällt es fast immer durch. Unser eigenes Mittelgrün schafft gerade 2,2:1.
Auch Knöpfe und Felder zählen
Nicht nur Schrift braucht Kontrast: Rahmen von Eingabefeldern, Symbole und die Umrandung des gerade ausgewählten Elements brauchen mindestens 3:1 gegen ihre Umgebung.
Grau auf Weiß — der häufigste Fehler im deutschen Webdesign
Es gibt eine Gestaltungsmode, die seit Jahren hält: Fließtext in hellem Grau statt in Schwarz, weil es ruhiger und hochwertiger aussieht. Optisch stimmt das. Nur endet es regelmäßig bei Werten um 3:1 — und damit unter der Grenze für normalen Text.
Probieren Sie es oben mit unserer Vorlage „Helles Grau auf Weiß“ aus: #7a7a7a auf Weiß ergibt 4,3:1 und verfehlt die Anforderung knapp. Diese Farbe verwenden auch wir — aber ausschließlich für Kleinkram wie Bildunterschriften und Datumsangaben, nie für einen Absatz, den jemand lesen soll. Unser eigentlicher Fließtext ist #535353 und liegt bei 7,7:1. Der Unterschied ist im Design kaum zu bemerken und für jemanden mit nachlassender Sehkraft entscheidend.
Das Ärgerliche daran: Niemand beschwert sich. Wer Ihren Text nicht mühelos lesen kann, schreibt Ihnen das nicht — er geht. Deshalb bleibt dieser Fehler in aller Regel jahrelang unentdeckt.
Warum das seit 2025 nicht mehr nur eine Empfehlung ist
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt seit dem 28. Juni 2025 europäische Vorgaben in deutsches Recht um. Betroffen sind unter anderem Onlineshops, Buchungsstrecken, Bankdienstleistungen und Anbieter elektronischer Dienstleistungen gegenüber Verbrauchern. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen — der Grenzwert lohnt aber einen genauen Blick, denn für Produkte gilt die Ausnahme nicht.
Der technische Maßstab dahinter ist die europäische Norm EN 301 549, die im Wesentlichen auf die WCAG in Stufe AA verweist. Genau deshalb ist die Zahl 4,5:1 aus einer Gestaltungsfrage eine Anforderung geworden. Was das im Einzelnen bedeutet, steht unter Barrierefreiheit — ob Sie konkret betroffen sind, klärt eine Rechtsberatung.
FAQ
Häufig gestellte Fragen
Nein, und das wäre auch keine gute Idee — reines Schwarz auf reinem Weiß bei 21:1 empfinden viele Menschen als grell. Der brauchbare Bereich für Fließtext liegt etwa zwischen 7:1 und 13:1. Diese Website nutzt 7,7:1 und wirkt trotzdem weich, weil der Hintergrund ein leichtes Creme ist und nicht reines Weiß.
Für das Logo selbst gilt die Kontrastregel nicht — Logos sind ausdrücklich ausgenommen. Sobald Sie dieselbe Farbe aber für Schrift, Knöpfe oder Bedienelemente einsetzen, greift sie wieder. Der übliche Weg: Die Markenfarbe bleibt für Flächen und Logo, und für Text gibt es eine abgedunkelte Variante derselben Farbe. Wie man so eine Palette aufbaut, zeigen unsere Farbpaletten.
Ja, und dort ist es am schwierigsten, weil sich der Hintergrund ständig ändert. Zu prüfen ist der ungünstigste Punkt, nicht der Durchschnitt. In der Praxis lösen wir das mit einer abdunkelnden Ebene über dem Bild oder mit einem Farbverlauf, der genau unter dem Text am dunkelsten ist — das Bild bleibt erkennbar, der Text sicher lesbar.
Bereit, Ihr Projekt umzusetzen?
Lassen Sie uns gemeinsam loslegen.
Wir freuen uns auf Ihr Vorhaben – ob Redesign, neue Website oder langfristige Betreuung.