Contrast-Buddy

WCAG 2.1 Kontrast-Checker

Farbeingabe

Manuell Farbrad

Textfarbe

Hintergrundfarbe

Live-Vorschau

Beispieltext

Dieser Text zeigt das Kontrastverhältnis

Kontrast: —

Status: —

Farbvorschläge

Willkommen bei Contrast-Buddy!

Dieses Tool hilft Ihnen dabei, Farbkontraste nach den WCAG 2.1 Richtlinien zu überprüfen und zu optimieren, um barrierefreie Websites zu erstellen.

🚀 Schnellstart

Manuelle Eingabe

Geben Sie Ihre Textfarbe ein (z.B. #000000)
Geben Sie Ihre Hintergrundfarbe ein (z.B. #ffffff)
Das Kontrastverhältnis wird automatisch berechnet
Nutzen Sie die Farbvorschläge zur Optimierung

Farbrad-Modus

Wechseln Sie zum Farbrad-Modus
Wählen Sie eine Farbtheorie (Komplementär/Triadisch)
Klicken Sie auf das Farbrad, um Farben auszuwählen
Weisen Sie Farben als Text- oder Hintergrundfarbe zu

📊 WCAG 2.1 Standards verstehen

AAA (7:1)

Höchster Standard: Ideal für alle Texte, besonders wichtig für längere Inhalte.

Normaler Text: ≥ 7:1
Großer Text: ≥ 4.5:1

AA (4.5:1)

Mindeststandard: Erfüllt die gesetzlichen Anforderungen für Barrierefreiheit.

Normaler Text: ≥ 4.5:1
Großer Text: ≥ 3:1

Nicht konform

Unzureichend: Erfüllt nicht die Mindestanforderungen für Barrierefreiheit.

Kontrast < 3:1
Nicht für öffentliche Websites geeignet

✨ Funktionen im Detail

Die Live-Vorschau zeigt Ihnen sofort, wie Ihre Farbkombination aussieht. Sie können verschiedene Textgrößen und -stile testen.

Das Tool generiert automatisch Farbvorschläge basierend auf:

Farbtheorie (Komplementärfarben, Triadische Farben)
WCAG-Konformität
Ihrer zuletzt geänderten Farbe

Das Farbrad hilft bei der Auswahl harmonischer Farbkombinationen:

Komplementärfarben: Gegenüberliegende Farben für hohen Kontrast
Triadische Farben: Drei gleichmäßig verteilte Farben für ausgewogene Paletten

Kopieren Sie die optimierten Farbwerte direkt als CSS-Code in Ihre Zwischenablage. Der Code ist sofort einsatzbereit für Ihre Website.

💡 Profi-Tipps

Das sollten Sie tun:

Streben Sie AAA-Standard an, wenn möglich
Testen Sie mit echten Inhalten
Berücksichtigen Sie verschiedene Bildschirmgrößen
Nutzen Sie das Farbrad für harmonische Paletten

Das sollten Sie vermeiden:

Verlassen Sie sich nicht nur auf Farbe zur Informationsvermittlung
Verwenden Sie keine zu ähnlichen Farbtöne
Ignorieren Sie nicht die Umgebungsbeleuchtung
Vergessen Sie nicht mobile Geräte

Rechtliche Anforderungen

In Deutschland und der EU sind barrierefreie Websites für öffentliche Stellen seit 2018 gesetzlich vorgeschrieben. Auch private Unternehmen sollten die WCAG-Richtlinien befolgen, um allen Nutzern den Zugang zu ermöglichen.

Referenzen: BITV 2.0, EU-Richtlinie 2016/2102, WCAG 2.1 Level AA