Farbkontrastprüfer
Prüfen Sie den Farbkontrast sofort gemäß den WCAG 2.1-Richtlinien. Stellen Sie sicher, dass Ihr Text lesbar ist und Ihr Design für alle Personen barrierefrei ist. Kostenlos und einfach zu bedienen.
Textvorschau
Dies ist Beispieltext zur Veranschaulichung des Farbkontrasts. Nutzen Sie ihn, um die Lesbarkeit Ihrer Farbkombination zu prüfen.
Dies ist größerer fetter Text (18pt).
Normaler Text
Großer Text (18pt+ oder 14pt+ fett)
Wie unser Kontrastprüfer funktioniert
- 1Geben Sie Ihre Farben ein: Geben Sie die Vordergrundfarbe (Text) und Hintergrundfarbe mithilfe des HEX-Codes (z. B. #FFFFFF) ein. Alternativ können Sie den praktischen Farbwähler zur intuitiven Auswahl nutzen.
- 2Sehen Sie sofortige Ergebnisse an: Das Tool berechnet das Kontrastverhältnis sofort und zeigt eine Echtzeitvorschau des Textaussehens an.
- 3Überprüfen Sie die Konformität: Wir geben klare „Bestanden“- oder „Fehlgeschlagen“-Angaben für die WCAG-Stufen AA und AAA für normalen Text und großen Text an – so wissen Sie genau, ob Sie den Anforderungen entsprechen.
Warum Barrierefreiheit wichtig ist
Breiteres Publikum erreichen
Etwa 1 von 12 Männern und 1 von 200 Frauen leidet an einer Form von Farbsinnsstörung. Durch die Sicherstellung eines hohen Kontrasts machen Sie Ihren Inhalt nutzbar für sie sowie für Menschen mit Sehbehinderung oder altersbedingtem Sehverlust.
Benutzererfahrung für alle verbessern
Guter Kontrast ist nicht nur für sehbehinderte Personen wichtig. Er erhöht die Lesbarkeit für alle – insbesondere unter nicht idealen Bedingungen, wie auf dunklen Bildschirmen, in hellem Sonnenlicht oder bei Multitasking. Klarer Inhalt ist eine gute betriebswirtschaftliche Praxis.
Verständnis der WCAG-Bewertungen
Stufe AA (Standard)
- Normaler Text: Erfordert ein Kontrastverhältnis von mindestens **4,5:1**.
- Großer Text (18pt+ oder 14pt+ fett): Erfordert ein Kontrastverhältnis von mindestens **3:1**.
Dies ist das Ziel für die meisten Websites und Anwendungen. Es bietet ausreichenden Kontrast für Nutzer mit mäßiger Sehbehinderung oder Farbsinnsstörungen, um Inhalte ohne Hilfstechnologien lesen zu können.
Stufe AAA (Erweitert)
- Normaler Text: Erfordert ein Kontrastverhältnis von mindestens **7:1**.
- Großer Text (18pt+ oder 14pt+ fett): Erfordert ein Kontrastverhältnis von mindestens **4,5:1**.
Diese Stufe bietet erweiterte Barrierefreiheit und macht Inhalte für ein breiteres Publikum lesbar – einschließlich Personen mit schwererem Sehverlust. Obwohl dies nicht immer vorgeschrieben ist, ist das Erreichen von AAA eine Best Practice für barrierefreie Websites.
Häufig gestellte Fragen
Was ist Farbkontrast und warum ist er wichtig?
Farbkontrast ist die Helligkeitsdifferenz zwischen einer Vordergrundfarbe (z. B. Text oder Schaltflächen) und ihrem Hintergrund. Er ist entscheidend für die Lesbarkeit. Ein hoher Kontrast stellt sicher, dass sehbehinderte Personen (z. B. mit Farbsinnsstörungen oder Sehbehinderung) Ihren Inhalt effektiv wahrnehmen und mit ihm interagieren können.
Müssen Logos und begleitender Text diesen Standards entsprechen?
Nein, die WCAG-Richtlinien sehen Ausnahmen für Text vor, der Teil von Logos oder Markennamen ist, sowie für rein dekorative oder inaktive UI-Komponenten (z. B. deaktivierte Schaltflächen). Allerdings sollten alle informativen Texte die Kontrastanforderungen erfüllen.
Wie behebe ich einen niedrigen Kontrast?
Wenn Ihre Farbkombination fehlschlägt, müssen Sie die Helligkeitsdifferenz erhöhen. Sie können helle Farben heller machen (nahe an Weiß) oder dunkle Farben dunkler (nahe an Schwarz). Nutzen Sie die Echtzeitvorschau unseres Tools, um zu experimentieren, bis Sie eine Kombination finden, die sowohl den Barrierefreiheitstests besteht als auch Ihrer Designästhetik entspricht.
100% privat und sicher
Dieser Kontrastprüfer läuft vollständig in Ihrem Browser. Keine Daten, Farben oder Informationen werden an unsere Server gesendet. Ihre Arbeit bleibt vollständig privat für Sie.