Zum Inhalt springen
Labs // COLOR CONTRAST CHECKER

Farbkontrast-Checker

Prüfe Farbkontraste für Barrierefreiheit. Erhalte WCAG-Konformitätsindikatoren und Verbesserungsvorschläge.

Kontrastverhältnis: 21.00:1
Perfect contrast

Normaler Text (14px+)

WCAG AA
Bestanden
WCAG AAA
Bestanden

Großer Text (18px+)

WCAG AA
Bestanden
WCAG AAA
Bestanden

Vorschau

Large Heading Text
Medium Heading Text
Normal body text. This is how your content will look with these colors. Make sure the contrast is sufficient for readability.
Small text example with current color combination.

Best Practices

  • Ziele auf WCAG AA-Mindeststandards (4.5:1 für normalen Text)
  • WCAG AAA (7:1) für bessere Zugänglichkeit
  • Teste mit verschiedenen Hintergründen und Beleuchtungen
  • Berücksichtige verschiedene Sehbehinderungen
  • Verwende nicht nur Farbe zur Informationsübertragung

Relevanz für

  • Website-Design und Typografie
  • Mobile Apps und User Interfaces
  • Print-Design und Marketing-Materialien
  • Accessibility-Compliance-Prüfungen
  • Brand Guidelines und Design Systems
Farbkontrast-Checker | Pixel & Process | Pixel & Process