Platzhaltertext braucht guten Farbkontrast
Müssen Platzhaltertexte in Formularen den Anforderungen an hohen Farbkontrast genügen? Die kurze Antwort lautet: „Ja, natürlich!“
Die lange Antwort: Nicht alle Nutzer:innen haben eine perfekte Sehkraft. Vor allem mit zunehmendem Alter wird es schwieriger, Text vom Hintergrund zu unterscheiden, wenn der Farbkontrast gering ist. Daher solltet ihr immer für einen ausreichenden Kontrast zwischen Text und Hintergrund sorgen.
Das gilt auch für Platzhaltertext in Webformularen oder Dokumenten. Der Platzhalter liefert in der Regel einen nützlichen Hinweis, der beim Ausfüllen eines Eingabefeldes unterstützt. Er ist nicht rein dekorativ. Daher sollten alle Nutzer:innen in der Lage sein, den Platzhaltertext wahrzunehmen.
Foto: © Egor Komarov / pexels.com
Anforderungen an den minimalen Farbkontrast
Das Erfolgskriterium 1.4.3 Kontrast (Minimum) der WCAG 2.2 definiert Anforderungen an den Farbkontrast. Text muss mindestens ein Kontrastverhältnis von 4,5 zu 1 zum Hintergrund haben, oder ein Kontrastverhältnis von 3 zu 1, wenn es sich um großen Text handelt. Das Understanding-Dokument sagt eindeutig:
This Success Criterion applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus.Es gibt viele Werkzeuge, mit denen ihr das Kontrastverhältnis zweier Farbwerte überprüfen könnt. Ich verwende meistens den WebAIM Contrast Checker.
Platzhaltertext in Webformularen gestalten
In den meisten Browsern wird Platzhaltertext standardmäßig in einer hellgrauen Farbe dargestellt. Auch UI-Bibliotheken verwenden manchmal sehr helle Farben. Dies führt zu Platzhaltertext mit schlechtem Farbkontrast.
Verwendet das CSS-Pseudo-Element ::placeholder, um eine Textfarbe mit ausreichendem Farbkontrast zu definieren:
input::placeholder {
color: #5b5b5b;
}
Ihr könnt auch den Schriftstil und die Schriftgröße des Platzhaltertextes ändern. Werft einen Blick auf meine Demo, in der ihr das Standard-Styling des Browsers mit dem benutzerdefinierten Styling vergleichen könnt:
Mit dieser kleinen Änderung könnt ihr schnell die Barrierefreiheit eurer Website verbessern. Manchmal ist es so einfach! 😊
Nützliche Links
Erstellt am