Wie funktioniert dieses Tool?
- Zwei Farben eingeben. Über den Farbwähler oder als Hex-Wert; die Vorschau zeigt die Kombination sofort.
- Verhältnis ablesen. Es reicht von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß.
- Die passende Zeile suchen. Entscheidend ist, wofür die Farben verwendet werden — Fließtext, Überschrift oder Bedienelement.
- Vorschlag übernehmen. Er verschiebt nur die Helligkeit des Vordergrunds und behält den Farbton bei.
Expertenwissen: Kontrast, richtig gemessen
Die Formel
c' = c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4
L = 0,2126·R' + 0,7152·G' + 0,0722·B'
Verh. = (L_hell + 0,05) / (L_dunkel + 0,05)
Zwei Schritte, die beide wichtig sind. Zuerst werden die Kanalwerte entzerrt: Der sRGB-Farbraum ist nicht linear, ein Wert von 128 ist nicht halb so hell wie 255. Danach werden die entzerrten Werte gewichtet addiert — und zwar sehr ungleich.
Warum Blau fast schwarz ist
Grün geht mit rund 72 Prozent in die Leuchtdichte ein, Rot mit 21, Blau mit nur 7 Prozent. Das bildet die Empfindlichkeit des menschlichen Auges nach, dessen Zapfen im grünen Bereich am dichtesten liegen.
Die Folgen sind für Gestalter unangenehm konkret. Ein sattes Blau wie
#0000ff hat gegenüber Weiß ein Verhältnis von 8,6:1 und besteht damit
AAA — es wirkt aber deutlich dunkler, als die Zahl vermuten lässt. Ein mittleres
Gelb wie #ffff00 kommt gegenüber Weiß dagegen nur auf 1,07:1 und ist
praktisch unlesbar, obwohl es als kräftige Signalfarbe empfunden wird. Wer nach
Gefühl gestaltet, unterschätzt Gelb und Grün systematisch und überschätzt Blau.
Die Schwellen und wofür sie gelten
- 4,5:1 — normale Schrift, Stufe AA. Der praktische Regelfall.
- 3:1 — große Schrift ab 18 pt oder 14 pt fett, Stufe AA.
- 7:1 — normale Schrift, Stufe AAA. Selten gefordert, aber sinnvoll für Fließtext, der lange gelesen wird.
- 3:1 — Bedienelemente und bedeutungstragende Grafiken nach 1.4.11. Betrifft Eingabefeldrahmen, Schaltflächen, Fokusanzeige, Diagrammlinien.
Das zuletzt genannte Kriterium wird am häufigsten übersehen. Ein hellgrauer Rahmen um ein Eingabefeld sieht aufgeräumt aus — wenn er gegenüber dem Seitenhintergrund unter 3:1 liegt, ist das Feld für manche Nutzer schlicht nicht als Feld erkennbar. Dasselbe gilt für die Fokusanzeige bei Tastaturbedienung. Ausgenommen sind ausdrücklich deaktivierte Bedienelemente und rein dekorative Elemente.
Rechtlicher Rahmen in Deutschland
Für öffentliche Stellen gilt die BITV 2.0, die auf die europäische Norm EN 301 549 und damit auf WCAG verweist. Seit Juni 2025 erweitert das Barrierefreiheitsstärkungsgesetz die Pflicht auf viele private Anbieter — darunter Online-Handel, Bankdienstleistungen, E-Books und Telefondienste. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen.
Praktisch heißt das: Der Kontrastwert ist keine Geschmacksfrage mehr. Er ist messbar, dokumentierbar und im Streitfall nachprüfbar — anders als die meisten anderen Gestaltungsentscheidungen.
Was der Wert nicht abdeckt
Ein bestandener Kontrast bedeutet nicht, dass eine Gestaltung zugänglich ist. Drei Grenzen des Verfahrens sind wichtig:
Erstens verlangt Erfolgskriterium 1.4.1, dass Farbe nie das einzige Mittel zur Informationsvermittlung ist. Eine Fehlermeldung, die sich allein durch rote Schrift auszeichnet, ist unzugänglich, egal wie gut der Kontrast ist. Zweitens sagt der Wert nichts über Schriftgröße, Zeilenlänge und Zeilenabstand — dünne Schriftschnitte in Grau bestehen die Prüfung und sind trotzdem mühsam. Drittens ist das Verfahren selbst umstritten: Es bewertet helle Schrift auf dunklem Grund nachweislich zu günstig. Der Nachfolgealgorithmus APCA wird für WCAG 3 erprobt, ist aber noch nicht normativ.
Drei Praxisfälle
Fall 1 – Graue Sekundärschrift. #767676 auf Weiß ergibt
genau 4,54:1 und besteht AA gerade so. Ein Ton heller — #808080 — ergibt
3,95:1 und fällt durch. Zwischen „besteht" und „besteht nicht" liegen hier drei
Helligkeitsstufen.
Fall 2 – Markenfarbe als Schaltfläche. Ein mittleres Firmenblau auf Weiß besteht für große Schrift, für die 14-Pixel-Beschriftung einer Schaltfläche aber nicht. Üblicher Ausweg: die Markenfarbe als Flächenfarbe mit weißer Schrift verwenden statt als Schriftfarbe auf Weiß.
Fall 3 – Platzhaltertext im Eingabefeld. Er wird fast immer sehr hell gesetzt und fällt fast immer durch. Da Platzhaltertext ohnehin kein Ersatz für ein Label ist, ist die richtige Lösung nicht ein dunklerer Platzhalter, sondern ein sichtbares Label.
Typische Fehler
- Nach Augenmaß bewerten. Gelb und Grün werden unterschätzt, Blau überschätzt.
- Die Schwelle für große Schrift auf alles anwenden. Sie gilt erst ab 18 pt oder 14 pt fett.
- Bedienelemente vergessen. Feldrahmen und Fokusanzeige brauchen 3:1.
- Halbtransparente Farben prüfen. Der wirksame Kontrast hängt vom Untergrund ab.
- Text auf Bildern nach dem Durchschnitt bewerten. Maßgeblich ist die ungünstigste Stelle.
- Kontrast mit Zugänglichkeit gleichsetzen. Farbe darf nie das einzige Unterscheidungsmerkmal sein.
Häufige Fragen
Welcher Kontrast ist nach WCAG 2.1 vorgeschrieben?
Für die Stufe AA gilt ein Kontrastverhältnis von mindestens 4,5 zu 1 für normale Schrift und 3 zu 1 für große Schrift. Für die strengere Stufe AAA sind es 7 zu 1 beziehungsweise 4,5 zu 1. Bedienelemente wie Eingabefelder, Schaltflächen und Fokusrahmen sowie bedeutungstragende Grafiken brauchen mindestens 3 zu 1. Rein dekorative Elemente und deaktivierte Bedienelemente sind von der Anforderung ausgenommen.
Ab wann gilt Schrift als groß?
Als große Schrift gilt Text ab 18 Punkt oder ab 14 Punkt in fetter Auszeichnung. Umgerechnet auf Bildschirmpixel sind das etwa 24 Pixel beziehungsweise etwa 18,7 Pixel bei fetter Schrift. Die Umrechnung ist eine Näherung, weil Punkt eine Maßeinheit des Drucks ist. Im Zweifel sollte die strengere Anforderung für normale Schrift erfüllt werden.
Warum stimmt der Kontrast nicht mit meinem Helligkeitsgefühl überein?
Weil die Formel nicht die Helligkeit der Farbwerte misst, sondern die relative Leuchtdichte. Die drei Kanäle gehen unterschiedlich gewichtet ein: Grün mit rund 72 Prozent, Rot mit 21 Prozent und Blau mit nur 7 Prozent. Ein sattes Blau ist deshalb rechnerisch fast so dunkel wie Schwarz, ein mittleres Grün dagegen sehr hell. Zusätzlich werden die Kanalwerte vor der Gewichtung entzerrt, weil der sRGB-Farbraum nicht linear ist.
Genügt es, den Kontrast zu prüfen?
Nein. Der Kontrastwert ist ein notwendiges, aber kein hinreichendes Kriterium. Farbe darf nach Erfolgskriterium 1.4.1 außerdem nie das einzige Mittel sein, um eine Information zu vermitteln – eine Fehlermeldung, die sich nur durch rote Schrift auszeichnet, ist unabhängig vom Kontrastwert unzugänglich. Ebenso wenig sagt der Wert etwas über Schriftgröße, Zeilenabstand oder Verständlichkeit aus.
Gilt das auch für Text auf Bildern?
Ja, und dort ist es besonders schwierig, weil der Hintergrund über die Fläche variiert. Maßgeblich ist der ungünstigste Punkt hinter dem Text. In der Praxis hilft eine abdunkelnde Ebene zwischen Bild und Text oder ein Textkasten mit einfarbigem Hintergrund. Ein Textschatten kann helfen, ist aber schwer zu bewerten und sollte nicht die einzige Maßnahme sein.