web-dev-qa-db-ja.com

色覚異常ユーザーのためのインジケーターのような信号機?

「良い」「平均」「悪い」を表示するインジケーターを実装したいと思います。

だから誰かが信号機の画像を思いついた。 (「良い」は緑の円、「平均」は黄色の円、「悪い」は赤い円)

色覚異常のユーザーはこのインジケーターを理解できますか?

そして、そうでなければ、他の表現を提案しますか?

4
jantimon

それはすべてコンテキストに依存します。色覚異常の車の運転手は、実際に遭遇する信号機にほとんど問題がありません。ただし、信号機のメタファーを別のドメインに移動すると、色情報がないと、シンボルを認識し、その意味を理解するのが難しくなります。

例えば: enter image description here グレースケールで enter image description here

私の意見では、信号機は品質インジケータの最良のメタファーではありません。私は、赤信号を一時停止の標識、危険または障害物と関連付けていますが、品質が悪いわけではありません。緑色のライトは安全を示し、黄色は警告を示します。

良い/平均的/悪い指標の代替:

  • 棒グラフ(完全に入力済み= 100%正常)
  • 星の評価(星が多いほど良い)
  • 悲しい/ニュートラル/幸せそうな顔(客観的な品質ではなく、主観的な満足度の場合)
  • 親指を立てる/下げる(ただし、文化的に安全ではない)

これらにはすべて独自の長所と短所があり(そのうちのいくつかは前にここで説明されています)、私が言及しなかった他の多くの可能性があるかもしれません。

11
Marielle

ユーザーは、一時停止標識の上部が「赤」または停止していることを知っていると主張されていますが、下部は移動していますが、この関連付けには依存しません。 top-bad/bottom-goodは厄介な関連付けです。red:bad :: green:goodの方がはるかにうまく機能します。この問題については多くの議論があります このサイト は、色覚異常のユーザーがストップライトで色を使用していると主張していますが、「異なる」色を見て、色のマッピングが非常に異なるため、これは当てはまりませんあなたの場合。私はその比喩を完全に避けます。

マルチモーダルアプローチは、色覚異常に対処する優れた方法です。要素の色の形状、位置、その他を変更すると、より明確に区別されます。交通のメタファーに合わせるために、一時停止標識(赤い八角形)は「悪い」を意味し、降伏標識(黄色の三角形)は「大丈夫」を意味するかもしれませんが、交通標識は必ずしも標準的ではありません。

私はもっ​​と慣用的な記号にこだわるでしょう:緑のプラス/良いことを確認、赤いX /悪いことを丸で囲んだ円。 「オーケー」はトリッキーです。多分-/ =/+?スペースが許せば、ラベルはしばしば素晴らしいです。視覚障害者のための代替テキストも忘れないでください。

(注:この例の目的のために、私は赤/緑の色盲のような「色盲」を意味すると想定します。これは、大多数の色盲ユーザーをカバーします。)

7
Ben Brocka

これは非常に役立つはずです。色覚が異なる人のために色の外観をシミュレートできるツールです。

http://www.iamcal.com/toys/colors/

説明:12人に1人が何らかの色の欠乏症を持っています。これは、Web用に設計している場合、12人に1人がサイトを表示できない可能性があることを意味します。それはたくさんの人々です。このツールは、さまざまな色覚を持つ人々のために、当サイトの色の外観をシミュレートするのに役立ちます。以下のパレットからテキストと背景色を選択し、色覚モードを選択します。

あなたのウェブサイトをテストするには、これを試してください:

http://colorfilter.wickline.org/

テストするWebサイトのURLを入力し、色覚異常のタイプを選択します。このツールは、色覚異常のユーザーに見えるようにWebサイトを表示します。 (JørnE. Angeltveitがこれに対応して投稿したことに対する謝辞 色覚異常ユーザー向けのUIデザインをテストするための適切なリソースは何ですか?

ベストプラクティスですか?WCAG 2.0はあなたの友人です。画像の色の違いによって伝えられる情報を含む代替テキストがあります。

もっと:

http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-without-color

6
Veluuria

少なくとも米国では、 信号機

通常、赤色光はその色相にオレンジ色を含み、緑色光は青色を含み、赤緑色の失明のある人々をある程度サポートします。

交通記号を使用したい場合、色覚異常のユーザーが視覚的に区別できる色に(他の回答のリンクを使用して)色を調整できない理由はありません。

カラーレンズのを変更することもできます。たとえば、赤の場合は正方形、緑の場合は三角形などです。サイズ/解像度によっては、あまり明確でない場合があります。または、おそらく現在アクティブなレンズの周囲に厚いborderがあります。

3
John C

Photoshopですばやく汚れた色盲テストを行うことができます。

画像を作成するか、Photoshopで画像を開きます。カラーモードを「Lab Color」に変更します「Lab」チャンネルをオフにします「チャンネル」パレットを使用してグレースケール(「明度」チャンネルのみ)、青/黄色の色盲(「明度」と「a」チャンネル)を切り替えることができます)、および赤/緑の色盲(「明度」と「b」チャネル)。

すべての色盲チェッカーと同様に、これらは色盲の人が見るものの近似にすぎません。

0
eBeth