1.4.3: Kontrast (Minimum)

Der Kontrast zwischen Text und Hintergrund muss mindestens 4.5:1 betragen (für normalen Text), außer bei:

• Großem Text: mindestens 3:1
• Dekorativem Text oder inaktiven Elementen: keine Anforderung
• Logos oder Markennamen: ausgenommen

• Viele Menschen haben Schwierigkeiten, hellgrauen Text auf weißem Hintergrund zu lesen.
• Niedriger Kontrast erschwert die Lesbarkeit besonders bei:
  • Sonnenlicht
  • Bildschirm mit geringer Helligkeit
  • Farbenblindheit

G18 – Verwende einen Farbkontrast von mindestens 4.5:1 für normalen Text

body {
  color: #222222;          /* Sehr dunkles Grau */
  background-color: #ffffff;
}

G145 – Verwende für großen Text (mind. 24 px oder 18.66 px fett) einen Kontrast von mindestens 3:1

h1 {
  font-size: 2rem;         /* entspricht 32px bei 16px root */
  color: #666666;
}

#666 auf Weiß → Kontrastverhältnis ≈ 5:1

WebAIM Contrast Checker - Manuelle Eingabe von Farbwerten

Tanaguru Contrast Finder - Alternative Farbkombis suchen

axe DevTools - Chrome-Erweiterung mit Live-Test

ColorZilla (Browser-Plugin) - Pickt Farbe direkt von der Seite

G148 - Stelle Kontrast für nicht-textuelle Inhalte (Symbole, Grafiken) ebenfalls sicher
G174 - Erlaube Nutzern die individuelle Anpassung der Farben (z. B. Dark Mode, Themes)
G79 - Verwende Texteffekte (Schatten, Umrandung) nur, wenn Kontrast weiterhin passt
G142 - Achte auf Kontrast auch in interaktiven Zuständen (Hover, Fokus)

• Textfarbe und Hintergrundfarbe haben ein Kontrastverhältnis < 4.5:1
• Großer Text (z. B. Überschriften) mit Kontrast < 3:1
• Placeholder-Text hat zu wenig Kontrast
• Fehlermeldungen (z. B. in Rot) haben nicht ausreichenden Kontrast zum Hintergrund