Platzhaltertext-Kontrast prüfen
Platzhaltertext ist einer der häufigsten WCAG-Fehler im Web. Das standardmäßige helle Grau, das Browser auf Platzhalter anwenden, fällt fast immer unter das von WCAG AA geforderte Kontrastverhältnis von 4,5:1. Dieses Beispiel testet ein typisches Platzhaltergrau (#9ca3af) auf weißem Hintergrund.
Warum Platzhalterkontrast häufiger scheitert als man denkt
Die meisten CSS-FrameworkS liefern Platzhalterfarben, die WCAG nicht erfüllen. Tailwoods Standard placeholder-gray-400 (#9ca3af) ergibt nur 3,14:1 Kontrast auf Weiß. Bootstraps .form-control::placeholder verwendet rgba(0,0,0,.4), was ungefähr #666666 entspricht und mit 5,74:1 gerade noch besteht. Material UIs Standard-Platzhalter scheitert im Dark Mode.
Das Problem wird verstärkt, da Platzhaltertext typischerweise kleiner ist als Fließtext (14-16px), was bedeutet, dass er unter die strenge Anforderung von 4,5:1 fällt, statt unter die Schwelle von 3:1 für großen Text.
Platzhalterkontrast-Beispiele
| Farbe | Auf Weiß (#ffffff) | Verhältnis | WCAG AA |
|---|---|---|---|
| #cccccc | Helles Grau | 1,61:1 | Scheitert |
| #9ca3af | Tailwind gray-400 | 3,14:1 | Scheitert |
| #767676 | Minimum das besteht | 4,54:1 | Besteht |
| #6b7280 | Tailwind gray-500 | 5,32:1 | Besteht |
| #525252 | Tailwind gray-600 | 7,46:1 | Besteht |
| #404040 | Dunkles Grau | 9,67:1 | Besteht |
Die Lösung ist eine CSS-Zeile
Die meisten Platzhalterkontrast-Probleme lassen sich auf eine CSS-Eigenschaft reduzieren. Anstatt sich auf den Browser-Standard oder Framework zu verlassen, überschreiben Sie explizit:
/* Scheitert WCAG AA */
input::placeholder {
color: #9ca3af;
}
/* Erfüllt WCAG AA */
input::placeholder {
color: #6b7280;
}Verwenden Sie in Tailwind placeholder-gray-500 statt placeholder-gray-400:
<!-- Scheitert -->
<input class="placeholder-gray-400" />
<!-- Erfüllt -->
<input class="placeholder-gray-500" />Verwendung
- Geben Sie die Textfarbe Ihres Platzhaltertexts in das Vordergrundfeld ein
- Geben Sie die Hintergrundfarbe des Eingabefelds in das Hintergrundfeld ein
- Prüfen Sie, ob das Verhältnis 4,5:1 für WCAG AA erfüllt
- Wenn nicht, verwenden Sie die Vorschläge, um einen dunkleren Ton zu finden
- Kopieren Sie das aktualisierte CSS für Ihre Eingabestile
Über die Farbe hinaus: Platzhalter-Barrierefreiheit
Kontrast ist ein Teil der Platzhalter-Barrierefreiheit. WCAG verlangt auch, dass Platzhaltertext nicht die einzige Art ist, eine Eingabe zu beschriften (SC 1.3.1), und dass die Eingabe einen zugänglichen Namen hat (SC 4.1.2). Kombinieren Sie Platzhaltertext immer mit einer sichtbaren Beschriftung oder aria-label. Der Regex-Tester kann helfen, Eingabemuster zu testen, aber die visuelle Barrierefreiheit der Eingabe selbst ist ein separater Aspekt.