Farbe spielt eine integrale Rolle im UI-Design. Wenn es richtig gemacht wird, verbessert es die Benutzererfahrung, beeinflusst Kaufentscheidungen und spiegelt die Stimme der Marken wider.

Wie gestalten Sie effektive, zugängliche und ästhetisch ansprechende Schnittstellen für farbenblinde Benutzer?

Während die Wissenschaft hinter Farbenblindheit ziemlich komplex ist, besteht der Kern darin, dass Farbenblinde Schwierigkeiten haben, Farbe klar zu sehen oder zwischen einigen Farben zu unterscheiden., In diesem Sinne werden wir in diesem Artikel einige Tipps geben, wie Sie die Zugänglichkeit Ihrer Website und die Erfahrung, die sie für Farbenblinde bietet, verbessern können.

Farbenblindheit in einer digitalen Welt

Studien zufolge ist etwa 1 von 12 Männern (und 1 von 200 Frauen) farbenblind. Obwohl farbenblinde Menschen die Dinge genauso klar sehen können wie alle anderen, können sie rotes, grünes oder blaues Licht nicht vollständig erkennen. Es gibt verschiedene Arten von Farbenblindheit; Deuteranopie und Protanopie Farbenblindheit sind die häufigsten.,

Menschen mit rot-grüner Farbenblindheit (Deuteranopie) haben Schwierigkeiten, zwischen Rot und Grün zu unterscheiden. Ähnlich wie bei Menschen mit roter Farbenblindheit (Protanopie) sehen alle roten Farben matt aus.

Was dies aus Design-Sicht bedeutet, ist, dass die Verwendung von Farbe allein zur Lesbarkeit und Erschwinglichkeit Ihre Website für jemanden, der farbenblind ist, schwierig machen würde.

Sie können den Coblis Color Blindness Simulator verwenden, um zu sehen, wie Ihre Website für farbenblinde Benutzer aussieht.,

7 Möglichkeiten, wie Sie die Farbzugänglichkeit für farbenblinde Benutzer verbessern können

Designelemente und-techniken, die die Farbzugänglichkeit für farbenblinde Benutzer verbessern, werden im Allgemeinen als gute Designpraktiken angesehen. Während Sie vielleicht denken, dass die ästhetische Attraktivität Ihrer Website leiden könnte, wenn Sie für Zugänglichkeit entwerfen, ist das sicherlich nicht der Fall.

Hier werfen wir einen Blick auf einige der Möglichkeiten, wie Sie eine zugänglichere Benutzeroberfläche entwerfen können, die farbenblinde Benutzer im Auge behält.

#1: mit Mustern und Texturen

Farbe Unterschiede sind unglaublich wichtig, mit der Visualisierung von Daten, z.B.,, graphen und Kreisdiagramme. Die Auswahl von Farben mit einem niedrigen Kontrastverhältnis kann es für farbenblinde Benutzer schwierig machen, Ihr Diagramm zu interpretieren.

Stattdessen sollten Sie Folgendes tun:

  • Verwenden Sie Muster und Texturen, um Benutzern die Unterscheidung verschiedener Segmente zu erleichtern.
  • Fügen Sie Segmenten Textbeschriftungen hinzu, um sie noch verständlicher zu machen.

Werfen wir einen Blick darauf, wie eine farbenblinde Person mit Ttanopie ein blau-grünes Balkendiagramm sehen könnte, im Vergleich dazu, wie sie dasselbe Diagramm mit Mustern und Texturen sehen würde.,

So würde es aussehen, wenn Sie jedes Segment beschriften würden, anstatt Muster zu verwenden:

#2: Verwenden Sie Farben und Symbole

Sie sollten sich nicht nur auf Farbe verlassen, um Fehler zu kommunizieren oder Informationen über Ihre Benutzeroberfläche zu übermitteln.

Schauen wir uns zum Beispiel das Anmeldeformular von Facebook an., Wenn sich das Formular allein auf Farbe stützte, um Benutzer darüber zu informieren, dass sie in einem bestimmten Feld einen Fehler gemacht haben, könnte es für einen rotblinden Benutzer (Protanopie) ungefähr so aussehen:

Hier ist ein Blick auf das Anmeldeformular von Facebook mit angehängten Symbolen und Fehlermeldungen:

Mit Symbolen und Symbolen in Formularen, um dem Benutzer mitzuteilen, dass er einen Fehler gemacht hat verbessert die Zugänglichkeit und hilft ihnen, ihr Fehler schneller.

#3: Verwenden Sie Textbeschriftungen

Hinzufügen von Textbeschriftungen zu Farbfiltern und Farbfeldern verbessert die Zugänglichkeit für farbenblinde Benutzer., Abhängig von der Art der Farbenblindheit fällt es Benutzern möglicherweise schwer, ohne beschreibenden Text zwischen verschiedenen Farben (oder Schattierungen) zu unterscheiden.

Ohne das beschreibende Textetikett bei Amazon können farbenblinde Benutzer beispielsweise ein rotes Hemd nicht von einem orangefarbenen oder grünen unterscheiden.

Das Hinzufügen von Textbeschriftungen zu Farbfiltern verbessert auch die Zugänglichkeit für Personen mit normaler Sicht. Zum Beispiel sind Weiß, Off-White und Hellgrau auf Monitoren oft schwer zu unterscheiden.,

#4: Unterstreichen Sie Links

Die meiste Zeit verwenden wir Schriftfarbe oder Schriftgewicht, um Links zu bezeichnen. Während es für jemanden mit Deuteranomalie, Protanopie oder Ttanopie möglich sein kann, Ankertext von normalem Text zu unterscheiden, ist es aufgrund des geringen Kontrastverhältnisses sicherlich nicht ideal.

Jemand mit Monochromie kann überhaupt nicht zwischen Text und Ankertext unterscheiden und müsste mit der Maus über den Text fahren, um zu sehen, ob sich der Cursor in einen Zeiger ändert.

Aus diesem Grund ist es eine gute Idee, Textlinks eine Unterstreichung hinzuzufügen., Dies macht es einfach, normalen Text und Ankertext sofort voneinander zu unterscheiden. Hier ist ein Beispiel von der Engadget-Website:

#5: Farbkombinationen zu vermeiden

Bestimmte Farbkombinationen sind nicht ideal für farbenblinde Benutzer, entweder weil sie niedrige Kontrastverhältnisse haben oder weil sie schwer zu unterscheiden sind.,

Hier ist eine Liste von Farbkombinationen, die Sie vermeiden sollten, wenn möglich in Ihren Schnittstellendesigns zu verwenden:

  • grün-rot
  • grün-blau
  • grün-braun
  • grün-schwarz
  • grün-grau
  • blau-grau
  • hellgrün-gelb
  • blau-lila

Hier ist was grün-rote und blau-violette Farbkombinationen würden für einen Benutzer mit Protanopie wie folgt aussehen:

#6: Heben Sie primäre Schaltflächen hervor

Designer verlassen sich oft auf Farbe, um primäre Schaltflächen hervorzuheben., Das Problem dabei ist, dass die Farbe, die Sie verwenden, für farbenblinde Benutzer schwierig wahrzunehmen ist.

Stattdessen sollten Sie Folgendes tun:

  • Erhöhen Sie die Größe Ihrer primären Schaltfläche.
  • Probieren Sie verschiedene Platzierung Kombinationen.
  • Erhöhen Sie den Kontrast zwischen primären und sekundären Tasten.
  • Verwenden Sie Rahmen, Symbole oder das Schriftgewicht, um primäre und sekundäre Schaltflächen zu unterscheiden.

Zum Beispiel verwendet Reformation Größe und Farbe, um die primäre Schaltfläche hervorzuheben.,

Und Firebox präsentiert ihre primäre Schaltfläche in der unteren rechten Ecke und die sekundäre Schaltfläche in der oberen linken Ecke.

#7: Erforderliche Formularfelder markieren

Farbenblinde Benutzer können Schwierigkeiten haben, zwischen erforderlichen und optionalen Feldern zu unterscheiden, wenn Sie nur Farbe verwenden, um erforderliche Felder in Formularen anzuzeigen.

Stattdessen können Sie:

  • Erforderliche Felder mit einem Sternchen (*) markieren.
  • Beschriftungsfelder mit dem Wort Erforderlich oder Optional.
  • Optionale Felder aus Formularen entfernen.,

Das Entwerfen der Benutzeroberfläche für farbenblinde Benutzer hilft Ihnen, die Zugänglichkeit Ihrer Website auch für Benutzer mit normaler Sicht zu verbessern. Obwohl es keine einheitliche Lösung für die Barrierefreiheit im Internet gibt, sollten Sie hier einige Tipps beachten:

  • Verwenden Sie Muster und Texturen, um den Kontrast in Diagrammen und Diagrammen anzuzeigen.
  • Verwenden Sie Farben und Symbole, um Fehlermeldungen zu übermitteln.
  • Fügen Sie Textbeschriftungen zu Farbfiltern und Farbfeldern hinzu.
  • Unterstreichen Sie Links, um zwischen regulärem Text und Ankertext zu unterscheiden.,
  • Vermeiden Sie schlechte Farbkombinationen wie grün-rot und blau-Violett.
  • Verwenden Sie Größe, Platzierung oder Schriftgewichte, um primäre Schaltflächen hervorzuheben.
  • Markieren Sie erforderliche Formularfelder mit einem Symbol (z. B. einem Sternchen) oder beschriften Sie sie.