🌗 Farbkontrast-Prüfer (WCAG AA / AAA)
Überprüfe sofort, ob deine Text-Hintergrund-Farbkombination die WCAG 2.x AA- oder AAA-Barrierefreiheitsstandards erfüllt — direkt im Browser, kostenlos, ohne dass Daten dein Gerät verlassen. Wähle oder tippe eine HEX-Farbe, sieh das genaue Kontrastverhältnis und erhalte klare Bestanden/Nicht-bestanden-Badges für Normaltext, großen Text und beide Konformitätsstufen.
Über
Die WCAG-Kontrastverhältnisformel (Web Content Accessibility Guidelines) berechnet die relative Leuchtdichte jeder Farbe nach dem IEC 61966-2-1 sRGB-Standard und ermittelt dann, um wie viel heller eine Farbe gegenüber der anderen ist. Ein Verhältnis von 4,5:1 oder höher erfüllt AA für Normaltext (16 px), 7:1 oder höher erfüllt AAA. Großer Text (24 px oder 18,67 px fett) hat niedrigere Schwellenwerte: 3:1 für AA und 4,5:1 für AAA. Dieses Tool führt den vollständigen WCAG 2.x-Algorithmus ausschließlich in deinem Browser aus — kein Server, kein Konto, kein Tracking. Ergebnisse werden lokal gespeichert, damit dein letztes Farbpaar beim nächsten Besuch bereit ist.
Verwendung
- Wähle deine Textfarbe mit dem Farbwähler oder tippe einen HEX-Code (z. B. #1a2b3c) in das Feld Textfarbe.
- Wähle deine Hintergrundfarbe genauso im Feld Hintergrundfarbe. Mit der Tauschen-Schaltfläche kannst du beide Farben schnell wechseln.
- Lies das groß angezeigte Kontrastverhältnis und prüfe die vier Bestanden/Nicht-bestanden-Badges: AA und AAA für Normaltext und großen Text.
- Sieh dir im Abschnitt Live-Vorschau an, wie dein Text auf dem gewählten Hintergrund tatsächlich aussieht, bevor du dein Design abschließt.
Häufige Fragen
- Ist dieser WCAG-Kontrast-Prüfer kostenlos?
- Ja, völlig kostenlos — ohne Anmeldung, ohne Bezahlschranke und ohne Nutzungslimits. Seite öffnen und sofort mit der Farbprüfung beginnen.
- Funktioniert es offline oder ohne Internetverbindung?
- Ja. Alle Berechnungen laufen vollständig im Browser per JavaScript. Sobald die Seite geladen ist, kannst du die Internetverbindung trennen — das Tool läuft weiter. Es werden keine Daten an einen Server gesendet.
- Sind meine Farbdaten privat? Wird irgendetwas hochgeladen?
- Deine Farben verlassen nie deinen Browser. Keine Analyse der eingegebenen Farben, kein Hochladen, keine Weitergabe an Dritte. Dein letztes Farbpaar wird nur im localStorage deines Browsers gespeichert.
- Was ist der Unterschied zwischen WCAG AA und AAA?
- AA ist der Mindeststandard, den die meisten Vorschriften verlangen (z. B. ADA, EN 301 549). Normaltext benötigt ein Verhältnis von 4,5:1; großer Text (24 px oder fett 18,67 px) benötigt 3:1. AAA ist erweiterte Barrierefreiheit: 7:1 für Normaltext und 4,5:1 für großen Text. Strebe in allen Produktionsdesigns mindestens AA an.
- Kann ich Farben mit 3-stelliger HEX-Kurzform wie #fff prüfen?
- Ja. Das Tool akzeptiert sowohl 3-stellige Kurzformen (#rgb) als auch vollständige 6-stellige (#rrggbb) HEX-Codes. Einfach die Farbe eingeben oder einfügen — der Prüfer erweitert und validiert sie automatisch.