Prüfpunkt 1.4.11Stufe AAFarbe und Kontrast
Welchen Kontrast brauchen Schaltflächen und Eingabefelder auf Websites?
Schaltflächen, Eingabefelder und aussagekräftige Grafiken brauchen ein Kontrastverhältnis von mindestens 3:1 zu ihrer Umgebung. Diese Schwelle stammt aus dem Standard WCAG. Sie sorgt dafür, dass ein sehschwacher Besucher erkennt, wo er klicken und wo er schreiben kann — ein weißes Eingabefeld mit hellgrauem Rahmen auf weißem Grund ist praktisch unsichtbar.
Bedienelemente müssen sich abzeichnen
Während die bekannte Kontrastregel den Text betrifft, geht es hier um alles andere Sichtbare, das eine Funktion trägt: den Rahmen des Eingabefelds, die Fläche der Schaltfläche, das Lupensymbol der Suche, den Haken in der Checkbox. Moderne, sehr reduzierte Gestaltung ist hier die häufigste Falle — hellgraue Feldrahmen auf weißem Grund wirken elegant, liegen aber oft weit unter 3:1. Ein Besucher mit nachlassender Sehkraft sieht dann ein Formular ohne erkennbare Felder: Er weiß nicht, wohin mit dem Cursor. Auch Symbole ohne Textbeschriftung — etwa das Hamburger-Menü — müssen sich mit mindestens 3:1 vom Hintergrund abheben, sonst existiert die Navigation für ihn nicht.
So misst unser Messkern den Kontrast der Bedienelemente
Unser Messkern wählt eine Stichprobe der Bedienelemente Ihrer Seite — Eingabefelder, Schaltflächen, gestaltete Link-Knöpfe — und fotografiert jedes samt Umgebung im Browser. Aus den Bildpunkten berechnet er die Helligkeit von Rand, Füllung und Umgebung und daraus das tatsächliche Kontrastverhältnis der Elementgrenze. Liegen gemessene Grenzen unter 3:1, meldet der Bericht das bewusst als belegten Prüffall und nicht sofort als Verstoß: Ein scheinbar zu schwaches Feld kann visuell von einem umgebenden Container getragen werden — das beurteilt beim Gold-Standard ein Mensch anhand des mitgelieferten Bildschirmfotos. Als bestanden gilt das Kriterium nur bei ausreichend großer, vollständig unauffälliger Stichprobe; rein grafische Objekte wie Diagramme bleiben menschliche Prüfsache.
Beispiele
Eingabefeld mit blassem Rahmen
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rahmen, Symbole und Fokusrahmen brauchen 3:1 zum Hintergrund, sonst ist das Feld nicht als Feld erkennbar.
So gehen Sie es an
- Prüfen Sie Ihre Formulare: Jedes Eingabefeld braucht einen Rahmen oder eine Füllung, die sich deutlich vom Hintergrund abhebt.
- Bitten Sie Ihre Agentur, die Rahmenfarben der Felder gegen die 3:1-Schwelle zu prüfen und dunkler zu stellen, wo nötig.
- Kontrollieren Sie Symbole ohne Text — Suche, Menü, Warenkorb — auf ausreichenden Kontrast zum Hintergrund.
- Achten Sie auf Zustände: Auch die Markierung eines ausgewählten Reiters oder einer aktiven Checkbox braucht 3:1.
- Betrachten Sie Ihre Formulare aus zwei Metern Abstand — verschwinden die Felder optisch, ist der Kontrast zu schwach.
Weiter im Prüfbereich Barrierefreiheit
- Warum müssen sich Zeilenabstand und Zeichenabstand auf Websites anpassen lassen?Menschen mit Leseschwäche weiten Textabstände per Hilfsmittel. Die Website muss das verkraften, ohne Text abzuschneiden oder Abstände zu blockieren.
- Wie müssen Tooltips und Einblendungen auf Websites bedienbar sein?Inhalte, die bei Mauskontakt oder Tastaturfokus erscheinen, müssen wegschaltbar, berührbar und beständig sein — sonst verdecken sie, was man lesen will.
- Warum muss eine Website ohne Maus bedienbar sein?Jede Funktion einer Website muss per Tastatur erreichbar sein. Was WCAG-Kriterium 2.1.1 verlangt und wie unser Prüfservice es mit echten Tastendrücken misst.
- Was ist eine Tastaturfalle auf einer Website?Eine Tastaturfalle hält den Tastaturfokus gefangen: Wer hineingerät, kommt ohne Maus nie wieder heraus. So erkennen und vermeiden Sie sie.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Alex Mihis, CC0
.jpg){kind=link}