it-swarm.com.de

Wie kann ich überprüfen, ob meine Benutzeroberfläche für farbenblinde Personen geeignet ist?

Ich habe eine Visualisierung gemacht, die aus verschiedenen Farben besteht. Jetzt möchte ich testen, ob auch farbenblinde Menschen meine Anwendung sinnvoll nutzen können. Gibt es ein Tool usw., mit dem ich meine Anwendung so sehen kann, als würden farbenblinde Menschen sie wahrnehmen?

Meine Anwendung ist eine einfache Java -Anwendung, die das Verarbeitungsframework verwendet, um die Visualisierung zu zeichnen. Ich würde wirklich ein Framework oder Tool bevorzugen, das ich in meine Anwendung einbinden kann, um dies zu erreichen Wenn dies nicht möglich ist, wäre auch eine Website möglich, auf der ich einige Screenshots hochladen kann.

41

Es gibt eine spektakulär coole Desktop-App für Windows, Mac und Linux namens Color Oracle , die wirklich geschickt ist und alles anpasst, was Sie sehen, um viele verschiedene Arten von Farbenblindheit in Echtzeit nachzuahmen, und nicht auf statische Bilder beschränkt ist oder Websites.

Hier sind einige Screenshots, die die UX-Website unter Deuteranopia, Protanopia und Tritanopia zeigen:

A screenshot of the UX Stack Exchange website as seen by a Deuteranopic viewer (someone with red weakness)

A screenshot of the UX Stack Exchange website as seen by a Protanopic viewer (someone with green weakness)

A screenshot of the UX Stack Exchange website as seen by a Tritanopic viewer (someone with blue weakness)

Beachten Sie, wie mein Hintergrundbild und mein Browser chrome ebenfalls geändert werden - das gesamte Betriebssystem erhält die Farbbehandlung, mit der Sie Symbole, Filme und viele andere Dinge außerhalb von Websites testen können.

32
Kit Grose

Du hast Glück. Es gibt eine Reihe von Websites, die dies tun. Hier sind zwei, die ich benutze:

http://www.vischeck.com/vischeck/vischeckURL.php - testet jede Website, auf die Sie verweisen. Sie können einen Schnappschuss machen und ihn auf einen Webserver stellen. (Ich glaube nicht, dass es mit dem Verarbeitungs-Applet funktioniert.)

http://colorfilter.wickline.org/ - ähnliche Idee mit noch mehr Optionen.

15
Alex Feinman

Dafür gibt es ein Werkzeug:

http://michelf.com/projects/sim-daltonism/

Als sicheren Ansatz würde ich kontrastreiche Farben verwenden, die der WCAG-Farbkontrastformel entsprechen.

Jemand hat dafür ein Online-Tool erstellt: http://www.snook.ca/technical/colour_contrast/colour.html

Wenn Farben nicht die Antwort sind, warum nicht Musterhintergründe verwenden? ..viel hier: http://lea.verou.me/css3patterns/

9
Rdpi

Wenn Sie über Photoshop oder Illustrator verfügen, gibt es einen Ansichtsfilter, mit dem Sie Screenshots anzeigen können, wie sie sowohl in Deuteranope als auch in Protanope Vision angezeigt werden. In CS5 befindet es sich unter Ansicht> Proof-Setup> Farbenblindheit ...

Sie können auch versuchen, eine Person mit Farbenblindheit zu finden, um Ihre Anwendung zu testen. Farbenblindheit betrifft etwa 1 von 12 Männern. Sie kennen also wahrscheinlich jemanden, der betroffen ist.

6
hannahd

Ich versuche immer zu wissen, wie gut meine Schnittstellen für Menschen mit farbenblinden Problemen ankommen. Ich bin außerdem der Meinung, dass das Erstellen einer Seite, die für Farbenblindheit ausgewogen ist, auch für die Benutzer im Allgemeinen einfacher ist.

Selbst wenn Ihre Augen perfekt sind, wird es ärgerlich sein, gelben Text auf weißem Hintergrund zu betrachten.

Um dies auszugleichen, verfolge ich verschiedene Ansätze und habe in der Vergangenheit auch verschiedene mir bekannte Künstler in Bezug auf Farbdesign, Komposition und Ausgewogenheit konsultiert.

Auswahl einer Farbe

Dieser Teil sollte Schritt 1 sein. Welche Hauptfarbe möchten Sie verwenden? Es ist möglich, eine Farbe zu wählen, die den Farbenblindheitsstandards entspricht und dennoch nahe an der gewünschten Farbe liegt, wenn nicht sogar genau. Zum Beispiel enthalten grüne Ampeln jetzt nur noch einen Hauch von Blau, um bei Farbenblindheit zu helfen, aber die meisten Menschen beobachten sie wahrscheinlich nur als grün.

Sie haben also Ihre Farbe # f6ec01 (ich habe zufällig einen Hex-Wert eingegeben - ich hoffe, es ist nicht wie mattes Braun oder so). Okay, jetzt, da Sie Ihre Grundfarbe haben, möchten Sie zu http://www.colorhexa.com gehen und nach diesem Hex-Wert suchen.

enter image description here

Großartig, es war gelb. Damit können wir aber arbeiten. Das Scrollen bis zum Ende der Seite colorhexa bietet ein erstaunliches Werkzeug.

enter image description here

Wenn Sie mit der Maus über jede aufgelistete Farbe fahren, wird angezeigt, wie viel Prozent der Bevölkerung Ihre Farbe als diese Farbe anzeigen. In meinem Fall habe ich festgestellt, dass 6% der Männer mein Gelb als leicht gelblich sehen. Die anderen gezeigten Prozentsätze und Farben waren eher gering, etwa 0,0001% der Bevölkerung. Im schlimmsten Fall haben wir ein leichtes Gelb, mit dem wir meiner Meinung nach leben können.

Selbst wenn Sie einen aktuellen Farbsatz auf einer Website auswerten, können Sie mit diesem Tool feststellen, wie viel Prozent der Bevölkerung Ihre Website anzeigen (z. B. wenn ein hoher Prozentsatz zu viel Grau sieht).

Sicherstellen des Standardkontrasts

Dieser ist wirklich wichtig und wir werden ein anderes Werkzeug dafür verwenden. Lassen Sie uns mit unserem gelben Thema fortfahren und davon ausgehen, dass wir jede Farbe zufällig verwenden können und die Balance und das Thema dennoch nur auf der Grundlage dieser Ansätze funktionieren.

Das nächste Tool, das wir verwenden werden, ist http://webaim.org/resources/contrastchecker/ , das anhand der Richtlinien für die Barrierefreiheit von Webinhalten aus dem W3C (The real one. The) getestet wird World Wide Web Consortium (W3C)).

Ich möchte meine Farbe als Text verwenden, damit sie platzt! Also überprüfe ich, wie der Kontrast auf einem normalen weißen Standardhintergrund ist (ich weiß, dass ich früher gelben Text auf Weiß gesagt habe, aber das ist reiner Zufall).

enter image description here

Nun, der Kontrast ist schrecklich. Der Standard (unten auf der Seite gezeigt) besagt, dass das Verhältnis für normalen Text 4,5: 1 betragen muss und dies nicht funktioniert. Hinweis: Wenn Sie diese wie im gelben Hintergrund und im weißen Vordergrund umdrehen, erhalten Sie den gleichen Kontrast.

Farbzusammensetzung

Obwohl das nicht funktioniert hat, möchte ich trotzdem meine gewählte Farbe verwenden. Hier kommt die Farbkomposition ins Spiel. Die Verwendung von Farbkomplimenten und Sekundärfarben bietet sowohl ein Gleichgewicht zum visuellen Aspekt, ein angemessenes Kontrastverhältnis als auch eine Reihe von Farben, mit denen wir unser Gelb sofort ausgleichen können.

Ein großartiges Tool, um dies zu tun, ist http://paletton.com/ . Wenn Sie die Anzeige "Tetrade (4 Farben)" auswählen und nach Ihrer Farbe suchen, erhalten Sie ein ganzes Arsenal an Farben, die alle kontrastausgeglichen sind. Da wir außerdem sichergestellt haben, dass unsere Ausgangsfarbe für Menschen mit Farbenblindheit leicht zu erkennen ist, ist dieses Set von unschätzbarem Wert.

enter image description here

Das ist es also, worauf es ankam. Sie können den Hauptpunkt auf Gelb dort auf dem Kreis sehen, mit seiner Sekundärfarbe in Richtung Grün. Außerdem können Sie das Farbkompliment an der gegenüberliegenden Stelle des Kreises im violetten Bereich sehen. Auf der rechten Seite finden Sie eine ganze Reihe dieser 4 Farben (sowohl Komplimente als auch Sekundärfarben) sowie Schattierungen dieser Farben, die Sie verwenden können. Wenn Sie zu colorhexa.com zurückkehren und diese Schattierungen überprüfen, können Sie auch eine Aufschlüsselung der Schattierungen jeder einzelnen Farbe anzeigen, um sicherzustellen, dass der Aspekt der Farbenblindheit abgedeckt und unterstützt wird.

Nachdem Sie nun einen Satz von 20 Farben haben und feststellen können, welche Farben mit einem angemessenen Farbkontrast ausgeglichen werden und in welchen Farben farbenblinde Benutzer sie möglicherweise sehen, sollten Sie in der Lage sein, eine optisch ansprechende Seite mit dem von Ihnen gewünschten Farbthema zu erstellen noch zu Beginn gesucht.

5
Travis J

Jenn Lukas schrieb ein Artikel über A List Apart [9. April 2014] zeigt Wie Sie die Accessibility Developer Tools von Chrome verwenden können, um Farbkontraste einfach zu testen.

1
Hynes