1.4.11 Nicht-Text-Kontrast

Visuelle Elemente, die zur Bedienung (z. B. Buttons), zur Zustandsanzeige (z. B. Fokus, Fehler) oder zur Informationsvermittlung (z. B. Icons) dienen, müssen einen Kontrast von mindestens 3:1 gegenüber angrenzenden Farben aufweisen.

• Viele Nutzer mit eingeschränktem Sehvermögen, Farbenblindheit oder kognitiven Einschränkungen können farbliche UI-Elemente schwer erkennen.
• Ohne ausreichenden Kontrast sind Buttons, Checkboxen, Icons oder Fokusmarkierungen nicht sichtbar – insbesondere beim Keyboard-Fokus.

G195 – Buttons, Icons, grafische Links: mind. 3:1 Kontrast zum Hintergrund

Beispiel (gute Sichtbarkeit eines Icons):

<button>
  <svg width="24" height="24" fill="#222"><!-- Icon --></svg>
  Speichern
</button>

#222 auf weißem Hintergrund → Kontrast > 15:1

Beispiel (schlechter Kontrast):

.icon {
  fill: #bbb; /* zu hell auf Weiß → nur ca. 2.3:1 */
}

Fokus-Indikator sichtbar halten (z. B. outline, border)

Beispiel:

button:focus {
  outline: 2px solid #005fcc;
}

Kontrast #005fcc auf weißem Hintergrund ≈ 4.5:1

Fehler:

button:focus {
  outline: none;
}

Kein Fokus sichtbar → Verstoß gegen 1.4.11 und auch 2.4.7

Formelemente: Eingabefelder, Checkboxen, Radio-Buttons

Rahmenfarbe von Input-Feldern oder Checkboxen muss deutlich vom Hintergrund unterscheidbar sein (≥ 3:1)

Beispiel:

input[type="text"] {
  border: 1px solid #333; /* kontrastreich */
}

G183 - Stelle sicher, dass UI-Komponenten nicht nur durch Farbe, sondern auch durch Form oder Text unterscheidbar sind
G174 - Erlaube Nutzern, Kontraste oder Farben anzupassen (Dark Mode, Designmodus)
G195 - Verwende kontrastreiche Icons oder SVGs mit definierten Farben
G18 - Prüfe den Kontrast auch in Hover/Fokus-Zuständen (nicht nur im Standard-Zustand)

• Fokusrahmen hat keinen ausreichenden Kontrast oder ist nicht sichtbar
• Placeholder-Text oder Symbol hat zu wenig Kontrast (z. B. #ccc auf Weiß)
• Eingabefeld mit sehr hellgrauer Umrandung auf weißem Hintergrund
• Interaktive Icons (z. B. "X"-Symbol zum Schließen) sind zu kontrastarm