DevBentoSchaltflächen
Prüfe, ob die Farben deiner Schaltflächen die WCAG-Kontrastanforderungen erfüllen. Teste Vordergrund- und Hintergrundpaare von Buttons auf Barrierefreiheit.
Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich
Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich
Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich
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.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.