Farbkontrast-Prüfer
Gib eine Vordergrund- und Hintergrundfarbe an, um das WCAG-Kontrastverhältnis mit AA- und AAA-Pass/Fail-Badges für normalen und großen Text zu prüfen.
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
So funktioniert es
Wähle eine Vordergrund- und Hintergrundfarbe mit den Farbfeldern oder gib hexadezimale Werte direkt ein. Das Tool berechnet die relative Luminanz jeder Farbe mit der WCAG 2.1-Formel — eine gewichtete Summe der sRGB-Kanäle nach der Gamma-Dekodierung — und dividiert die hellere Luminanz durch die dunklere (plus 0,05 in Zähler und Nenner zur Vermeidung der Division durch null bei reinem Schwarz). Das resultierende Kontrastverhältnis reicht von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß).
Vier WCAG-Badges zeigen Bestanden oder Nicht Bestanden: AA für normalen Text (≥ 4,5:1), AA für großen Text (≥ 3:1), AAA für normalen Text (≥ 7:1) und AAA für großen Text (≥ 4,5:1). Ein Live-Vorschau-Panel zeigt Beispielsätze in normalem und großem Text, damit du das Ergebnis visuell überprüfen kannst.
Die Berechnung läuft vollständig in deinem Browser ohne Server-Roundtrip, und jede Änderung einer der beiden Farben aktualisiert das Verhältnis und die Vorschau sofort.
Praxisbeispiel
Prüfen Sie grauen Text #767676 auf weißem Grund: Das Kontrastverhältnis beträgt exakt 4,54:1 — es besteht WCAG AA für normalen Text (das 4,5:1 verlangt), fällt aber bei AAA (7:1) durch, und die Ergebnis-Karten zeigen jeden Schwellenwert einzeln, einschließlich der gelockerten Regeln für großen Text. Der logarithmische Skalenbalken zeigt, wo das Paar zwischen 1:1 und den 21:1 von reinem Schwarz auf Weiß liegt. Die APCA-Karte gibt einen Ausblick auf die WCAG-3-Metrik, und der Tauschknopf beantwortet sofort, ob das Invertieren von Vorder- und Hintergrund hilft. Die Live-Vorschau rendert echten Text, damit Sie mit eigenen Augen urteilen.
Anwendungsfälle
- Eine Markenfarbpalette vor einem Website-Redesign auf Barrierefreiheit prüfen
- Button- und Link-Farben wählen, die auf hellem oder dunklem Theme lesbar bleiben
- WCAG 2.1 AA- oder AAA-Anforderungen für Section 508, EN 301 549 oder ADA-Konformität erfüllen
- Ein Design-Mockup prüfen, um unlesbaren Text vor Entwicklungsbeginn zu markieren
- Barrierefreiheit lehren, indem gezeigt wird, wie kleine Luminanzunterschiede große Kontrastprobleme verursachen
Häufig gestellte Fragen
- Was ist der Unterschied zwischen AA und AAA?
- WCAG definiert zwei Konformitätsstufen. AA ist das typische rechtliche Ziel: 4,5:1 für normalen Text, 3:1 für großen Text. AAA ist erweitert: 7:1 normal, 4,5:1 groß. Die meisten öffentlichen Sites streben AA an.
- Was gilt als 'großer Text'?
- Mindestens 18pt normal oder 14pt fett (ungefähr 24px / 18,66px in Browsern). Darunter gilt der strengere 4,5:1-Schwellenwert.
- Mein Kontrastverhältnis ist 4,49 — besteht es?
- Nein. Der Schwellenwert ist strikt ≥ 4,5:1 in WCAG. Das Tool rundet das angezeigte Verhältnis auf zwei Dezimalstellen, verwendet aber den vollpräzisen Wert für die Bestanden/Nicht-bestanden-Prüfung.
- Stimmt dies mit dem WebAIM-Checker überein?
- Ja — beide verwenden dieselbe WCAG 2.1-Luminanzformel, sodass die Ergebnisse auf die angezeigte Präzision identisch sind.
- Werden meine Farbwerte irgendwohin gesendet?
- Nein. Das Kontrastverhältnis wird lokal in deinem Browser aus den von dir eingegebenen Farben berechnet.