Farbkontrast-Checker: WCAG AA/AAA Barrierefreiheit | Kostenlos

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.

A Ja, absolut. WCAG AA verlangt 4,5:1 für normalen Text unter 18px, aber nur 3:1 für großen Text (18px fett oder 24px normal). AAA fordert 7:1 für normalen und 4,5:1 für großen Text. Wenn Ihre 32px-Überschrift 4,0:1 erreicht, besteht sie AA, fällt aber bei AAA durch. Unser Tool zeigt beide Schwellen sofort an, damit Sie entscheiden können. Praxistipp: Streben Sie AA für Fließtext und AAA für Überschriften an – größere Schrift macht die höhere Ratio leichter erreichbar.

A Monitorkalibrierung und Paneltyp beeinflussen die Darstellung, aber das Verhältnis ist reine Mathematik. Ein 4,5:1-Bestand bedeutet, dass der Luminanzunterschied real ist, nicht nur gefühlt. Wirkt es trotzdem blass, liegt das meist an der Helligkeit, nicht am Kontrast. Teste auf einem zweiten Gerät oder passe das Farbprofil an. Tipp aus der Praxis: Stelle in den Systemeinstellungen auf sRGB um – das nutzen die meisten Webdesigner als Ziel, und du bekommst ein ehrlicheres Bild davon, wie deine Palette beim Durchschnittsnutzer wirkt.