Farbkontrastprüfer

Farben prüfen

Teste Farbkombinationen, um sicherzustellen, dass sie den WCAG-Zugänglichkeitsstandards für Textlesbarkeit entsprechen.

1.00:1

Kontrast

Nicht bestanden

Sehr schlecht

Normaler Text

AA (4.5:1)

AAA (7:1)

Großer Text

AA (3:1)

AAA (4.5:1)

Textfarbe

Hintergrundfarbe

Schnelle Lösungen

Vorschautitel

Der schnelle braune Fuchs springt über den faulen Hund

Kleiner Textbeispiel (12px)

Text

#000000

Hintergrund

#2596be

WCAG-Standards

Stufe AA

Minimales Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Erforderlich für die meisten Websites.

Stufe AAA

Erweitertes Kontrastverhältnis von 7:1 für normalen Text und 4,5:1 für großen Text. Empfohlen für optimale Zugänglichkeit.

Unzureichender Kontrast für alle Textgrößen - entspricht nicht den WCAG-Standards.

Berechne das Kontrastverhältnis von Text- und Hintergrundfarben.

Wähle eine Farbe mit dem Farbselektor für Text- und Hintergrundfarbe oder gib eine Farbe im RGB-Hexadezimalformat ein (z.B. #259 oder #2596BE). Du kannst den Schieberegler anpassen, um die Farbe auszuwählen. Die Web Content Accessibility Guidelines (WCAG) haben eine spezifische Richtlinie, um herauszufinden, ob Text für sehende Nutzer lesbar ist. Dieses Kriterium verwendet einen bestimmten Algorithmus, um Farbkombinationen in vergleichbare Verhältnisse zu überführen. Mit dieser Formel gibt WCAG an, dass ein Farbkontrastverhältnis von 4,5:1 zwischen Text und Hintergrund für normalen (Fließ-)Text ausreichend ist, und großer Text (18+ pt normal oder 14+ pt fett) sollte mindestens ein Kontrastverhältnis von 3:1 haben.

Hauptmerkmale

Echtzeit-Kontrastverhältnisberechnung
WCAG AA & AAA Konformitätsprüfung
HSL-Schieberegler zur Feinabstimmung
Mehrere Vorschauformate

Erweiterte Werkzeuge

Automatische Farbkorrektur
Text- und Hintergrundbeispiele
Farbnamen-Erkennung
Ergebnisse exportieren

Häufig gestellte Fragen

Für WCAG AA braucht normaler Text ein Kontrastverhältnis von mindestens 4,5:1, großer Text (18 pt oder 14 pt fett) mindestens 3:1.

WCAG AAA verlangt höhere Kontrastverhältnisse: 7:1 für normalen Text und 4,5:1 für großen Text, im Vergleich zu 4,5:1 und 3:1 bei AA.

Nutze die automatische Korrektur, um Text- oder Hintergrundfarbe anzupassen und dabei deine Designidee zu erhalten. Oder stelle die Farben manuell mit den HSL-Schiebereglern ein: Visuelle Hinweise zeigen dir die optimalen Bereiche für AA und AAA.

Die grünen Bereiche und die AA/AAA-Markierungen zeigen, wo die WCAG-Anforderungen erfüllt sind. Die Richtungshinweise (Heller/Dunkler) führen dich bei deiner aktuellen Farbkombination zu einem besseren Kontrast.

Ja, du kannst beliebige Hex-Farbcodes eingeben oder eigene Farben mit dem Farbwähler auswählen. Die URL aktualisiert sich automatisch, sodass du bestimmte Farbkombinationen teilen kannst.