Farbkontrast-Pruefer
Testen Sie die WCAG 2.1 AA/AAA-Kontrastkonformitat fuer barrierefreies Webdesign
Farbkontrast-Pruefer
Live-Vorschau
Barrierefreie Alternativen
Alle Kontraststufen bestanden! Keine Vorschlaege noetig.
WCAG 2.1 Anforderungen
| Stufe | Normal | Gross |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Funktionen
WCAG 2.1 Konformitat
Testet AA- und AAA-Stufen fuer normalen und grossen Text gemaess den offiziellen WCAG 2.1-Richtlinien
Live-Vorschau
Sehen Sie Ihre Farbkombination in Echtzeit mit Beispieltext in verschiedenen Groessen
Intelligente Vorschlaege
Erhalten Sie automatisch barrierefreie Farbalternativen, wenn Ihre Kombination die Kontrastanforderungen nicht erfuellt
Datenschutz zuerst
Alle Berechnungen erfolgen lokal in Ihrem Browser, keine Daten werden an Server gesendet
Wie benutzt man es?
Farben waehlen
Geben Sie Vordergrund- (Text) und Hintergrundfarben mit dem Farbwaehler oder HEX-Eingabefeldern ein.
Ergebnisse pruefen
Sehen Sie das Kontrastverhaltnis und den WCAG AA/AAA-Konformitatsstatus fuer normalen und grossen Text.
Vorschlaege anwenden
Wenn der Kontrast nicht ausreicht, klicken Sie auf eine vorgeschlagene barrierefreie Farbalternative, um sie sofort anzuwenden.
Haeufig gestellte Fragen
Was ist der Farbkontrast-Pruefer?
Ein Tool, das Ihnen sagt, ob Ihre Text- und Hintergrundfarben die WCAG 2.1-Barrierefreiheitsstandards erfuellen. Waehlen Sie zwei Farben und sehen Sie sofort, ob sie die AA- und AAA-Stufen fuer normalen und grossen Text bestehen. Bei Nichtbestehen schlaegt das Tool barrierefreie Alternativen vor.
Warum Kontrast wichtig ist
Schlechter Farbkontrast ist eines der haeufigsten Barrierefreiheitsprobleme im Web. Es betrifft Menschen mit Sehschwaeche, Farbenblindheit und sogar Nutzer bei hellem Sonnenlicht. WCAG-Standards zu erfuellen ist nicht nur gute Praxis, sondern oft gesetzlich vorgeschrieben.
So funktioniert es
Geben Sie Vordergrund- und Hintergrundfarbe per HEX-Code oder Farbwaehler ein. Das Tool berechnet sofort das Kontrastverhaltnis und zeigt Bestanden oder Nicht bestanden fuer jede WCAG-Stufe. Bei zu niedrigem Kontrast pruefen Sie die Vorschlaege fuer barrierefreie Alternativen.
Tipps fuer Designer
Testen Sie Ihre Farbpalette frueh im Designprozess, nicht erst nach Fertigstellung. Dunkler Text auf hellem Hintergrund funktioniert meistens gut. Vermeiden Sie es, Informationen nur ueber Farbe zu vermitteln.
Datenschutz
Alles laeuft in Ihrem Browser. Keine Farbdaten werden an Server gesendet. Kein Konto, kein Tracking.