Tagtäglich haben wir mit Formularen im Internet zu tun. Nicht selten werden sie zu einer Herausforderung.

Formulare & Fehlermeldungen

Formulare sind elementarer Bestandteile der Online-Welt. Egal, ob das Kontaktformular für die Verwaltung, die Anmeldemaske für das Soziale Netzwerk oder die Registrierung für den Online-Shop – Formulare finden sich an vielen Stellen. Oft stellen sie allerdings eine Herausforderung für Menschen mit eingeschränktem Farbsehen dar.

Häufig wird eine sogenannte Formularvalidierung genutzt, um anzuzeigen, ob die Eingabe korrekt oder fehlerhaft ist. Je nach technischer Umsetzung kann dies live (also direkt während der Eingabe) geschehen, oder in einem zweiten Schritt, nach dem Absenden des Formulars.

Diese Validierung soll uns zeigen, ob die getätigte Eingabe korrekt oder fehlerhaft ist. Dies kann zum Beispiel der Fall sein, wenn eine E-Mail-Adresse fehlerhaft ist, weil das @-Zeichen fehlt oder ein Benutzerkonto nicht im System gefunden werden konnte.

Oft wird dieses aufgezeigt, indem das entsprechende Formularfeld farbig gekennzeichnet wird: Gern genutzte Designelemente sind hier ein eingefärbter Hintergrund, ein farbiger Rahmen oder auch die Textfarbe selbst. In der Regel werden hier die Signalfarben Grün und Rot verwendet.

Screenshot eines fiktiven Formulars: Felder Name (Inhalt: Markus) und E-Mail-Adresse (Inhalt: markus). Die Felder haben eine grüne (korrekt; Name) und rote (fehlerhaft, E-Mail-Adresse) Umrandung. — Original
Normales Sehen

Ein (fiktives) Formular, bei dem durch die Farbe der Umrandung angezeigt wird, ob die Angabe gültig oder korrekt ist.

Farbe für Formular-Validierung nicht ausreichend

Einzig und allein durch eine rote Einfärbung eine falsche Eingabe in einem Formularfeld zu kennzeichnen, ist hier nicht ausreichend. Besonders, wenn für korrekt ausgefüllte Felder Grün als Indikator genutzt wird, fehlt für Rot-Grün-Schwache der Vergleich. Diese Farben sind für uns mehr oder weniger identisch und allenfalls bei ganz genauem Hinschauen zu erkennen.

Aber auch nur Rot gegenüber der Textfarbe reicht mitunter nicht aus, wenn der Kontrast fehlt. Selbst hier fällt es (nicht nur) Farbfehlsichtigen schwer, einen entscheidenden Unterschied zwischen dem grauen oder schwarzen Text und der roten Warnfarbe zu erkennen.

Screenshot eines fiktives Webformulars: Name (Inhalt: Markus) und E-Mail-Adresse (Inhalt: markus). Ein grüner (korrekt) und roter (falsch) Rahmen sollen korrekte und fehlerhafte Eingaben anzeigen. — Ein Haken (Eingabe korrekt) und ein Kreuz (Eingabe fehlerhaft) sorgen für klare Symbolik.

Um die Formularfelder für Farbsehschwache gut zu unterscheiden, bedarf es nicht viel: Eine Möglichkeit ist es, Symbole hinzuzufügen: einen Haken und ein Kreuz, die eine korrekte oder falsche Eingabe symbolisieren. Zusätzlich können hier die Signalfarben verwendet werden, um eine Unterscheidung für Normalsichtige weiter zu unterstützen.

Screenshot eines fiktives Webformulars: Name und E-Mail-Adresse. Unter dem E-Mail-Adresse-Feld der Hinweis — Zusätzlich zur Umrandung sorgt ein kontrastreicher Hinweis für Klarheit.

Eine weitere Möglichkeit ist ein klarer Hinweistext im Bereich des Feldes mit der falschen Eingabe. Hier können außerdem - sofern technisch möglich - zusätzliche Hinweise beispielsweise auf einen falschen Benutzernamen mit angegeben werden. Symbole und Hinweisfarben können hier unterstützen.

Kontraste sorgen für Unterschied

Wichtig sind bei Hinweistexten vor allem ausreichender Kontrast zwischen Fließtext und dem Hinweistext. Zusätzliche Grafiken und Symbole, aber auch Schlüsselwörter wie "Hinweis" oder "Fehler" (gern auch fett) sind hilfreich, um zum Beispiel Fehlermeldungen hervorzuheben. Die Richtlinien des World Wide Web Consortiums sollten immer eingehalten werden, hier besonders.

Fehlermeldungen für den Status bei einer korrekten oder fehlerhaften Eingabe sollten sich außerdem vom restlichen Design unterscheiden. Besonders, wenn Farben wie Grün, Rot oder deren Mischtöne im Design enthalten sind.

Screenshot eines (fiktiven) Hinweises: — Nicht nur Farbe: Symbol und Überschrift sind eindeutig.

In der Regel sind große rote oder grüne farbige Flächen für Rot-Grün-Schwache als solche zu erkennen. Um auf Nummer Sicher zu gehen, bieten sich hierfür ebenfalls zusätzliche Symbole an.