Barrierefreiheit

02 / Farbe, Kontrast & Schrift

Kernfrage

Kann man es sehen?

Viele Menschen sehen eingeschränkt: wegen einer Sehschwäche, Grauem Star, Farbfehlsichtigkeit, Müdigkeit oder einem schlechten Bildschirm. Etwa jeder zwölfte Mann hat eine Rot-Grün-Schwäche. Gestaltung muss darum auch funktionieren, wenn Farben, Schärfe oder Licht nicht ideal sind.

Lernziel: Du kannst Kontraste messen und beurteilen, Information unabhängig von Farbe gestalten und Schrift gut lesbar einsetzen.

Was man nicht sieht, gibt es nicht.

2.1 / Kontrast

Kontrast ist eine Zahl, kein Gefühl.

Das Kontrastverhältnis vergleicht die Helligkeit von Schrift und Hintergrund, von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiss). Die WCAG verlangen auf Stufe AA drei Werte:

Fliesstext

Mindestens 4,5:1.

Grosse Schrift

Mindestens 3:1, ab 24 px oder 19 px fett.

Bedienelemente

Rahmen, Icons und Fokus mindestens 3:1.

Vorsicht bei Text auf Bildern und Verläufen: Der Kontrast muss an der schwächsten Stelle stimmen. Eine halbtransparente Fläche hinter dem Text hilft.

Miss, statt zu schätzen.

2.2 / Nie nur Farbe

Farbe allein trägt keine Information.

Wenn Rot «falsch» und Grün «richtig» bedeutet, sehen viele Menschen keinen Unterschied. Darum braucht jede Farbbedeutung eine zweite Spur: ein Symbol, einen Text, ein Muster oder eine Position.

Typische Fälle sind Fehler in Formularen, Links im Fliesstext, Statusanzeigen und Linien in Diagrammen. Links sind zusätzlich unterstrichen, Fehler mit einem Satz erklärt, Linien direkt beschriftet.

Farbe darf helfen, aber nicht allein sprechen.

Ausprobieren

Kontrast-Prüfer

Wähle Schrift- und Hintergrundfarbe, lies das Verhältnis ab und simuliere eine Rot-Grün-Schwäche.

Schrift #7A7A7AHintergrund #FFFFFF

Grosse Schrift ab 24 px

Fliesstext in 16 px. So liest sich ein Absatz auf diesem Hintergrund, auch in der Sonne oder auf einem alten Bildschirm.

4.29 : 1

Fliesstext AAnicht erfüllt (4.5:1)

Grosse Schrift AAerfüllt (3:1)

Bedienelemente und Grafikenerfüllt (3:1)

Fliesstext AAAnicht erfüllt (7:1)

2.3 / Schrift und Zoom

Lesbar heisst: gross genug, ruhig, anpassbar.

Für Fliesstext am Bildschirm sind 16 px ein guter Ausgangswert, mit einem Zeilenabstand um 1,5 und etwa 45 bis 75, höchstens 80 Zeichen pro Zeile. Gut unterscheidbare Zeichen wie I, l und 1 helfen allen, besonders Menschen mit Legasthenie.

Text muss sich auf 200 % vergrössern lassen, ohne dass Inhalte abgeschnitten werden. Darum Schriftgrössen relativ setzen, Text nie als Bild ausgeben und Container mitwachsen lassen.

Gutes Layout übersteht den Zoom.