Tutorial: Designs für alle erstellen, auch für Menschen mit Sehbeeinträchtigung (Kontraste richtig nutzen)

Bei Design gibt es oft die Meinung „Alles was gefällt, ist erlaubt“. Erwidert man, dass es Menschen mit Sehbeeinträchtigungen gibt, für die hohe Kontraste wichtig sind, kommt oft die Antwort: „Mein Design hat genügend Kontrast“. Das klingt so, als wäre auch Kontrast nur eine Geschmackssache.

Ist es aber nicht. Es gibt Standards wie das WCAG, das man bei allen Designs als Grundlage nehmen sollte. Es geht immer darum, wie gut lesbar Text ist.

Die Kurzanleitung lautet:

  • Mindest-Kontrast = 3.0: Der Mindest-Kontrast muss 3.0 betragen. Jede Zahl darunter ist nicht barrierefrei. Dabei muss dein Text dann aber auch die Textgröße 18pt oder mehr haben.
  • Text unter 18pt > 4.5: Ist dein Text kleiner als 18pt, muss der Mindest-Kontrast 4.5 betragen
  • Langer Text > 7.0: Hast du einen längeren Text, etwa Fließtext, dann muss der Kontrast sogar mehr als 7.0 betragen.

(Quelle: https://usecontrast.com/guide)

Aber wie misst und kontrolliert man den Kontrast?
Es gibt freie Tools wie den Color Contrast Analyzer

Ich habe euch eine Kontrast-Tester-Vorlage in Figma erstellt, in der eine Kurzanleitung als Gif ist und ein paar Beispielmessungen für Text-Kontraste. (Die Ergebnisse haben mich selbst überrascht!)

Ihr könnt diese Datei als Tester für eure eigenen Designs benutzen.

1 Like