Farbkontrast-Prüfer (WCAG)

Prüfe, ob zwei Farben die WCAG 2.1-Mindestkontraste erfüllen.

Kontrast und Barrierefreiheit

Die WCAG (Web Content Accessibility Guidelines) legen Mindestkontrastverhältnisse für lesbaren Text fest. Die Stufe AA – der Standard, den die meisten Websites anstreben – verlangt 4.5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt fett). AAA ist strenger mit 7:1. Werden diese Werte verfehlt, ist Ihre Seite für Nutzer mit Sehschwäche oder auf älteren Bildschirmen unlesbar.

Kontrastverhältnisse sind nicht intuitiv. Rot auf Schwarz mag knackig wirken, erreicht aber nur 5.25:1 – gerade so AA. Helles Grau auf Weiß, verbreitet in modernen „minimalistischen“ Designs, fällt oft komplett durch. Dieser Rechner zeigt das Verhältnis und welche WCAG-Stufen jedes Farbpaar besteht.

Frequently asked questions

Was ist WCAG und welche Kontrastanforderungen gibt es?
WCAG (Web Content Accessibility Guidelines) ist der Standard für Web-Barrierefreiheit. Die Kontrastanforderungen: Stufe AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt fett). AAA (strenger) verlangt 7:1 bzw. 4.5:1. Die meisten Sites zielen auf AA.
Wie wird das Kontrastverhältnis berechnet?
Durch Vergleich der relativen Leuchtdichte zweier Farben: Verhältnis = (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere und L2 die dunklere Farbe ist. Weiß auf Schwarz ist 21:1 (das Maximum). Reines Rot (#FF0000) auf reinem Schwarz sind nur 5.25:1 – Rot wird optisch dunkler wahrgenommen, als man erwarten würde.
Warum wirken manche Farbpaare in Ordnung, bestehen den Test aber nicht?
Ihre Augen passen sich dem Kontext an. Grau-auf-Grau kann jemandem mit perfekter Sicht bei gutem Licht lesbar erscheinen und gleichzeitig für Nutzer mit Sehschwäche, älteren Monitoren, Sonnenblendung oder Farbenblindheit versagen. WCAG-Verhältnisse sind Mindestwerte, die für ein möglichst breites Publikum funktionieren – kein „sieht für mich ok aus“-Standard.
Und bei Nicht-Text-Elementen?
WCAG 2.1 ergänzte die Richtlinie 1.4.11: UI-Komponenten und grafische Objekte brauchen 3:1 Kontrast gegenüber angrenzenden Farben. Dazu zählen Formularrahmen, Icons, Diagramme und Fokusindikatoren. Dezente hellgraue Rahmen auf weißem Hintergrund fallen durch – ein häufiges Problem in modernen minimalistischen Designs.