Farbkontrast-Checker

Der Farbkontrast-Checker hilft Designern, Entwicklern und Experten für Barrierefreiheit sicherzustellen, dass Farbkombinationen den WCAG 2.x Barrierefreiheitsstandards entsprechen. Ein angemessener Kontrast zwischen Text- und Hintergrundfarben ist entscheidend für die Lesbarkeit, insbesondere für Nutzer mit Sehbehinderungen oder Farbfehlsichtigkeiten.

Was ist das Farbkontrastverhältnis?

Das Farbkontrastverhältnis misst den Unterschied in der wahrgenommenen Luminanz (Helligkeit) zwischen zwei Farben. Es reicht von 1:1 (identische Farben, kein Kontrast) bis 21:1 (maximaler Kontrast: Schwarz auf Weiß). Das Verhältnis wird nach der WCAG 2.x-Formel auf Basis der relativen Luminanzwerte beider Farben berechnet.

WCAG Kontrastanforderungen

Die Richtlinien für barrierefreie Webinhalte (WCAG) definieren zwei Konformitätsstufen für den Farbkontrast:

Was zählt als "großer Text"?

WCAG definiert großen Text als mindestens 18 Point (24px) in normaler Stärke oder mindestens 14 Point (18,66px) in fetter Stärke. Großer Text hat geringere Kontrastanforderungen, da größere Zeichen von Natur aus einfacher zu lesen sind.

So verwenden Sie dieses Tool

1. Farben eingeben: Wählen Sie Vordergrund- (Text) und Hintergrundfarben über die Farbauswahl, geben Sie Hex-Codes ein oder klicken Sie auf ein Preset-Beispiel.
2. Live-Vorschau prüfen: Sehen Sie sofort, wie Ihre Farben auf echten UI-Elementen (Überschriften, Fließtext, Buttons, Links, Formularfelder) wirken.
3. Klicken Sie auf "Kontrast prüfen": Erhalten Sie das exakte Kontrastverhältnis und den WCAG-Konformitätsstatus für normalen Text, großen Text und UI-Komponenten.
4. Vorschläge anwenden: Falls Ihre Farben durchfallen, nutzen Sie die automatischen Vorschläge, um die nächste barrierefreie Alternative zu finden.

Die Ergebnisse verstehen

Kontrastverhältnis

Die Hauptzahl (z. B. 8,59:1) gibt an, wie stark sich die beiden Farben unterscheiden. Höher ist besser für die Lesbarkeit. Ein Verhältnis von mindestens 4,5:1 stellt sicher, dass die meisten Nutzer Text in normaler Größe bequem lesen können.

Gesamtbewertung

• AAA (Hervorragend): Erfüllt alle WCAG-Kriterien einschließlich der erweiterten Stufe (7:1+). Bestmögliche Barrierefreiheit.
• AA (Gut): Erfüllt die Standardanforderungen (4,5:1+). Entspricht den gesetzlichen Vorgaben in den meisten Ländern.
• AA Large (Teilweise): Reicht nur für großen Text oder UI-Komponenten aus (3:1+). Normaler Text fällt durch.
• Nicht bestanden (Schlecht): Erfüllt keine WCAG-Kontrastkriterien. Text wird für viele Nutzer schwer zu lesen sein.

Farbvorschläge

Wenn Ihre Farben die Kontrastanforderungen nicht erfüllen, schlägt das Tool die nächste barrierefreie Farbe vor, indem es die Helligkeit anpasst, während Farbton und Sättigung erhalten bleiben. Sie können die Vorschläge mit einem Klick übernehmen.

Warum Farbkontrast wichtig ist

• Rechtliche Konformität: Viele Länder schreiben die Einhaltung von WCAG AA gesetzlich vor (z. B. Barrierefreiheitsstärkungsgesetz, BFSG, ADA, Section 508).
• Nutzererfahrung: Guter Kontrast verbessert die Lesbarkeit für alle Nutzer, nicht nur für Menschen mit Behinderungen.
• SEO-Einfluss: Suchmaschinen berücksichtigen Barrierefreiheit zunehmend bei der Ranking-Erstellung.
• Reichweite: Etwa jeder 12. Mann und jede 200. Frau leidet unter einer Farbfehlsichtigkeit.

Tipps für die Wahl barrierefreier Farben

• Beginnen Sie mit ausreichendem Kontrast und verfeinern Sie dann das Design – es ist schwieriger, Kontraste nachträglich zu korrigieren.
• Vermeiden Sie farbigen Text auf farbigem Hintergrund ohne Test. Sogar Farben, die "unterschiedlich aussehen", können beim Kontrastcheck durchfallen.
• Hellgrauer Text auf weißem Hintergrund ist einer der häufigsten Barrierefreiheitsfehler.
• Nutzen Sie dieses Tool bereits während der Designphase, nicht erst beim Audit – das frühzeitige Erkennen spart viel Nacharbeit.
• Verlassen Sie sich nicht allein auf Farbe, um Informationen zu vermitteln; nutzen Sie auch Formen, Muster oder Beschriftungen.

Häufig gestellte Fragen

Was ist das Farbkontrastverhältnis?

Das Farbkontrastverhältnis misst den Unterschied in der wahrgenommenen Luminanz zwischen zwei Farben. Es reicht von 1:1 (kein Kontrast, gleiche Farbe) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß). Das Verhältnis wird nach der WCAG 2.x-Formel berechnet: (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Luminanz der helleren Farbe und L2 die der dunkleren Farbe ist.

Welches Kontrastverhältnis ist für die WCAG AA-Konformität erforderlich?

WCAG AA erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text (unter 18pt oder 14pt fett) und 3:1 für großen Text (18pt+ oder 14pt+ fett). Für Nicht-Text-UI-Komponenten und grafische Objekte liegt das Minimum bei 3:1.

Was ist der Unterschied zwischen WCAG AA und AAA?

WCAG AA ist die Standard-Konformitätsstufe, die 4,5:1 für normalen Text und 3:1 für großen Text erfordert. WCAG AAA ist die erweiterte Stufe, die 7:1 für normalen Text und 4,5:1 für großen Text erfordert. AA wird von den meisten Gesetzen gefordert, während AAA empfohlen, aber meist nicht zwingend für ganze Websites ist.

Was gilt in den WCAG-Richtlinien als großer Text?

In den WCAG-Richtlinien ist großer Text als Text definiert, der mindestens 18 Point (24px) in normaler Stärke oder mindestens 14 Point (ca. 18,66px) in fetter Stärke aufweist. Großer Text hat geringere Kontrastanforderungen.

Wie behebe ich einen zu geringen Farbkontrast?

Um einen geringen Kontrast zu beheben: (1) Verdunkeln Sie die Textfarbe oder hellen Sie den Hintergrund auf (oder umgekehrt). (2) Nutzen Sie unsere Farbvorschlagsfunktion. (3) Erhöhen Sie die Schriftgröße, um die geringeren Anforderungen für "großen Text" zu nutzen. (4) Verwenden Sie nicht nur Farbe zur Informationsvermittlung.

Gilt der Farbkontrast nur für Text?

Nein. Das WCAG 2.1 Erfolgskriterium 1.4.11 erfordert ein Kontrastverhältnis von mindestens 3:1 für Nicht-Text-Elemente wie Formularränder, Icons und essenzielle grafische Objekte. Dies betrifft Buttons, Formularfelder und Fokus-Indikatoren.

Zusätzliche Ressourcen

• WCAG 2.1: Kontrast verstehen (Minimum)
• WCAG 2.1: Kontrast verstehen (Erweitert)