Kontrast-Checker
Prüfe in Sekunden, ob deine Farbkombination die WCAG-Grenzwerte für Text und UI-Elemente erfüllt — mit konkretem Farbvorschlag, wenn es nicht reicht.
Kostenlos · Keine Anmeldung · Farben verlassen deinen Browser nicht
Kontrast 7,47:1. AA normaler Text: Bestanden. AAA normaler Text: Bestanden.
WCAG-Prüfung
- AA — normaler Textmind. 4,5:1 · WCAG 1.4.3Bestanden
- AA — großer Textmind. 3:1 · WCAG 1.4.3Bestanden
- AAA — normaler Textmind. 7:1 · WCAG 1.4.6Bestanden
- AAA — großer Textmind. 4,5:1 · WCAG 1.4.6Bestanden
- UI-Komponenten & Grafikenmind. 3:1 · WCAG 1.4.11Bestanden
Großer Text heißt: ab 24 px, oder ab etwa 18,7 px in fett.
Vorschau
Die Grenzwerte, kurz erklärt
WCAG misst Kontrast als Verhältnis der Leuchtdichte zweier Farben — von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß).
Pflichtniveau für Fließtext. Gilt für alle Textgrößen unter 24 px (bzw. 18,7 px fett) — auch für Links, Labels und Platzhalter.
Für großen Text ab 24 px sowie für Bedienelemente und aussagekräftige Grafiken: Icons, Diagramm-Linien, Rahmen von Eingabefeldern.
Erhöhtes Niveau für normalen Text (großer Text: 4,5:1). Kein BFSG-Pflichtwert, aber sinnvoll für lange Lesetexte und sehschwache Zielgruppen.
Für Unternehmen, die unter das BFSG fallen, ist WCAG 2.1 AA über die EN 301 549 der verbindliche Maßstab — Kontrast gehört dabei zu den am häufigsten verfehlten Kriterien. Was das BFSG konkret verlangt →
Typische Kontrast-Fallen
- Hellgrauer Text auf Weiß: Beliebte Werte wie #999999 (2,8:1) wirken elegant, scheitern aber deutlich an den geforderten 4,5:1.
- Text auf Fotos und Verläufen: Der Kontrast muss an der ungünstigsten Stelle stimmen, nicht im Durchschnitt — ohne abdunkelnde Überlagerung fällt fast jede Bild-Text-Kombination durch.
- Platzhaltertexte in Formularen: Auch der Placeholder ist Text und braucht 4,5:1 — die Browser-Voreinstellung liegt oft darunter.
- Weiße Schrift auf Signal- und Markenfarben: Gelb, Orange und helle Grüntöne erreichen mit Weiß selten 4,5:1 — dunkle Schrift ist dort fast immer die richtige Wahl.
- Fokus-Rahmen und Icons vergessen: Auch Nicht-Text-Elemente wie Fokus-Indikatoren, Icon-Buttons und Feldrahmen brauchen 3:1 gegenüber ihrer Umgebung (WCAG 1.4.11).
Kontrast ist nur einer von über 100 Prüfpunkten
Der kostenlose Scan prüft deine komplette Website nach WCAG 2.1 und BFSG — mit Score, allen Fundstellen und PDF-Report in unter 60 Sekunden.
Häufige Fragen zum Farbkontrast
Welcher Kontrast ist nach WCAG vorgeschrieben?
Für die Konformitätsstufe AA: mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 24 px bzw. 18,7 px fett). Bedienelemente und aussagekräftige Grafiken brauchen 3:1. Die strengere Stufe AAA verlangt 7:1 für normalen Text.
Gilt der Kontrast-Grenzwert auch für das BFSG?
Ja. Das Barrierefreiheitsstärkungsgesetz verweist über die europäische Norm EN 301 549 auf WCAG 2.1 AA — damit sind die Kontrastanforderungen 1.4.3 und 1.4.11 für betroffene Unternehmen rechtlich verbindlich.
Wie wird das Kontrastverhältnis berechnet?
Aus der relativen Leuchtdichte beider Farben nach der WCAG-Formel: (L1 + 0,05) geteilt durch (L2 + 0,05). Die Skala reicht von 1:1 für identische Farben bis 21:1 für Schwarz auf Weiß. Dieses Tool rechnet exakt nach dieser Formel.
Gibt es Ausnahmen von der Kontrastpflicht?
Ja: Logos und Markenzeichen, rein dekorative Texte, inaktive (deaktivierte) Bedienelemente und Text, der zufälliger Teil eines Fotos ist, sind von 1.4.3 ausgenommen. Für alles andere gelten die Grenzwerte.
Reicht guter Kontrast, damit meine Website barrierefrei ist?
Nein. Kontrast ist eines von über 100 Kriterien — Alternativtexte, Tastaturbedienung, Formular-Beschriftungen und Struktur kommen dazu. Einen Gesamtüberblick liefert der kostenlose Website-Scan mit PDF-Report.