UI-Design für farbenblinde Benutzer

Farbenblinde Menschen machen einen erheblichen Teil der Bevölkerung aus – etwa 1 von 12 Männern und 1 von 200 Frauen, um genau zu sein. Dennoch sind farbenblinde Benutzer eine oft übersehene Zielgruppe im UI-Design.

Viele verwechseln Farbenblindheit mit Schwarz-Weiß-Sehen, und obwohl dies eine Art ist, gibt es weniger seltene und weniger extreme Versionen.

Die meisten Menschen sind trichromatisch, was bedeutet, dass sie Farbe als eine Kombination aus drei Farben wahrnehmen: Grün, Rot und Blau. Verschiedene Arten von Farbenblindheit oder Farbsehschwäche (CVD) entstehen dadurch, dass eine oder mehrere dieser Farben nicht klar wahrgenommen werden können. Die häufigsten CVD-Typen sind Rot-Grün-Farbenblindheit, bei der es schwierig ist, zwischen Rot und Grün zu unterscheiden, und Rot-Farbenblindheit, bei der rote Farben matt erscheinen.

Wir glauben, dass jeder einen fairen und gleichberechtigten Zugang zum Internet haben sollte, daher ist es wichtig, dass UI-Designer mit farbenblinden Benutzern entwerfen. Der Americans with Disabilities Act (ADA) verlangt sogar, dass bestimmte Organisationen die WCAG 2.0 Level AA-Richtlinien erfüllen.

Es ist nicht schwierig, Ihre Website ADA-konform zu machen, aber es bedeutet, die Farbzugänglichkeit zu berücksichtigen. Abgesehen von rechtlichen Konsequenzen ist das Design für farbenblinde Benutzer für die von Ihnen angebotene Benutzererfahrung von entscheidender Bedeutung.

Warum Design für Farbenblindheit wichtig ist

Die Farbtheorie spielt eine große Rolle im UI-Design, da Farbe die Kaufentscheidungen, die emotionale Reaktion und die allgemeine Benutzererfahrung eines Benutzers beeinflussen kann. Denken Sie darüber nach, wie wichtig die Wahl der richtigen Markenfarben für ein Unternehmen ist. Stellen Sie sich nun vor, dass über 8 % der Menschen Ihr Logo oder Ihre Website aufgrund der von Ihnen gewählten Farben nicht lesen können. Das ist eine Menge verpasster Gelegenheiten.

Da farbenblinde Benutzer bestimmte Farben nicht unterscheiden können, können sich Designer für die Lesbarkeit oder emotionale Wirkung eines Designs nicht allein auf die Farbe verlassen. Wenn Sie Farbe verwenden, müssen Sie berücksichtigen, wie Benutzer damit interagieren, und ein interaktives Design erstellen, das die Zielgruppe anspricht – einschließlich farbenblinder Mitglieder. Es ist die Aufgabe eines Designers, sich einfühlsam mit den Schmerzpunkten der Benutzer zu befassen, damit sie diese verhindern und lösen können.

Heutzutage gibt es Tools wie Visolve, die Computerbildschirme für bestimmte Arten von Farbenblindheit anpassen können, aber nicht alle farbenblinden Personen verwenden diese Tools – nicht einmal alle farbenblinden Personen wissen, dass sie farbenblind sind.

Es ist wichtig zu beachten, dass Ihre Website nicht der einzige Ort ist, an dem die Zugänglichkeit von Farben berücksichtigt werden sollte. Sogar Ihre sozialen Medien können für Blinde und Sehbehinderte zugänglich gemacht werden.

Wissenswerte Farbterminologie

Bevor wir uns mit den Best Practices für das UI-Design für farbenblinde Benutzer befassen, ist es gut, die Grundlagen der Farbe für diejenigen zu überprüfen, die keine Designexperten sind. Bei der Auswahl eines Farbschemas sind vier Hauptkomponenten zu berücksichtigen:

Farbton: Dies ist ein Synonym für „Farbe“ und wird durch die spektrale Wellenlänge einer Farbe bestimmt.

Sättigung: Auch Chroma genannt. Dies ist, wie intensiv oder rein eine Farbe ist, bestimmt durch die Menge an vorhandenem Grau. Je weniger Grau vorhanden ist, desto heller erscheint eine Farbe.

Helligkeit: Die Helligkeit hängt von der Menge an Weiß oder Schwarz ab, die einer Farbe hinzugefügt wird, wodurch Farbtöne bzw. Schattierungen erzeugt werden.

Temperatur: So empfinden Sie eine Farbe als warm oder kühl. Ein Computermonitor kann die wahrgenommene Temperatur einer Farbe beeinflussen.

Wie man für farbenblinde Benutzer designt

Für Farbenblindheit zu entwerfen bedeutet nicht, Ihr Produkt weniger attraktiv zu machen; es bedeutet lediglich, während des Designprozesses bestimmte Best Practices zu befolgen. Die Implementierung guter UX- und UI-Designprinzipien wird die Benutzerfreundlichkeit Ihrer Website langfristig nur verbessern.

Definieren Sie nicht nur mit Farbe

Wenn Sie für farbenblinde Benutzer entwerfen, können Sie sich für keine Botschaft ausschließlich auf Farbe verlassen.

Dies ist ein häufiger Fehler bei der Datenvisualisierung, da Grafiken, Diagramme und Karten häufig farbcodiert sind. Üblich sind auch Buchungsformulare, die verfügbare Terminslots oder verfügbare Konzertbestuhlung per Farbcodierung anzeigen. Andere Beispiele umfassen das Kennzeichnen von erforderlichen oder fehlenden Formularfeldern, indem sie farbig umrandet oder Fehler farblich gekennzeichnet werden.

Sie sollten davon absehen, wichtige Informationen in farbigem Text und Bildern zu übermitteln oder diese Informationen zumindest auf andere zugängliche Weise bereitzustellen.

Kontrast- und Farbauswahl verstehen

Für farbenblinde Benutzer ist der Kontrast zwischen den Farben oft wichtiger als die Farbe selbst. Die Fokussierung auf den Kontrast ist für Designer von Vorteil, da die verschiedenen Arten von Farbenblindheit das bloße Vermeiden einer bestimmten Farbe ineffizient machen. Um das Kontrastverhältnis in einer für Farbenblinde geeigneten Palette zu verbessern, hellen Sie Ihre hellen Farben auf und verdunkeln Sie die dunklen.

Hier sind ein paar andere Möglichkeiten, die Sichtbarkeit Ihres Designs zu verbessern:

• Betonen Sie den Unterschied zwischen Ihrer Vorder- und Hintergrundfarbe
• Wählen Sie auf dem Farbrad keine Farbtöne nebeneinander, es sei denn, es besteht ein großer Unterschied in der Helligkeit
• Vermeiden Sie die Verwendung von Farben mit ähnlicher Helligkeit, unabhängig von Farbton oder Sättigung
• Erhöhen Sie die Sättigung der verwendeten Farbtöne

In Anbetracht dessen gibt es immer noch Farbkombinationen, die für verschiedene Arten von farbenblinden Benutzern eine größere Herausforderung darstellen können. Ihre farbenblinde freundliche Palette sollte sich von diesen Farbkombinationen entfernen, wenn das Kontrastverhältnis nicht signifikant ist:

• rot und Grün
• Grün und Blau
• Grün und braun
• Grün und grau
• Grün und schwarz
• Blau und grau
• Blau und lila
• Gelb und hellgrün

Implementieren Sie Muster und Texturen

Eine Möglichkeit, Ihre visuellen Designs für farbenblinde Benutzer zu aktualisieren, ohne sich allein auf die Farbpalette zu verlassen, ist die Verwendung von Mustern und Texturen. Dies funktioniert gut in Fällen, in denen Farbe normalerweise hilft, Informationen zu unterscheiden, wie z. B. in einer Grafik oder einem Diagramm. Das Hinzufügen von Muster- oder Texturelementen hilft den Elementen, sich voneinander abzuheben.

Verwenden Sie Symbole und beschriften Sie alles

Eine klare Kennzeichnung ist eine bewährte Methode, um jeden Benutzer durch die Customer Journey zu leiten, einschließlich derjenigen, die farbenblind sind. Etiketten können helfen, Informationen zu unterscheiden, die normalerweise mit Farbe übermittelt werden. Dies gilt für die Datenvisualisierung, wie z. B. Diagramme, oder für die Führung von Benutzern auf einer Webseite. Fragen Sie sich, ob sich ein Benutzer ohne die von Ihnen bereitgestellten Farbhinweise zurechtfinden kann.

Aus E-Commerce-Sicht sollten Sie Ihre Produkte auch mit klaren, beschreibenden Informationen kennzeichnen. Verlassen Sie sich nicht auf Produktfotos, um die ganze Geschichte zu erzählen; die Farbe eines Produkts kennzeichnen.

Überdenken Sie Ihre CTA-Buttons

Der Call-to-Action (CTA) ist ein wesentlicher Bestandteil des interaktiven Designs. Wenn ein Benutzer es nicht finden kann oder es nicht versteht, kommt er auf der Journey nicht voran und Sie werden Ihre Ziele nicht erreichen. Sie müssen die Aufmerksamkeit auf Ihren CTA lenken, und viele Designer verlassen sich dabei auf Farbe.

Gutes UI-Design implementiert Farbe, verwendet aber auch eine oder mehrere dieser anderen herausragenden Techniken für CTA-Buttons:

• Größe
• Platzierung
• Starker Kontrast
• Gewichtete Grenzen
• Gewichtete Schriftarten
• Symbolische Symbole
• Hover-Effekte

Diese Techniken funktionieren bei farbenblinden und nicht farbenblinden Benutzern gleichermaßen, und Sie können sie für andere Seitenelemente verwenden, auf die Sie aufmerksam machen möchten.

Unterstreichen Sie diese Links

Wenn Sie einen Blog lesen, einschließlich dieses hier, werden Sie feststellen, dass Links hervorgehoben werden, um Benutzer über ihre Anwesenheit zu informieren. Die gebräuchlichste Art, einen Link hervorzuheben, ist die Farbe. Verwenden Sie dafür Blau, da die meisten Menschen mit Farbsehschwäche es sehen können.

Es ist für Benutzer mit Achromatopsie oder Monochromie, obwohl seltenere Formen der Farbenblindheit, dass die Farbbetonung nicht ausreicht. Für diese Personen erscheinen farbige Links ausgegraut und sind von anderem Text nicht zu unterscheiden. Sie können dies schnell lösen, indem Sie Ihren Ankertext unterstreichen.

Denken Sie an Minimalismus

Minimalismus ist alles andere als neu. Die Ästhetik ist seit Jahrzehnten im Trend und hat ihren Weg durch Architektur, Kunst, Innendekoration und natürlich Design gefunden.

Und jetzt spielt Minimalismus eine Rolle bei der Zugänglichkeit von Farben, denn je weniger Farben vorhanden sind, desto geringer ist die Wahrscheinlichkeit von Verwirrung. Es ist auch stilistisch ansprechend und weniger ablenkend, was es zu einer soliden Wahl für alle Zielgruppen macht.

Sie müssen sich nicht an ein minimalistisches Design halten, um barrierefrei zu sein, aber es ist ein Weg, der funktioniert.

Verwenden Sie einen Farbenblindheitssimulator

Während die Design-Community auf eine barrierefreie Benutzererfahrung hinarbeitet, sind viele großartige Tools entstanden, die dabei helfen. Farbenblinde Simulatoren ermöglichen es beispielsweise Designern, ihre Designs so zu sehen, wie es ein farbenblinder Benutzer tun würde. Einer dieser Simulatoren, Oracle, ist für Mac, Windows und Linux verfügbar. Verwenden Sie einen Simulator für Farbenblinde, um Ihre Arbeit während des gesamten Designprozesses zu testen und zu verstehen, wie Benutzer mit Ihren Entscheidungen interagieren.

Wenn Sie sich in der Anfangsphase für Ihre Farbpalette entscheiden, empfehlen wir die Verwendung eines Farbauswahl-Tools, das Ihre Auswahl gemäß den AA-Richtlinien bewertet. Dieser Kontrastprüfer kann Ihnen Ihr Kontrastverhältnis mitteilen, und dieser barrierefreie Farbgenerator schlägt Farbkombinationen vor, die besser funktionieren.

Machen Sie Ihre Website barrierefrei

Das Design für Farbenblindheit stellt sicher, dass Ihre Website ein Benutzererlebnis bietet, das Ihr gesamtes Publikum navigieren und genießen kann. Für sie bedeutet es eine Marke, auf die sie sich verlassen können; für Sie bedeutet es erfolgreiche Conversions. Je nach Größe Ihres Unternehmens kann es auch bedeuten, sich an Gesetze zu halten. Unabhängig davon ist es Teil des Aufbaus einer fairen und gleichberechtigten Online-Umgebung.

Die Zugänglichkeit von Farben ist nur ein Element beim Erstellen einer einladenden Website. Lesen Sie unbedingt unseren Leitfaden zur Zugänglichmachung Ihrer Inhalte für die Gehörlosen- und HOH-Community.