ImageColorPicker.com

Farbkontrastprüfer

Teste das Kontrastverhältnis zwischen Vorder- und Hintergrundfarben, um die Zugänglichkeit sicherzustellen.

Farben prüfen

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

16.89 zu 1
Kontrast
AAA
Textergebnis
Super

Verglichen: #000000 auf #F5E4D0

Text

16px, Normal (400)

Zählt als normaler Text.

  • AA (WCAG 1.4.3): mindestens 4.5:1

    Bestanden

  • AAA (WCAG 1.4.6): mindestens 7:1

    Bestanden

UI-Komponenten und Grafiken

Icons, Rahmen von Eingabefeldern, Fokusanzeigen und andere Teile, die man sehen muss, um die Oberfläche zu bedienen.

  • AA (WCAG 1.4.11): mindestens 3:1

    Bestanden
16.89 zu 1. Text: besteht AA, besteht AAA. UI-Komponenten: besteht.
So wird geprüft
Verglichene Farben (nach dem Mischen)
Text #000000 auf Hintergrund #F5E4D0
Relative Luminanz
Text 0.0000, Hintergrund 0.7945
Formel
(L1 + 0.05) / (L2 + 0.05) wobei L1 die Luminanz der helleren und L2 die der dunkleren Farbe ist.
Genaues Verhältnis
16.8906 zu 1, angezeigt als 16.89 zu 1. Der angezeigte Wert wird abgeschnitten, nicht gerundet, damit er nie besser aussieht, als er ist. Mit der Anforderung verglichen wird der genaue Wert.

Textgröße: 16px, Normal (400)

Zählt als normaler Text. Großer Text ist mindestens 24px (18pt) groß oder bei fetter Schrift (Stärke 700 oder mehr) mindestens 18,67px (14pt). Größen werden abgeschnitten, nicht gerundet angezeigt.

Zählt als normaler Text. Großer Text ist mindestens 24px (18pt) groß oder bei fetter Schrift (Stärke 700 oder mehr) mindestens 18,67px (14pt). Größen werden abgeschnitten, nicht gerundet angezeigt.

Aa
Vorschautitel

Der schnelle braune Fuchs springt über den faulen Hund

Kleiner Textbeispiel (12px)

Text
#000000
Hintergrund
#f5e4d0

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.

Farbkontrastprüfer

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.