Barrierefreiheit · Prüfpunkt
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.
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.
Häufige Fragen
Worin unterscheidet sich diese Regel von der Text-Kontrastregel?
Die Text-Kontrastregel verlangt 4,5:1 für normalen Text. Diese Regel betrifft alles Sichtbare außer Text, das eine Funktion oder Information trägt: Feldrahmen, Schaltflächenflächen, Symbole, Diagrammlinien. Dafür gilt die mildere Schwelle von 3:1 — grafische Formen sind auch bei etwas schwächerem Kontrast noch erkennbar.
Warum sind hellgraue Eingabefelder ein Problem?
Weil ihr Rahmen auf weißem Grund oft weit unter dem geforderten Verhältnis von 3:1 liegt. Ein Besucher mit nachlassender Sehkraft erkennt dann nicht, wo das Feld beginnt und endet — das Formular wirkt für ihn leer. Ein etwas dunklerer Rahmen löst das Problem, ohne die Gestaltung merklich zu verändern.
Wie misst der Prüfservice den Kontrast von Schaltflächen?
Der Messkern fotografiert eine Stichprobe der Bedienelemente im Browser und berechnet aus den Bildpunkten die Helligkeit von Rand, Füllung und Umgebung. Gemessene Grenzen unter 3:1 werden als belegter Prüffall mit Bildschirmfoto ausgewiesen; das endgültige Urteil fällt beim Gold-Standard ein Mensch, weil umgebende Gestaltung ein Element visuell tragen kann.
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.