Farbkontrast-Checker: WCAG AA/AAA Barrierefreiheit | Kostenlos

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.

A Sonnenlicht ändert die Mathematik nicht, aber es ändert, was sich angenehm anfühlt. WCAG AA mit 4,5:1 ist die Untergrenze, doch draußen willst du mehr Puffer. Versuch, für alles, was du länger als ein paar Sekunden liest, 7:1 (AAA) anzustreben. Für schnelle Blicke auf Icons oder Zeitstempel reicht 3:1 vielleicht, aber teste deine Palette auf einem echten Gerät bei maximaler Helligkeit. Ein Farbpaar mit 2,9:1 wirkt im Freien unsichtbar, selbst wenn es auf deinem Monitor besteht.

A Kein Limit, keine Anmeldung, keine Tagesgrenze. Ob 5 oder 500 Paare – jedes Ergebnis erscheint in unter einer Sekunde mit exaktem Kontrastverhältnis und AA/AAA-Urteil. Nichts wird gespeichert, deine Markenfarben bleiben also im Browser. Ein Kollege hat 40 Kombinationen durchprobiert, bis der Akzentton endlich barrierefrei war. Leg die Seite als Lesezeichen ab und nutz sie wie einen Notizzettel für Paletten.

A Diese Methode schlägt fast immer fehl. Ein Schwarzwert bei halber Deckkraft über weißem Grund ergibt ein helleres Grau, das die WCAG-Vorgaben oft unterschreitet. Teste immer den tatsächlich entstehenden Mischton direkt im Prüfer. Trage einfach den kombinierten Farbwert ein, um sofort ein präzises Ergebnis zu erhalten.

A Meistens nicht, es sei denn, Sie erhöhen die Helligkeit deutlich. Ein Ton wie #999999 auf #121212 liefert nur einen Wert von 3,2:1 und fällt damit durch. Nutzen Sie lieber ein helleres #CCCCCC oder wählen Sie eine fettere Schriftart mit 700er Stärke. Unser Tool zeigt Ihnen die neue Kennzahl sofort an.