Tipps zum Entwerfen für Colorblind-Benutzer

Es wird geschätzt, dass etwa 8% der Männer und 0,5% der Frauen farbenblind geboren werden. Das mag wie eine niedrige Zahl erscheinen, aber wenn Sie für ein großes Publikum entwerfen, ist es definitiv weniger wünschenswert, eine Website zu haben, die für acht von hundert Männern nicht nutzbar ist.

Glücklicherweise können Sie ziemlich einfach sicherstellen, dass Ihre Website farbenblindfreundlich ist, indem Sie die folgenden Informationen im Auge behalten. Wir werden einen Blick darauf werfen, was Farbblindheit wirklich bedeutet und wie Sie Ihre Designs auf der Grundlage einiger einfacher Prinzipien optimieren können.

Ich möchte mit der Feststellung beginnen, dass, obwohl ich keinesfalls Augenarzt bin, die meisten Männer in meiner Familie farbenblind sind und die unten aufgeführten Beispiele von bonafide farbenblinden Männern geführt wurden. Wenn Sie eine farbenblinde Person sind, kann Ihre Beschreibung der folgenden Beispiele geringfügig oder sogar erheblich abweichen, da keine zwei farbenblinden Augen die gleichen sind.

Die Wissenschaft

Eine Diskussion über Farbenblindheit kann sehr schnell wirklich wissenschaftlich werden. Begriffe wie Protanopia und Anomalous Trichromacy reichen aus, um selbst sehr intelligente Menschen an die Zunge zu binden und zu verwirren.

Glücklicherweise müssen Sie als Designer kein Experte für Farbblindheit werden. Stattdessen können Sie allgemein gültige Verallgemeinerungen darüber vornehmen, was Colorblind-Benutzer tun und keine Probleme wahrnehmen. Dies erspart Ihnen nicht nur eine naturwissenschaftliche Lektion, sondern trägt auch dazu bei, dass Sie so gestalten, dass nahezu alle Colorblind-Benutzer Ihre Website effektiv verwenden können und nicht nur einen einzigen Typ.

Beachten Sie dies, wenn Sie die folgenden Informationen lesen. Jede Aussage wird nicht für alle colorblinden Benutzer zutreffen, aber zumindest ein Teil davon gilt für eine sehr große Mehrheit von ihnen.

Wenn Sie sich für die Wissenschaft interessieren, lesen Sie die Erklärung von Wikipedia, da sie in diesem Artikel weitaus fortgeschrittener ist.

Den Mythos sprengen

Zuallererst können Sie sicher sein, dass niemand, von dem Sie wissen, dass er ist buchstäblich farbenblind. Der Titel ist in der Tat (in den meisten Fällen) eine falsche Bezeichnung. Ein winziger Prozentsatz der Menschen wird mit wirklich monochromatischer Sicht geboren.

Weitaus genauere Begriffe umfassen "Farbe beeinträchtigt". oder? mangelhaft.? Anstatt die Welt in Schwarz und Weiß zu sehen, können farbenblinde Menschen normalerweise fast jede Farbe im Spektrum wahrnehmen und verstehen. Eine der dümmsten und ärgerlichsten Fragen, die Sie farbenblinden Leuten stellen können, ist, ob sie "sehen" können oder nicht. gelb, grün oder eine andere Farbe.

Das eigentliche Problem ist, dass es für farbblinde Benutzer schwierig ist, zwischen zwei ähnlichen Farben zu unterscheiden. Das ist wirklich schwierig zu verstehen, wenn Sie bedenken, dass Farben, die Ihnen im geringsten nicht ähnlich erscheinen, einer farbenblinden Person sehr ähnlich erscheinen und umgekehrt.

Es geht um Schatten

Um dies verständlicher zu machen, denken Sie über alle Farbnuancen aller Farben nach, die Sie jemals gesehen haben. Wenn Sie beispielsweise an die Farbe "grün" denken? Überlegen Sie, wie viele völlig andere Farbfelder Ihrer Definition von Grün entsprechen könnten. Hell, dunkel, gedämpft, Aquarell, Neon; und weiter. Dies beinhaltet die geringsten Variationen, bei denen ein Grün nur ein kleines bisschen mehr rotes oder blaues Licht enthält als das andere Grün.

Stellen Sie sich nun vor, Sie zählten all diese verschiedenen Grüntöne, die Ihre Augen wahrnehmen können, und sie entsprachen etwa einer Million (völlig willkürlicher Zahl). Jetzt gibst du einer farbblinden Person die gleiche Aufgabe und sie kann 500.000 oder weniger haben.

Sie sehen also, es ist nicht so, dass farbenblinde Menschen (in den meisten Fällen) unfähig sind oder "grün" wahrnehmen. Stattdessen unterscheiden sie lediglich weniger Grüntöne als Sie. Wenn Sie also drei ähnliche Grüntöne sehen, kann ein Benutzer mit Farbblind nur einen Grünton sehen

Um es noch komplizierter zu machen, laufen ähnliche Farbtöne aus verschiedenen Farben oft zusammen und erschweren es, genau zu bestimmen, welche Farbe etwas tatsächlich ist.

Beispiele

Mit ein paar soliden Beispielen vor Ihnen ist es immer etwas verständlicher. Betrachten Sie die folgenden vier Muster.

Sehen Sie sich zuerst die beiden unteren Farbfelder an. Betrachten Sie in erster Linie die Helligkeit der Farbfelder, noch mehr als die Grundfarbe. Colorblind-Benutzer sollten leicht zwischen diesen beiden Farbfeldern unterscheiden können. genau wie du kannst Ob eine farbenblinde Person die Farben richtig erkennt oder nicht, ist eine völlig andere Geschichte, aber zumindest ist es leicht zu erkennen, dass es sich um unterschiedliche Farben handelt.

Nun sind die beiden obersten Farbfelder eine andere Geschichte. Das vorige Beispiel könnte Sie denken lassen, dass Farbblinde Benutzer leicht zwischen Braun und Grün unterscheiden können, aber Sie wären falsch. Beim Vergleich nur der relativen Helligkeit / Dunkelheit der beiden Farbfelder können Sie wahrscheinlich sehen, wie diese beiden Farbfelder ähnlicher aussehen könnten. Bedenken Sie nun, dass für viele farbblinde Individuen die beiden obersten Farbfelder identisch sind.

Um das Kaninchenloch weiter hinunterzugehen, wiederholen wir das dunkle Braun und fügen einen dunklen Rotton hinzu.

Wieder sehen wir zwei Schattierungen, die unterschiedliche Farben haben, aber auch hier ist die relative Helligkeit der Farbfelder so ähnlich, dass ein farbblinder Benutzer Schwierigkeiten haben wird, zwischen ihnen zu unterscheiden.

Ein normales Augenpaar sollte in der obigen Anordnung fünf verschiedene Farbfelder sehen (eines wiederholt sich). Ein Satz farbenblinder Augen sieht wahrscheinlich drei oder weniger!

Schmerzhafte Farbkombinationen

Mischen Sie ähnliche Farbtöne wie in den obigen Beispielen, und Ihre colorblinden Benutzer werden dies nicht bemerken. Wenn Sie Ihre Site jedoch wirklich völlig unbrauchbar machen möchten, beginnen Sie, Farbschattierungen mit ähnlichen Helligkeitswerten zu überlappen, die jedoch möglicherweise ernsthaft kollidieren können.

Rot und Blau, Purpur und Rot, Rosa und Blau und fast jede Kombination davon sind ein gutes Beispiel. Betrachten Sie als Beispiel, was Sie nicht tun sollten, das Bild unten.

Während Sie vielleicht nur einen hässlichen Text sehen, werden viele farbblinde Benutzer solche vibrierenden Farben sehen, dass ihre Augen fast anfangen zu wässern (je weiter sie sich befinden, desto schlechter werden sie). Es ist schwierig, es richtig zu erklären, wenn man es nicht sieht, aber im Grunde ist es offensichtlich, dass die Farben sehr unterschiedlich sind, aber sie sind sich tatsächlich so ähnlich, dass die Ränder, an denen sich die beiden Farben treffen, sehr schwer zu unterscheiden sind. Dies führt zu einer insgesamt unangenehmen Erfahrung für viele farbblinde Benutzer, wenn ein Bild wie das oben dargestellte angezeigt wird.

Na und? Wie wirkt sich das auf meine Designs aus?

Diese Informationen sind alle gut und gut, aber wie ist sie praktisch auf das Design anwendbar? Die Antwort ist, dass es einige wichtige Bereiche gibt, in denen Sie wirklich darauf achten sollten, wie colorblind-Nutzer Ihre Website anders wahrnehmen können.

Einer der häufigsten Fehler, die ich sehe, ist der Link-Hover-Effekt. Unzählige Designer verwenden einfach eine Farbverschiebung als Hover-Effekt und nennen es einen Tag, weil sie es gut wahrnehmen können.

Denken Sie im Zweifelsfall daran, dass Benutzer von colorblind Helligkeitsverschiebungen zum größten Teil so wahrnehmen können, wie Sie es können. Ein wirklich dunkles Blau und ein wirklich helles Blau ist ein offensichtlicher Schalter. Wenn Sie also die Farben im Schwebeflug wechseln, müssen Sie sicherstellen, dass die beiden Farben in ihrer relativen Helligkeit sehr unterschiedlich sind. Sie können von einem Dunkelbraun zu einem Hellgrün wechseln, nur nicht von einem Dunkelbraun zu einem Dunkelgrün.

Außerdem ist es immer besser, zusätzlich zu den Farbverschiebungen etwas anderes hinzuzufügen. Wenn der Benutzer den Mauszeiger über einen Link bewegt, fügen Sie einen Strich, einen Schlagschatten oder etwas anderes hinzu, das Sie sich vorstellen können, um den visuellen Unterschied zu erhöhen, der nicht einfach auf einer Farbänderung beruht.

Infografiken

Ein weiterer Schlüsselbereich, in dem Farbunterschiede wichtig sind, ist die Datenvisualisierung. Die Wahl der falschen Farben für ein Diagramm kann dazu führen, dass es für einen farbblinden Benutzer nicht lesbar ist.

Selbst wenn Ihre Farben sehr unterschiedlich sind, empfiehlt es sich oft, verschiedene Teile eines Diagramms mit einem Muster oder einer Textur auszustatten, um die visuelle Unterscheidung zu erleichtern.

Auch wenn die Farben noch so ähnlich sind, dass ein farbblinder Benutzer den Unterschied nicht erkennen kann, bieten die Streifen im obigen Beispiel eine schnelle und einfache visuelle Referenz für alle Benutzer.

Spiele

Wie Sie sich vorstellen können, sind die Möglichkeiten für Colorblind-Benutzer unbegrenzt, aber eine letzte Stelle, die ich besprechen möchte, wo dies für sie besonders frustrierend sein kann, sind Spiele.

Stellen Sie sich vor, Sie versuchen, das iPhone-Spiel als farbblinder Benutzer zu spielen. Das Abgleichen der Farben, um das Puzzle zu vervollständigen, könnte ziemlich schwierig sein!

Viele iPhone-Spiele haben dies durch einen optionalen Colorblind-Modus kompensiert. Um es jedoch einfacher zu machen, sollten Sie in Betracht ziehen, zusätzlich zur Farbe Symbole hinzuzufügen, um das Spielen für alle zu vereinfachen. Betrachten Sie als Beispiel ein Kartenspiel. Es ist mehr los als rote Karten und schwarze Karten. Jeder, der Farben spielt oder nicht, weiß, dass die Diamanten und Herzen die roten Karten sind, während Schläger und Pik die schwarzen Karten sind. Selbst wenn Sie diese Symbole auf einem Schwarzweißfoto sehen, können Sie sicher zwischen der roten und der schwarzen Karte unterscheiden. Genau so sollten Ihre Spiele entwickelt werden.

Fazit

Zum Schluss sei daran erinnert, dass es wirklich sehr einfach ist, Ihre Site für colorblind-Benutzer zugänglich zu machen. Sie müssen sich nur bewusst darum bemühen, wo sich die Funktionsweise der Website auswirkt oder wenn die Farbwahrnehmung die Lesbarkeit von Text beeinträchtigen kann. Wen kümmert es? Wenn Sie einen braunen Hintergrund haben, den farbenblinde Benutzer für grün halten? Die meiste Zeit werden sie sicher nicht.

Stellen Sie nur sicher, dass Sie, wenn es darauf ankommt, wie zum Beispiel Links, Diagramme und Spiele, nach Möglichkeiten suchen, wie Sie Kontrast hinzufügen können. Verwenden Sie stark kontrastierende Farben, setzen Sie Muster um, wenden Sie Symbole an und verwenden Sie Tricks mit Strichen, Schatten und Ähnlichem, um sicherzustellen, dass an den richtigen Stellen ein erheblicher visueller Unterschied besteht. Es kann oft hilfreich sein, einen Farbblindheitssimulator zu verwenden, um zu entscheiden, wie die Farben auf der Seite das Gesamterlebnis beeinflussen.

Hinterlassen Sie unten einen Kommentar und lassen Sie uns wissen, ob Sie Colorblind-Benutzer beim Entwerfen einer Website in Betracht ziehen und wie Sie deren Bedürfnisse berücksichtigen.