web-dev-qa-db-ja.com

色盲:ステータス形状

ステータスアイコンのあるテーブルで作業していました。色付きのドット(黄色/赤/緑色)を使用してステータス(成功、警告、危険)を送信していました...明らかに、これは色覚異常の人々について考えると問題のある動きです。

ステータスを送信する形状のリファレンスを見つけようとしましたが、標準ではないようです...

これらは私が見つけた2つの例です。

enter image description here

enter image description here

これに関する慣例はありますか? W3Cに参照があるかどうか知っていますか?

69
Ana Neto

これは素晴らしい質問です。 W3Cの優れたコントラストカラー以外に規約はないと思います。

以下のリンクによると、最良の方法は、色だけに依存しない、何らかの視覚的な手掛かり、形状、または何かを追加することです。たとえば、「危険」ステータスを作成したい場合は、警告アイコンを追加できます。物理的な参照として歩行者信号について考えてください。

https://www.w3.org/WAI/gettingstarted/tips/designing.html#ensure-that-interactive-elements-are-easy-to-identify

https://medium.com/civiqueso/creating-a-visually-accessible-map-c8831f952525

http://webcache.googleusercontent.com/search?q=cache:LjApKlqn4zsJ:www.jenunderwood.com/2014/09/04/visualcue/

23
S M

アイコンを使用してください、それらは色だけでなく多くのことを伝えます。色を使用する必要がある場合は、アイコンに色を付けるだけです。

icons

161
Garik

基本的な形状は難しい作業になるだろう、これらには実際には慣習はない。例として、トリスタンの停止用の六角形は、私にとっては円です。

明白な答えは「ラベルを使う」です。しかし、それができない場合は、次のいずれかを行うことができます。

  • 等高線バイアス ロジックを使用してメッセージを送信します。最も鋭く、より危険です。だから、サークル:success;正方形:警告;三角形:危険
  • music playerロジックを使用してメッセージを送信します。したがって、三角形:success(遊びをメタファーとして使用);四角:danger(stopをメタファーとして使用); 2つの縦長の長方形:warning(pause using a metaphor)enter image description here
  • 基本的な形状を使用しないでください。これにはかなり標準化されたアイコンがいくつかあり、それらはWebフォントでも提供されます。もちろん、必要に応じてもっとクリエイティブにできます

もちろん、これらのアイコンの意味を説明する凡例でこれらのアイコンをサポートする必要がありますが、それは大した問題ではありません

10
Devin

私はこれについての調査や調査を実際に行ったことがありません。多分あなたはあなたの近くの交通標識の形を使うことができますか?ここでは、交通標識の形状に関していくつかの目安があります。

  • 丸い(白)境界線(赤)=これをしないでください
  • ボーダーのない丸(青)=常にこれを行う必要があります
  • ボーダー付きの三角形=要注意
  • ボーダーなしの正方形(青)=穏やかなリマインダー
  • オクタゴン=ストップ
5
TristanSchaaf

おっと、これは意外と興味をそそるトピックです。

私はトピックの専門家から遠く離れていますが、中程度の記事で取り上げられているカラー+アイコンマップは、非常に複雑なIMHO(そして私の腸/味覚以外の経験的データに基づいていない)のようです。

私は、ゲームが色盲モードを提供する方法に常に興味を持っています。色盲モードは、通常、設定で利用できますが、少なくとも、ほとんどcommonのタイプの色盲です。

  • 第三色覚異常
  • 重水素症
  • 第一色盲

私はこのソリューションがどれほどうまく機能するかわかりませんが、あなたが言うように、アイコン/シンボルの使用に黄金の標準がないため、それが唯一の「ソリューション」です( https://www.nngroup.com/ articles/icon-usability / )。

-funfactについては、韓国の学校が間違った解答にチェックマークを付け、正しい解答に丸印を付けている方法を確認できます-

5
Federico Kotek

私が知っている慣習は、(1)情報を伝えるために色だけを使用しない(指摘しているように)こと、および(2)アイコンだけを使用しないことです。 (この記事の「アイコンにはテキストラベルが必要です」@ Nielsen/Norman を参照してください。)

具体的な状況はわかりませんが、#2を推定して形状をカバーする場合があります。したがって、ステータスを伝えるためにテキストを使用することを検討する必要があります。記号や色を追加しても問題ありませんが、すべてのユーザーにステータス情報が提供されるわけではありません。

3
Ken Mohnkern

ここでの2つの考慮事項は、すべて WCAG 2.0/1.4.1 に関連しています。目標は、色や形だけに頼らずに、ユーザーや支援機器に意味を伝えることです。

  1. 現在使用している記号に何らかのアイコンが含まれている場合、意味を伝えるために色に依存することに関する問題を解決します。
  2. 記号内でアイコンを使用した場合および同等のテキスト(「成功」、「警告」、「エラー」)が提供されると、色覚異常のあるユーザーにも役立ちます。スクリーンリーダーを使用しているものと同じです。
3
Nic

良い戦略は、明るさの違いで形状または位置インジケーターを補強することです。

たとえば、信号機は赤、オレンジ、緑を使用していますが、違いがわからない人でも、上/中央/下の位置を学習できます。同様に、形状によって学習できます。X記号は「閉じる」を意味し、+は「追加」を意味します。

真実が学習されると、それは色に関連付けられます。色が間違っていても、明るさが類似していない限り、人は正しい信号機を色で識別できます。

看板、ほとんどすべての歩行信号および信号機で使用されるほとんどの緑は、非常に明るい緑の色合い(高輝度/白のコンテンツ)であり、赤は中程度の明るさまたは明るい色合いになる傾向があります。偶然ではありません。グレースケールで見た人でも、2つを区別することができます。

たとえば、一方が明るく、もう一方が暗い限り、人々が問題を抱えている色相を引き続き使用できるため、それがより多くのオプションを開くことを理解すること。

1
jv_

Borderlandsゲームの開発者にも同じ問題がありました 。ゲームを知らない人のために、これは未来の砂漠の惑星に設定されたRPG/FPSゲームで、モンスターとエネミーが戦利品を落とし、品質に応じて色付きのビームで表示されます。

色覚異常を管理するために、

  • ユーザーが自分が持っているケースを選択する色盲設定を設定します(第一色盲、重度....)
  • すべてのビームの色をリストしてそれらを配置します ダルトン化フィルター内 それらがまだアクセス可能かどうかを確認します
  • オブジェクトをホバーするときにテキストのヒントを追加しました

Webサイトなどで色をテストする場合は、Daltonizeに色を配置するだけでなく、コンテキスト全体(画像、テキストなど)を読んで、それが読み取り可能かどうかを確認してください。

0
Goufalite