NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →Kontrastprüfung (WCAG AA / AAA-Bewertungen)
Wähle eine Vordergrund- und Hintergrundfarbe aus, um das WCAG-Kontrastverhältnis zu berechnen. Live-Textvorschau und vier Bewertungsabzeichen (AA normal, AA groß, AAA normal, AAA groß) aktualisieren sich in Echtzeit.
Große Überschrift (24px+ oder 18,66px+ fett)
Normaler Fließtext für alltägliche Absätze.
Kleinerer Text für Bildunterschriften, Fußnoten und Beschriftungen.
Kontrastverhältnis
17.85:1
✓WCAG AA — Normaler Text
✓WCAG AA — Großer Text
✓WCAG AAA — Normaler Text
✓WCAG AAA — Großer Text
Verwandte Tools
Wie es funktioniert
Wie das Kontrastverhältnis funktioniert
WCAG (Web Content Accessibility Guidelines) definiert Kontrast als das Verhältnis zwischen der relativen Leuchtdichte zweier Farben. Die Formel linearisiert jeden sRGB-Kanal, gewichtet sie nach der Empfindlichkeit des menschlichen Auges (R 0,2126, G 0,7152, B 0,0722) und berechnet dann (hellere + 0,05) / (dunklere + 0,05). Das Ergebnis liegt zwischen 1:1 (identisch) und 21:1 (Schwarz auf Weiß).
Wir berechnen dies in deinem Browser mit der offiziellen WCAG-2.x-Formel. Die vier Bewertungsabzeichen prüfen gegen die Schwellenwerte AA (4,5:1 für normalen Text, 3:1 für großen Text) und AAA (7:1 für normalen Text, 4,5:1 für großen Text). 'Großer Text' ist 24px / 18pt oder 18,66px / 14pt fett.
Warum mindestens AA bestehen
AA ist in vielen Rechtssystemen die rechtlich durchsetzbare Ebene (US ADA, EU EN 301 549, britischer Equality Act für digitale Dienste). AA bei Fließtext nicht zu bestehen ist das häufigste Barrierefreiheitsproblem und am einfachsten während des Designs zu beheben, nicht nach dem Launch.
AAA wird für Langformlesen, Behördendienste und hochgradig kritische Benutzeroberflächen empfohlen. Es ist streng – ein Designer's erster Instinkt mit hellem Grau auf Weiß fällt oft leicht durch AAA. Wenn deine Website überwiegend schnell scannbare Inhalte bereitstellt, ziele auf AA ab; wenn du Bücher, Artikel oder kritische Informationen veröffentlichst, ziele auf AAA ab.
Häufige Fehler
'Sieht gut aus auf meinem Bildschirm.' Kalibrierte Bildschirme, fluoreszierendes Bürolicht und Smartphone-Nutzung im Freien verändern den wahrgenommenen Kontrast. Verwende das Verhältnis, nicht dein Augenurteil.
Dark Mode durch Invertieren von Hex-Codes gestalten. Invertierung ändert den Farbton und bricht den Kontrast. Teste jedes Farbpaar nach dem Wechsel der Themes erneut.
Markenrichtlinien vertrauen. Viele Markenpaletten wurden vor dem WCAG-Bewusstsein gewählt. Wenn Markenrosa auf Weiß nicht besteht, schlage ein leicht dunkleres Rosa für Fließtext vor und behalte das Original für dekorative Zwecke.
Häufige Fragen
›Was ist der Unterschied zwischen AA und AAA?
AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text. AAA verschärft auf 7:1 und 4,5:1. AAA wird empfohlen, ist aber nicht immer erreichbar.
›Was ist 'großer Text'?
WCAG definiert ihn als 18pt (24px) oder größer, oder 14pt (18,66px) und fett.
›Unterstützt dieses Tool Transparenz?
Noch nicht. Wähle die tatsächliche Farbe, die der Benutzer sieht (Vordergrund auf Hintergrund zusammengesetzt). Transparenzunterstützung kann später kommen.
›Warum besteht meine Marke nicht?
Viele Markenpaletten wurden für Ästhetik, nicht für Barrierefreiheit ausgewählt. Häufige Korrekturen: Akzentfarben abdunkeln, die als Text verwendet werden; helle Varianten für Hintergründe oder dekorative Elemente reservieren.
›Ist das Verhältnis dasselbe wie 'wahrgenommener Kontrast'?
Nein – WCAG 2.x verwendet eine vereinfachte leuchtdichtebasierte Formel. WCAG 3 (in Entwicklung) verwendet APCA, das den wahrgenommenen Kontrast besser vorhersagt, aber noch nicht standardisiert ist.
›Welches Verhältnis für Icons oder UI-Steuerelemente?
WCAG 2.1 hat ein 3:1-Minimum für Nicht-Text-Kontrast hinzugefügt (Icons, Formularelemente, Fokusindikatoren). Verwende denselben Checker – erreiche oder überschreite 3:1.
›Funktioniert das für grafische Diagramme?
Derselbe Schwellenwert gilt für benachbarte Farben, die eine Bedeutung vermitteln. Bei Datenvisualisierungen ist 3:1 zwischen benachbarten Farben das WCAG-1.4.11-Minimum.
›Werden die Daten irgendwohin gesendet?
Nein. Die Berechnung läuft lokal in deinem Browser.
Empfohlene Dienste
HinweisCloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →