Stufe AA · WCAG 2.0
1.4.3 Kontrast (Minimum)
Text braucht mindestens 4,5:1 Kontrast zum Hintergrund — 3:1 bei großem Text, ab 18,66px fett oder 24px normal.
Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.
Woran es in der Praxis scheitert
Hellgrauer Platzhaltertext mit 2,8:1. Weiße Schrift auf der Markenfarbe, die auf dem kalibrierten Monitor der Designerin bestand und auf dem Handy bei Tageslicht durchfällt.
Wie man es repariert
Messen statt schätzen. Reparieren Sie es in den Design-Tokens statt pro Komponente, damit der nächste Screen die Korrektur erbt statt den Fehler zu wiederholen.
Auf einen Blick
- Stufe
- Stufe AA — die Stufe, die EN 301 549 verlangt, und damit die, an der BFSG und EAA gemessen werden.
- Prinzip
- Wahrnehmbar
- Richtlinie
- 1.4 Unterscheidbar
- Neu in
- WCAG 2.0
- EN 301 549
- 9.1.4.3
- Englische Bezeichnung
- Contrast (Minimum)
- Automatische Prüfung
- Teilweise automatisch
So prüfen Sie es von Hand
- Lassen Sie zuerst eine automatische Prüfung laufen: Der Kontrast von Text auf einfarbigem Grund wird zuverlässig gemessen, auf jeder Seite.
- Prüfen Sie dann, was ein Werkzeug nicht messen kann: Text auf Fotos, Verläufen und Videos. Messen Sie mit einem Kontrast-Analyser die Stelle des Hintergrunds, die der Textfarbe am nächsten kommt.
- Prüfen Sie auch die Zustände – Hover- und Fokusfarben, Platzhaltertext, Fehlermeldungen, Text auf Buttons. Logos und deaktivierte Bedienelemente sind ausgenommen.
- Großer Text braucht nur 3:1: 24px normal oder 18,66px fett, so wie der Browser ihn rendert – nicht wie die Designdatei ihn angibt.
Im Code
<!-- 2,85:1 – Hellgrau auf Weiß -->
<p style="color: #999999; background: #ffffff">Auf Lager</p>
<!-- 2,15:1 – Weiß auf Bernstein -->
<button style="color: #ffffff; background: #f59e0b">Jetzt kaufen</button><!-- 4,54:1 -->
<p style="color: #767676; background: #ffffff">Auf Lager</p>
<!-- 5,02:1 -->
<button style="color: #ffffff; background: #b45309">Jetzt kaufen</button>Teilweise automatisch
Wie weit eine automatische Prüfung kommt
Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.
Von axe gemessen, auf jeder Seite, die wir rendern, in zwei Viewports; wo Text auf einem Bild oder Verlauf steht, messen wir die Pixel hinter den Buchstaben, und auf einer Seite je Template auch die Hover-, Fokus- und gedrückten Zustände. Was sich nicht klären lässt, ist eine Frage an einen Menschen, und ein sauberes Ergebnis ist kein Bestehen.
Regeln, die dieses Kriterium prüfen
color-contrastFarbkontrast zu gering
Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.
Wo es besonders zählt
Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.
- BFSG für Onlineshops
- BFSG für Banken und Finanzdienstleistungen
- BFSG für Telekommunikationsdienste
- Shopware Barrierefreiheit und das BFSG
- Shopify Barrierefreiheit und das BFSG
- TYPO3 Barrierefreiheit und das BFSG
- WordPress Barrierefreiheit und das BFSG
Verwandte Kriterien
Weitere Kriterien unter derselben Richtlinie.
Weiterlesen
-
Kontrast Checker
Kontrastverhältnis zweier Farben sofort prüfen: Text (1.4.3), Bedienelemente (1.4.11) und Links. Mit Vorschlag für die nächste Farbe, die besteht.
-
Kontrastverhältnis
Maß für den Helligkeitsunterschied zweier Farben zwischen 1:1 und 21:1; normaler Text braucht mindestens 4,5:1, großer Text 3:1 (WCAG 1.4.3).
-
color-contrast
Die axe-Regel color-contrast meldet Text unter 4,5:1 (großer Text 3:1). Ursachen, Codebeispiel und manueller Test – verständlich erklärt.
Finden Sie heraus, welche Kriterien Ihre Website verfehlt
Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.