web-dev-qa-db-ja.com

ユーザーインターフェイスが色覚異常の人に適しているかどうかを確認するにはどうすればよいですか?

さまざまな色からなる視覚化を行いました。次に、色覚異常の人も私のアプリケーションを有意義な方法で使用できるかどうかをテストしたいと思います。色覚異常の人がそれを知覚するような私のアプリケーションを確認するために実行できるツールなどはありますか?

私のアプリケーションは単純なJava 処理フレームワーク を使用して視覚化を描画するアプリケーションです。アプリケーションにフックして実現できるフレームワークまたはツールを本当に好みますこれが不可能な場合は、スクリーンショットをアップロードできるWebサイトも使用できます。

41

Color Oracle と呼ばれるWindows、Mac、Linux用の素晴らしいクールなデスクトップアプリがあり、これは本当に気の利いたものであり、さまざまな種類の色覚異常をリアルタイムで模倣するために表示されるすべてを調整し、静止画像に限定されません。またはウェブサイト。

以下は、それぞれDeuteranopia、Protanopia、Tritanopiaの下のUX Webサイトを示すスクリーンショットです。

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)

私の壁紙とブラウザchromeも変更されていることに注意してください。OS全体がカラー処理を取得しているため、アイコン、ムービー、およびWebサイト以外の多くの他のものをテストできます。

32
Kit Grose

あなたは幸運です。これを行うウェブサイトはたくさんあります。ここに私が使用する2つがあります:

http://www.vischeck.com/vischeck/vischeckURL.php -指定し​​たWebサイトをテストします。あなたはスナップショットを取り、それをウェブサーバーに置くことができます。 (Processingアプレットでは機能しないと思います。)

http://colorfilter.wickline.org/ -同様のアイデアで、さらに多くのオプションがあります。

15
Alex Feinman

そのためのツールがあります:

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

安全なアプローチとして、WCAGカラーコントラスト式に一致するハイコントラストの色を使用します。

誰かがそのためのオンラインツールを作成しました: http://www.snook.ca/technical/colour_contrast/colour.html

色が答えにならない場合は、なぜパターン背景を使用しないのですか? ..ここにたくさん: http://lea.verou.me/css3patterns/

9
Rdpi

PhotoshopまたはIllustratorを使用している場合、DeuteranopeとProtanopeの両方のビジョンに表示されるスクリーンショットを確認できるビューフィルターがあります。 CS5では、[表示]> [プルーフセットアップ]> [色覚異常...]の下にあります。

また、アプリケーションをテストするために、色覚異常のある人を見つけることもできます。色覚異常は男性の約12分の1に影響を与えるため、誰かが影響を受けていることを知っている可能性があります。

6
hannahd

私は常に、自分のインターフェースが色盲の問題を抱えている可能性のある人々にどれだけうまく受け入れられるかを意識するようにしています。また、色覚のバランスが取れたページを作ることも、ユーザーの目に優しいと思います。

目が完璧でも、白い背景に黄色のテキストを見るのは面倒です。

これをバランスさせるために、私はいくつかのアプローチをとり、過去に色のデザイン、構成、バランスに関して私が知っている実際のさまざまなアーティストに相談しました。

色の選択

この部分がステップ1になるはずです。使用する主な色は何ですか?色盲基準に準拠する色を選択することは可能ですが、希望する色とは限りませんが、それに近い色を選択できます。たとえば、緑色のストップライトには、色覚異常を助けるために青が少し含まれているだけですが、ほとんどの人はおそらくそれらを緑色で観察します。

あなたはあなたの色#f6ec01を持っています(ランダムに16進数の値を入力しました-くすんだ茶色などではないことを願っています)。さて、これでベースカラーが手に入ったので、 http://www.colorhexa.com に行き、その16進値を検索します。

enter image description here

素晴らしい、それは黄色でした。これで作業できます。ページの一番下までスクロールすると、colorhexaは素晴らしいツールを提供します。

enter image description here

リストされている各色にカーソルを合わせると、人口の何パーセントが自分の色をその色として表示するかがわかります。私の場合、男性の6%が私の黄色をわずかに黄色がかった黄色として見ることになります。表示されている他のパーセントと色はかなり低く、人口の約0.0001%でした。最悪のケースのシナリオでは、わずかに黄色がかっています。

したがって、サイトの現在の色セットを評価している場合でも、このツールを使用して、人口の何パーセントがサイトを表示しているのかを確認できます(たとえば、高いパーセントでグレーが多すぎる場合)。

標準コントラストの確保

これは非常に重要であり、別のツールを使用します。黄色のテーマを続けて、ランダムに任意の色を使用でき、これらのアプローチに基づいてバランスとテーマを純粋に機能させることができると仮定します。

次に使用するツールは http://webaim.org/resources/contrastchecker/ W3Cの Web Content Accessibility Guidelines に対してテストします(実際のツールです。 World Wide Web Consortium(W3C))。

私の色をテキストとして使用してポップにしたい!だから私はそれが通常の白いデフォルトの背景にあることのコントラストが何であるかをチェックしに行きます(私は以前に白の黄色のテキストを言ったのを知っていますが、これは純粋な偶然です)。

enter image description here

まあ、コントラストは恐ろしいです。標準(ページの下に表示)では、通常のテキストの比率は4.5:1である必要があり、これは機能しません。注:黄色の背景と白の前景のようにこれらを反転すると、同じコントラストになります。

色構成

うまくいきませんでしたが、自分の選んだ色を使いたいです。ここで色の構成が始まります。色の補色と二次色を使用すると、視覚的側面のバランス、適切なコントラスト比、および黄色のバランスを取るためにすぐに使用できる色のセットの両方が提供されます。

これを行うのに最適なツールは http://paletton.com/ です。 「4色(4色)」の表示を選択して色を検索すると、コントラストのバランスがとれた色をすべて使用できるようになります。また、色覚異常をお持ちの方にもわかりやすい色を用意しましたので、貴重な一式となります。

enter image description here

だから、これはそれが思いついたものです。円のメインドットが黄色で、2番目の色が緑色になっています。また、紫色の領域の円の反対側のサイトで色の賛辞を見ることができます。右側には、使用できるこれらの色の濃淡とともに、これらの4色(補色と二次色の両方)のセット全体があります。 colorhexa.comに戻ってこれらの色合いを確認する場合は、個々の色の色合いの内訳を表示して、色覚異常の側面がカバーおよびサポートされていることを確認することもできます。

これで、20色のセットがあり、どの色が適切な色のコントラストとバランスが取れているか、および色覚異常のユーザーがそれらを見ることができる色合いを確認できるようになったので、自分の色のテーマで視覚的に魅力的なページを作成できます。まだ最初から欲しかった。

5
Travis J

Jenn Lukasが書いた A List Apartに関する記事 [4月9日2014] Chromeのユーザー補助開発ツールを使用して色のコントラストを簡単にテストする方法を示しています。

1
Hynes