Farbkontrast-Checker: WCAG AA/AAA Barrierefreiheit | Kostenlos

A Ausreichender Kontrast stellt sicher, dass Text für alle Nutzer lesbar ist.

A Ja.

A Unser kostenloser Farbkontrast-Prüfer ist für feste Farbkombinationen ausgelegt. Wenn Sie Text über einem Farbverlauf verwenden, identifizieren Sie den Punkt im Verlauf, an dem Ihre Textfarbe den *geringsten* Kontrast aufweist. Sie sollten Ihre Vordergrund-Textfarbe sowohl mit den hellsten als auch den dunkelsten Abschnitten des Farbverlaufshintergrunds testen, um die WCAG AA- oder AAA-Konformität im gesamten Design sicherzustellen.

A Wenn Ihre Markenfarben den WCAG-Kontrast nicht bestehen, müssen Sie entweder Ihre Vordergrund- (Text) oder Hintergrundfarbe anpassen. Unser kostenloser Farbkontrast-Checker hilft Ihnen, schnell zu iterieren. Modifizieren Sie den Farbton, die Sättigung oder die Helligkeit der fehlerhaften Farbe geringfügig. Geben Sie die neuen Farbcodes erneut in das Tool ein und testen Sie sofort. Streben Sie das minimale Bestehensverhältnis an, während Sie so nah wie möglich an Ihrer Markenpalette bleiben, um die Lesbarkeit für alle Benutzer zu gewährleisten.

A Um die HEX-Farbcodes Ihrer Webseite zu finden, können Sie die Entwicklertools des Browsers nutzen. In den meisten Browsern (z.B. Chrome oder Firefox) klicken Sie mit der rechten Maustaste auf ein Element und wählen 'Untersuchen'. Das 'Elemente'- oder 'Styles'-Panel zeigt die CSS-Regeln, einschließlich der Farbeigenschaften. Alternativ können Sie eine Browser-Erweiterung wie ein 'Farbpipette'-Tool verwenden, um Farben direkt vom Bildschirm aufzunehmen und deren HEX-, RGB- oder HSL-Werte in unseren kostenlosen Farbkontrast-Checker einzugeben.

A Nein, dieses Tool funktioniert nur mit einfarbigen Farbpaaren. Für Bilder brauchen Sie andere Software. Machen Sie einen Screenshot des Bereichs und nehmen Sie mit einem Pipettenwerkzeug die hellsten und dunkelsten Pixel unter dem Text auf. Testen Sie beide gegen Ihre Textfarbe. Falls einer davon durchfällt, hilft oft eine halbtransparente Überlagerung hinter dem Text — etwa 40% schwarz ist ein guter Start.

A Ja, du kannst Farben in HEX, RGB oder HSL eingeben. Füge den Wert einfach in das Feld ein – das Tool erkennt das Format automatisch. Zum Beispiel funktioniert 'rgb(255, 0, 0)' oder 'hsl(0, 100%, 50%)' sofort. Praktisch, wenn du Farben direkt aus CSS-Code übernimmst.

A Ja. Geben Sie zuerst das Standardpaar ein, dann tauschen Sie die Hover-Farben separat aus. WCAG verlangt, dass Hover- und Fokus-Zustände ebenfalls die Mindestkontraste erfüllen – nicht nur der statische Text. Wenn Ihr Button-Hintergrund zum Beispiel von #007bff auf #0056b3 wechselt, testen Sie beide gegen die weiße Schrift. Ein häufiger Fehler: Designer hellen Hover-Hintergründe zu stark auf, was den Kontrast killt.

A Auch Nicht-Text-Elemente brauchen ausreichend Kontrast. Die WCAG verlangt 3:1 für Bedienelemente und grafische Objekte wie Icons, Buttons und Formularrahmen. Prüfen Sie hier Ihre Icon-Farbe gegen den Hintergrund. Liegt das Verhältnis unter 3:1, erfüllt es nicht AA. Mein Tipp: Nutzen Sie für Icons dieselbe Farbe wie für den Text – dann bestehen sie meist.

A Vertrauen Sie Ihren Augen nicht – sie sind schlecht darin, Kontrast zu beurteilen. Zwei Farben, die Ihnen fein erscheinen, schaffen vielleicht nur ein 2,5:1-Verhältnis, was selbst WCAG AA nicht besteht. Dieses Tool berechnet mathematisch unter Berücksichtigung der menschlichen Farbwahrnehmung und Luminanz. Beispiel: Hellgrau #C0C0C0 auf weißem #FFFFFF wirkt lesbar, erreicht aber nur 1,6:1. Prüfen Sie immer mit unserem Bestehen/Nicht-Bestehen-Indikator.