Wie man für Leute mit Farbenblindheit entwirft

Ursprüngliche Autorin: Netania Engelbrecht
  • Übersetzung


Etwa 8-10% der Männer und 0,5% der Frauen haben irgendeine Form von Farbenblindheit. Das heißt, auf 100 Besucher Ihrer Website kommen 10 Besucher, die Farben unterschiedlich sehen. Und wie stellen Sie sicher, dass Ihre Benutzeroberfläche für alle Benutzer gleichermaßen zugänglich ist? Es gibt viele widersprüchliche Informationen darüber, welches Design für Farbenblind sein sollte. Wir haben die Grundprinzipien herausgearbeitet, die bei der Gestaltung berücksichtigt werden sollten, um die Farbunterscheidbarkeit der Schnittstelle zu erreichen.

Was ist Farbenblindheit?


Farbenblindheit ist die Unfähigkeit, einige Schattierungen des Spektrums zu unterscheiden, und betrifft eher Männer als Frauen, da diese Verletzung als Folge der Mutation des X-Chromosoms auftritt. Es gibt drei Hauptarten von Farbenblindheit: Deuteranopie (grün), Protanopie (rot) und Tritanopie (blau). Die häufigste Form ist Deuteranopie, die nächste ist Protanopie und ganz am Ende Tritanopie. Das Bild unten zeigt, wie der Regenbogen für Menschen mit unterschiedlichen Formen der Farbenblindheit aussehen wird.

Es gibt Farbenblindheitstests (Links werden am Ende stehen) und Beispiele, die zeigen, wie Menschen mit Farbenblindheit sehen. Sie können jedoch nicht zu 100% zuverlässig sein.



Wie mache ich ein Design mit besserer Farbunterscheidbarkeit?


Sie könnten denken: „Warum sollte ich mich auf eine so enge Gruppe von Benutzern konzentrieren?“ Tatsache ist, dass Elemente, die für farbenblinde Menschen geeignet sind, für ein breiteres Publikum als gut gestaltet gelten können. Und wenn das Design Ihrer Website mit hoher Qualität erfolgt, ist es für jeden Benutzer geeignet.

Wenn Sie das Design universell gestalten, bedeutet dies nicht, dass das ästhetische Erscheinungsbild darunter leiden sollte. Hier sind 5 Grundprinzipien, um Ihr Layout für farbenblinde Menschen zugänglich zu machen.



1. Verwenden Sie sowohl Farben als auch grafische Symbole


Sie sollten sich nicht nur auf die Farbe verlassen, um einen Zustand anzuzeigen. Beispielsweise ist es bei einigen Formen der Farbenblindheit schwierig oder sogar unmöglich, die üblichen roten Fehlermeldungen zu sehen. Ein Ansatz besteht darin, sowohl Farbe als auch ein grafisches Symbol zu verwenden, wenn Sie die Aufmerksamkeit des Benutzers erregen möchten. Eine gute Lösung sind die Facebook-Formularfelder und die Fehlermeldung.



Eine interessante Tatsache: Das Facebook-Logo und das berühmte blaue Farbschema wurden ausgewählt, da Mark Zuckerberg nicht zwischen Rot- und Grüntönen unterscheidet und am besten Blau sieht. „Blau ist für mich die satteste Farbe. Ich kann jede seiner Schattierungen erkennen. “

2. Wählen Sie Minimalismus


Begrenzen Sie die Palette, die Sie für die Site verwenden. Je weniger Farben im Design enthalten sind, desto besser ist die Benutzeroberfläche für Benutzer mit Farbenblindheit erkennbar. Minimalismus ist nicht nur ein Trend, sondern auch ein nützliches Werkzeug für die Farbsichtbarkeit.



3. Verwenden Sie Muster und Texturen, um den Kontrast anzuzeigen


Verwenden Sie zum Hervorheben von Elementen kontrastierende Muster oder Texturen anstelle von Volltonfarben. Beispielsweise kann es für Benutzer mit Farbenblindheit schwierig sein, zwischen Diagrammen zu unterscheiden. In diesem Fall ist es besser, ein Kontrastmuster aufzunehmen, insbesondere wenn die Farbpalette begrenzt ist.

Hier ist ein gutes Beispiel für das Erstellen von Kontrasten mithilfe eines Musters.



4. Verwenden Sie kontrastierende Farben und Schattierungen


Verlassen Sie sich nicht nur auf Schwarzweiß als einziges Kontrastpaar. Sie müssen mehrere kontrastierende Farben und Schattierungen für Ihr Design verwenden. Wenn Sie beispielsweise einen Textlink einfügen, ist es besser, ihn mit einem anderen Farbton zu markieren, um den Kontrast anzuzeigen.

Die folgende Seite ist ein Beispiel für die ordnungsgemäße Verwendung des Kontrasts. Hier wird der Benutzer mit Farbenblindheit verstehen, welches Element aktuell ausgewählt ist.



5. Verwenden Sie keine gefährlichen Farbkombinationen


Вы должны разбираться в цветах, чтобы выбрать правильную комбинацию. Поскольку дальтонизм у разных людей выражен по-разному, трудно определить, какие цвета “безопасны” для веб-дизайна. Вот несколько цветовых комбинаций, которые не стоит использовать — для дальтоников они могут оказаться настоящим кошмаром:

Зелёный + красный
Зелёный + коричневый
Синий + фиолетовый
Зелёный + синий
Салатовый + желтый
Синий + серый
Зелёный + серый
Зелёный + чёрный

Как узнать, что у вас нет цветовой слепоты?


Nun ... Viele Menschen sind sich ihrer Farbenblindheit seit Jahren nicht mehr bewusst, da die Konsequenzen dieser Abweichung so lange unsichtbar sind, bis jemand anderes auf sie hinweist. Das Bild unten wird normalerweise als Test für Farbenblindheit verwendet - probieren Sie es aus! (Ein Link zum vollständigen Test befindet sich am Ende des Artikels.) Sie haben



noch Zweifel?

Test Ishihara : Sie bestehen einen Test mit 38 Fragen und erhalten das Ergebnis.
Color Blind Check : eine Android-Anwendung von Colorblindor, mit der Sie in einer Minute herausfinden können, ob Sie an Farbenblindheit leiden.
Coblis : Sie laden ein Bild hoch und sehen, wie es Menschen mit unterschiedlichen Formen der Farbenblindheit sehen.
Anwendungen : 3 Anwendungen für iOS und Android, die speziell für Farbenblinde entwickelt wurden.

Grundsätzlich erstellt ein UX-Designer Websites, die für jeden Benutzer bequem und unterhaltsam sind. Leider gibt es keine universelle Lösung, die bei der Gestaltung von farbenblinden Menschen verwendet werden muss, aber es gibt mehrere Grundsätze, die eine Überlegung wert sind. Höchstwahrscheinlich wird dies ausreichen:

  1. Verlassen Sie sich nicht nur auf die Farbe, um den Status anzuzeigen
  2. Begrenzen Sie die Farbpalette auf 2-3 Farben
  3. Verwenden Sie Textur und Muster, um den Kontrast zu zeigen
  4. Verwenden Sie kontrastierende Farben und Schattierungen, um Textlinks hervorzuheben
  5. Verwenden Sie keine gefährlichen Farbkombinationen: Grün mit Rot, Grün mit Blau, Blau mit Grau usw.


PS Wenn Sie wissen:
- erfolgreiche Designlösungen für farbenblinde Menschen
- Möglichkeiten, das Design auf Farbunterscheidbarkeit zu überprüfen,
teilen Sie die Links in den Kommentaren mit. Vielen Dank im Voraus! (Kommentar Übersetzer)

Jetzt auch beliebt: