Schaltflächen-Farbkontrast prüfen
Schaltflächen sind der häufigste Barrierefreiheits-Audit-Fehler nach Farbkontrast im Text. Eine Schaltfläche, die die Kontrastanforderungen nicht erfüllt, blockiert Benutzer daran, Aufgaben abzuschließen, Formulare zu senden oder Ihre Anwendung zu navigieren. Dieses Beispiel testet weißen Text (#ffffff) auf einem Standardblau-Button (#3b82f6).
Warum Schaltflächen-Kontrast Tückisch ist
Schaltflächen haben zwei separate Kontrastanforderungen, die oft verwechselt werden:
- Textkontrast (SC 1.4.3): Die Textfarbe in der Schaltfläche muss 4,5:1 Kontrast gegen die Schaltflächenhintergrundfarbe haben
- Nicht-Text-Kontrast (SC 1.4.11): Die visuelle Grenze der Schaltfläche muss 3:1 Kontrast gegen den angrenzenden Hintergrund (die Seite oder Karte dahinter) haben
Eine Schaltfläche kann den Textkontrast bestehen, aber den Nicht-Text-Kontrast scheitern, oder umgekehrt. Sie müssen beide prüfen.
Das blaue Schaltflächen-Problem
Die meisten Designsysteme verwenden Blau als primäre Schaltflächenfarbe. So schneiden gängige Blautöne mit weißem Text ab:
| Schaltflächenfarbe | Weißer Text-Vhältnis | WCAG AA | Anmerkungen |
|---|---|---|---|
| #3b82f6 (blue-500) | 4,56:1 | Besteht | Besteht gerade noch, kein Spielraum |
| #2563eb (blue-600) | 6,44:1 | Besteht | Empfohlenes Minimum |
| #1d4ed8 (blue-700) | 8,59:1 | Besteht | Gut für primäre CTAs |
| #60a5fa (blue-400) | 2,73:1 | Scheitert | Häufiger Fehler |
| #93c5fd (blue-300) | 1,47:1 | Scheitert | Nie mit weißem Text verwenden |
Schaltflächen-Zustände und Kontrast
Jeder interaktive Zustand muss die Kontrastanforderungen erfüllen:
| Zustand | Vordergrund | Hintergrund | Verhältnis | Besteht? |
|---|---|---|---|---|
| Standard | #ffffff | #3b82f6 | 4,56:1 | AA besteht |
| Hover | #ffffff | #2563eb | 6,44:1 | AA besteht |
| Aktiv | #ffffff | #1d4ed8 | 8,59:1 | AA besteht |
| Deaktiviert | #94a3b8 | #cbd5e1 | 1,46:1 | Befreit |
| Fokus-Ring | #ffffff | #1e40af | 10,03:1 | AA besteht |
Häufige Schaltflächen-Barrierefreiheits-Fehler
- Helles Blau mit weißem Text: Blue-400 oder Blue-300 mit weißem Text scheitert WCAG
- Verlaufshintergründe: Ein Verlauf, der von Bestehen zu Scheitern wechselt, erzeugt inkonsistenten Kontrast
- Fokus-Ringe die verschmelzen: Fokus-Indikatoren müssen sowohl gegen die Schaltfläche als auch den Seitenhintergrund sichtbar sein
- Nur-Icon-Schaltflächen ohne Beschriftungen: Fehlende aria-label macht die Schaltfläche für Screenreader unsichtbar
- Farbe als einziger Indikator: Deaktivierte Schaltflächen, die nur auf reduzierte Opazität setzen, ohne andere visuelle Hinweise
Verwendung
- Geben Sie die Textfarbe Ihrer Schaltfläche in das Vordergrundfeld ein
- Geben Sie die Hintergrundfarbe der Schaltfläche in das Hintergrundfeld ein
- Prüfen Sie, ob das Verhältnis 4,5:1 für normalen Text oder 3:1 für großen Text (18px fett oder 24px+) erfüllt
- Testen Sie jeden Schaltflächen-Zustand (Standard, Hover, Aktiv, Fokus) separat
- Verwenden Sie die barrierefreien Farbvorschläge, um bessere Kombinationen zu finden
Den gesamten Schaltflächen-Stack testen
Schaltflächen existieren selten isoliert. Prüfen Sie jede Variante in Ihrem Designsystem: Primär, Sekundär, Umriss, Geist und Deaktiviert. Das CSS-Gradient-Tool kann Ihnen helfen, Schaltflächenhintergründe zu generieren, aber überprüfen Sie immer das endgültige Kontrastverhältnis mit dem WCAG-Kontrast-Prüfer, bevor Sie veröffentlichen.