- Stufe
- AA
- Seit
- WCAG 2.0
- Einträge
- 99 / 193
1.4.3 Kontrast (Minimum)
Text muss sich vom Hintergrund abheben: mindestens 4,5:1, bei großer Schrift 3:1.
/ Was es verlangt
Text muss vor dem, was hinter ihm liegt, lesbar sein. Das Maß ist ein Kontrastverhältnis zwischen Textfarbe und Hintergrundfarbe: von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß. Hellgrau auf Weiß, Weiß auf einer hellen Markenfarbe und Text über einem Foto sind schwer zu lesen für Menschen mit Sehbehinderung oder verminderter Kontrastempfindlichkeit und für alle, die ihr Telefon in die Sonne halten.
Normaler Text braucht mindestens 4,5:1. Großer Text, definiert als mindestens 18 Punkt oder 14 Punkt fett (etwa 24 und 18,66 CSS-Pixel), braucht mindestens 3:1. Für Bilder von Text gelten dieselben Werte, und gerundet wird nicht: 4,499:1 besteht nicht. Ausgenommen sind Text in inaktiven Bedienelementen, reine Dekoration, für niemanden sichtbarer Text, Text, der zufälliger Teil eines Bildes ist, sowie Logos und Markennamen.
/ Woran Seiten scheitern
- Fließtext oder Bildunterschriften stehen hellgrau auf Weiß, eine Kombination, die häufig unter 4,5:1 liegt.
- Platzhaltertext in Formularfeldern ist blasser als der eingegebene Text und fällt unter die Schwelle.
- Weißer Text steht in Schaltflächen, Etiketten und Bannern auf einer hellen Markenfarbe.
- Text liegt ohne deckende Fläche über einem Foto oder Verlauf, sodass Teile davon verschwinden.
- Eine halbtransparente Fläche oder eine reduzierte opacity des Textes senkt das Verhältnis, das die Farben im Stylesheet erwarten lassen.
/ So prüfen Sie es selbst
- Untersuchen Sie in Chrome oder Edge ein Textelement und klicken Sie im Bereich Styles auf das Farbfeld neben color. Der Farbwähler zeigt das Kontrastverhältnis und ob es AA erfüllt.
- Für Text über Bildern nutzen Sie ein kostenloses Pipettenwerkzeug wie den Colour Contrast Analyser und messen die hellste und die dunkelste Stelle hinter den Buchstaben.
- Prüfen Sie auch die Zustände: Links, Farben bei Hover und Fokus, Platzhalter, Fehlermeldungen und Text auf Schaltflächen.
- Bestätigen Sie die Größe, bevor Sie 3:1 anwenden. Text unter 24 Pixeln, fett unter 18,66 Pixeln, zählt als normaler Text.
/ So beheben Sie es
- Dunkeln Sie den Wert von color ab oder ändern Sie background-color, bis das Paar 4,5:1 erreicht. Auf Weiß ist #767676 ungefähr das hellste Grau, das für normalen Text besteht.
- Gestalten Sie Platzhalter ausdrücklich mit dem Selektor ::placeholder und einer Farbe, die gegenüber dem Feld 4,5:1 erreicht.
- Legen Sie hinter Text auf einem Bild eine deckende oder halbtransparente background-color oder dunkeln Sie das Bild selbst mit einer Überlagerung ab.
- Dämpfen Sie Text nicht mit opacity. Wählen Sie eine Farbe, die für sich besteht, denn opacity mischt den Text mit dem, was dahinter liegt.
- Legen Sie geprüfte Farbpaare als CSS-Variablen ab, damit jede Komponente dieselbe Palette verwendet.
/ Was unser Scanner prüft
Der Durchlauf auf der gerenderten Seite nimmt jedes sichtbare Textelement, verrechnet alle halbtransparenten Hintergrundebenen und die Deckkraft der Vorfahren zu der Farbe, die tatsächlich hinter dem Text liegt, und vergleicht sie mit der Textfarbe. Eingegebener Text und Platzhalter in Formularfeldern werden getrennt gemessen, HTML_CodeSniffer rechnet zusätzlich aus dem CSS. Text über einem Bild oder Verlauf geht an einen Menschen, Hover- und Fokusfarben werden nicht gemessen.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Welches Kontrastverhältnis verlangt WCAG AA?
Mindestens 4,5:1 zwischen normalem Text und seinem Hintergrund und mindestens 3:1 für großen Text. Dieselben Werte gelten für Text in Bildern. Gerundet wird nicht, 4,499:1 besteht also nicht. Stufe AAA hebt die Schwelle für normalen Text im Kriterium 1.4.6 auf 7:1, und die Teile von Bedienelementen und Grafiken, die kein Text sind, regelt 1.4.11 getrennt.
Was gilt in WCAG als großer Text?
Text mit mindestens 18 Punkt oder mit mindestens 14 Punkt, wenn er fett ist. Nach der üblichen Umrechnung sind das etwa 24 CSS-Pixel beziehungsweise 18,66 CSS-Pixel in Fettschrift. Text dieser Größe braucht ein Kontrastverhältnis von 3:1 statt 4,5:1. Alles Kleinere ist normaler Text, auch wenn es in Großbuchstaben oder in einer schweren Schrift gesetzt ist.
Müssen Logos und deaktivierte Schaltflächen das Kontrastverhältnis einhalten?
Nein. Das Kriterium stellt keine Kontrastanforderung an Text, der Teil eines Logos oder Markennamens ist, an Text in einem inaktiven Bedienelement, an reine Dekoration oder an Text, der zufälliger Teil eines Bildes mit anderem wesentlichen Inhalt ist. Alles andere, was Besucher lesen sollen, muss sie einhalten, auch Platzhaltertext und Text auf aktiven Schaltflächen.