WCAG 2.0, 1.4.3, AA

Kontrast (Minimum)

  • WCAG: 2.0
  • Stufe: AA
  • Thema: Kontrast und Sensorik

Texte und Symbole müssen sich farblich durch genügend Kontrast vom Hintergrund abheben. Dies ermöglicht es Menschen mit Sehbeeinträchtigung, Text erkennen und lesen zu können.

Verstehen

Menschen mit Sehschwäche und Fehlsichtigkeit sind darauf angewiesen, dass sich Elemente gut sichtbar vom Hintergrund abheben. Deshalb müssen Texte und informative Elemente (etwa Symbole) einen ausreichend hohen Kontrastwert zum Hintergrund aufweisen.

Relevant sind alle Texte des Inhalts und von Bedienelementen. Auch deren Zustandsänderungen (wie Hover und Fokus) müssen die Anforderungen erfüllen; für die Unterscheidbarkeit zwischen denselben gelten allerdings keine strikten Kontrastanforderungen.

Notwendiger Mindestkontrast:

- Normale Schrift: Kontrastverhältnis von mindestens 4.5:1

- Grosse Schrift (ab 18pt oder 14pt + fett): Kontrastverhältnis von mindestens 3:1

Ausschlaggebend ist der im CSS hinterlegte Farbcode, nicht durch Anti-Aliasing o.ä. möglicherweise veränderte Pixelfarben.

Wenn ein Platzhalter (placeholder-Attribut) zusätzliche Information liefert, die sonst nicht vorhanden ist, dann muss er ausreichend kontraststark sein. Das gilt z.B. bei Formatangaben, bei genauerer Angabe, dass in ein Suchfeld eine PLZ, Stadt, Bestellnummer, etc. eingegeben und gesucht werden können. Wenn der Platzhalter rein redundant ist, dann gelten für ihn keine Kontrastanforderungen.

Wichtig: Der Farbton spielt bei der Berechnung des Kontrasts keine Rolle. Somit können z.B. ein sattes Grün und ein sattes Rot wider Erwarten zuwenig Kontrast aufweisen, denn Menschen, die keine Farben sehen, nehmen beide Farben in demselben satten Grau wahr. Ein sattes Grün und ein schwaches Rot hingegen werden als sattes Grau und schwaches Grau wahrgenommen, und der Kontrast ist entsprechend gewährleistet.

Ausnahmen: Für Logos oder inaktive Elemente (z.B. nicht auswählbare Schalter) gelten keine Kontrastanforderungen. Dasselbe gilt für dekorative Elemente (z.B. ein Warenkorbsymbol in einem mit «Warenkorb» beschrifteten Link).

Verantwortlichkeiten

  • Das Designteam definiert im Rahmen des vorgegebenen Designs eine Palette von Vorder
  • und Hintergrundfarben, die in den benötigten Kombinationen genügend Kontrast aufweisen.
  • Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um.
  • Die Inhaltsverantwortlichen gestalten Inhalte so, dass diese genügend Kontrast aufweisen.
  • Auftraggebende sollten sich bewusst sein, dass kontraststarke Designs (auch über die Mindestanforderungen hinaus) ein Vorteil für alle Sehenden sind (z.B. bei mobiler Nutzung).

WCAG-Text

Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4.5:1 mit folgenden Ausnahmen:

- Grosser Text: Grosser Text und Bilder von grossem Text haben ein Kontrastverhältnis von mindestens 3:1;

- Nebensächlich: Für Text oder Bilder eines Textes, die Teil eines inaktiven Bestandteils der Benutzerschnittstelle, rein dekorativ, für niemanden sichtbar oder Teil eines Bildes sind, welches signifikanten anderen visuellen Inhalt enthält, gibt es keine Kontrastanforderung.

- Wortbildmarken: Text, der Teil eines Logos oder eines Markennamens ist, hat keine Kontrastanforderungen.