Kontraste und Farbgebungen im Interface Design

Die Farbgebung und Kontraste im Interface Design

Sinnvolle Farbgebung?

Ein Interface mit grauenvollen Kontrasten ist nicht nur unlesbar, sondern auch total verstörend für die Augen. Oftmals ist es der Fall, dass die Kontraste auf Webseiten und somit am Bildschirm zu gering bzw. die Farbgebung zu ungünstig gewählt wurde. Daraus resultieren unlesbare und schlecht gestaltete Ergebnisse. Wie sehen also gute Kontraste aus?

Eines muss uns klar werden: Durch schlechte Kontraste wird die Lesbarkeit erschwert und viele Informationen gehen dem Leser durch die Lappen! Nur wenn eine sinnvolle Farbgebung und ein ausreichender Kontrast gewährleistet wird, können Informationen auf dm Bildschirm richtig erkannt und vor allem auch gelesen werden.
Doch wie sieht ein guter Kontrast in der Praxis aus? Im Grunde orientiert man sich beim minimalen Kontrast zwischen dem Zeichen und dem Zeichenhintergrund. Daraus resultiert nämlich ein Verhältnis von mindestens 5:1, besser wären 7:1, für normale Schriften. Es muss also ein möglichst großer Unterschied zwischen den Farben bestehen – orientiert euch am Besten am Farbkreis Itten. Es gibt auch Software für den Computer, mit der man Kontraste analysieren kann und so schnell sieht, ob der gedachte Kontrast den nötigen Anforderungen entspricht. Hierzu geht ihr einfach auf c2web.de/upload/… und holt euch den Kontrast-Analyzer.

Generell ist bei der Farbgebung darauf zu achten, dass keine aus physiologischer Sicht nicht-ergonomische Farbkombinationen gewählt werden. Das hat den faden Beigeschmack, dass Farben als unangenehm empfunden wären. Ein treffendes Beispiel dafür sind die Farben Rot und Blau – zusammen ergeben sie den augenschmerzenden Flimmer-Kontrast.

Halten wir also fest: Bei der Auswahl und der Kombination von Farben, ist auf eine hohe Lesbarkeit zu achten. Der Klassiker: Schwarz auf Weiß. Diese Kombination funktioniert tadellos und bietet den höchsten Kontrast. Diese zwei Unbunten-Farben lassen sich zudem problemlos mit Farben wie Blau, Rot, Grün und vielen anderen Farben mischen. Wichtig ist nur, den Kontrast beizubehalten, womit die Kombination wie Weiß und Gelb natürlich nicht funktioniert.
Wie viele Farben darf ich auf mein Interface packen? Definitiv nicht mehr als sechs verschiedene Farben, da ansonsten die Wahrnehmbarkeit beeinträchtigt wird. Was sich an dieser Stelle auch anbietet: Schaut euch mal die Zusammenfassung aller Kontraste an. Hier findet schöne Erklärungen und seht auch einige Beispiele.

Farben werden aber auch dazu verwendet, um Informationen zu vermitteln! Ganz klassisch kennt man das aus E-Mail-Programmen, in denen wichtige Mails mit einem roten Ausrufezeichen versehen sind. Werden Mails farblich hinterlegt, gehen Informationen verloren, da sie nicht mehr lesbar sind. Stellt euch einen weißen Untergrund und richtig hellgrüne Mails vor (zum Beispiel bei neuen Mails). Das ist glücklicherweise nicht der Fall, da neue Mails meist durch eine fette Schrift gekennzeichnet werden. Aber Farbkodierungen können in Mails trotzdem einen positiven Effekt bieten und einen Mehrwert haben. Wie bereits erwähnt lassen sich wichtige Mails mit roten Ausrufezeichen ausstatten. Oder wie wäre es mit grünen Häkchen für bereits beantwortete E-Mails? All das sind Beispiele für erfolgreiche und nützliche Farbkodierung. Denn wenn Mails sogar vom Betreff in einer Farbe geschrieben worden wären, würden farbenblinde Menschen gar keine Informationen mehr aufnehmen können. Lieber auf farbliche Symbole zur Unterstützung, statt farbliche Untermalung, für solche Zwecke wählen!
Schlussendlich sind Farben und Kontraste wichtige Träger in der Informationsbeschaffung! Sie sollten, gerade weil es farbenblinde Menschen gibt, eher unterstützend wirken und keineswegs Informationen verschließen oder gar »unterdrücken«.


wallpaper-1019588
[Review] Manga ~ QQ Sweeper
wallpaper-1019588
Adventskalender 2024: 24. Türchen
wallpaper-1019588
Zatsu Tabi -That’s Journey-: Startzeitraum bekannt + Trailer
wallpaper-1019588
Puniru Is a Cute Slime – Anime erhält eine zweite Staffel + Teaser