Farben & Kontraste
Kontrastverhältnisse Muss
| Element | Mindest-Kontrast | WCAG-Kriterium |
|---|---|---|
| Normaler Text (< 18pt / 14pt bold) | 4.5:1 | 1.4.3 |
| Grosser Text (≥ 18pt / 14pt bold) | 3:1 | 1.4.3 |
| UI-Komponenten & grafische Objekte | 3:1 | 1.4.11 |
Farbe nicht als alleiniger Informationsträger Muss
Informationen dürfen nicht ausschliesslich durch Farbe vermittelt werden (WCAG 1.4.1). Zusätzlich müssen verwendet werden:
- Texte oder Labels
- Muster oder Symbole
- Unterstreichungen bei Links
Beispiel: Formular-Fehlermeldung
<!-- Falsch: Nur rote Farbe zeigt den Fehler -->
<input style="border-color: red">
<!-- Richtig: Farbe + Icon + Text -->
<input aria-invalid="true" aria-describedby="error-1">
<p id="error-1" role="alert">⚠ Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>Dark Mode & High Contrast Soll
Websites sollen prefers-color-scheme und prefers-contrast unterstützen. Kontrastverhältnisse müssen in allen Farbschemata eingehalten werden.
Werkzeuge zur Kontrastprüfung
- WebAIM Contrast Checker
- Stark (Figma Plugin)
- Browser DevTools → Accessibility Inspector