警告色は色覚異常のユーザーにとって本当に使いやすいですか？
bootstrapが指定されていても、色だけを使用して区別される多くのアラートボックスを確認しました。このボックスは、色覚異常のユーザーにとって本当にユーザーフレンドリーですか？
素早い回答
あなたの場合、配色は色覚障害者にとって安全ではありません。まず、色覚異常にはさまざまな種類があることを忘れないでください。画像が安全でない理由を要約しましょう（これを再現するには、2つ異なるオンライン色覚異常シミュレータを選択してください）。
- 色覚異常：灰色の濃淡のみが表示され、明らかにすべてのボックスが同じcolorです。この配色の問題点は、黄色と緑の輝度が非常に似ているため、簡単に混同される可能性があることです。
- 第一色覚異常：緑と赤のボックスは同じ色合いとして表示されますcolor。
- Deuteranopia：おそらくOK。
- Tritanopia：ほとんど問題ありませんが、黄色と赤は同じ色合いとして表示されますcolor。
- 変色症：OK。
- 重度：OK。
- 四色腫：OK。
- ブルーコーン単色性：OK。
これらの基本的なテストを実行した後、さまざまなカラープロファイルをシミュレートして、類似した色が混同されないことを確認する必要があります（この場合は、色覚異常が優れた例です）。また、いくつかの異なるモニターが必要になる場合があります（ユーザーのハードウェア設定について確信がない場合は、異なるプロファイルと異なる品質を使用します）。
実際に使用した例が必要ですか？ ハイライトされているときに「実績」アイコンの色を変更します（Deuteranopiaのユーザーの場合） 。回答にはsimulationを入力してください。また、[Ask Question]の下のチェックされたボタンの赤みがかった色にも注意してください。また、色覚異常でない場合は、トーンが区別できるため、シミュレート画像は十分であると考えるかもしれませんが、OPは"と言っています。 。緑色で強調表示されていますが、非アクティブ状態の灰色にかなり近いです]。
一般的なディスカッション
一般的な規則として、色は、情報を伝えるために使用される唯一のメディアであってはなりません。あなたの例ではテキストもあり、それはmayで十分です（ただし、コントラストについて Andrewの提案 を考慮してください）。画像mayは役立ちますが、警告とエラーにのみ画像を使用しない限り、テキストよりもはるかに多く追加されることはありません。この場合、normaのバリエーションが示されます。
ただし、ユーザーの注意を引くために色も使用される場合があります（ダッシュボードのalarmなど）。注意を引く他の手法があります（フォントサイズ/スタイルやアニメーションの変更など）。画像は解釈する必要があるため、これには適していません。ユーザーが注意するのはchangeです。 、画像自体ではありません。このため、警告とエラーの場合にのみ画像を追加することを提案しました（すべてのボックスに異なる画像がある場合、重要画像は見過ごされます）。この質問の範囲...
あらゆる種類の欠陥に適した配色を見つけるのは簡単ではありません。異なる色合いを注意深く選択して、色を区別しやすくすることです（そして、緑と赤が色盲と同じように見えるのを避けます）。パレットはNiceでなければならないので、通常の色覚を持つ人にとっても難しい作業です。
重要な環境では、これらの妥協点を受け入れず、さまざまなパレットを提供することができます。生命に関わるアプリケーションの場合、最も一般的なタイプの色覚異常について、少なくとも数人の色覚異常者でもテストを実行する必要があることに注意してください。あなたはユーザーインターフェイスは人為的エラーを容易にしません。
いくつかの理論
このトピックについての本やオンラインリソースはたくさんあります。簡単な概要を考えてください。
重度異常（緑色光に対する感受性の低下）と色覚異常（赤色光に対する感受性の低下）は、最も一般的な（この瞬間およびAFAIK）色覚異常のタイプです。多くの/ほとんどのアプリケーションで、これらは実行する必要がある基本的なテストです。
色覚異常、色覚異常、双眼および二色性視力は非常にまれですが、ユーザーインターフェイスの外観に深刻な影響を及ぼします。主な問題は、赤みがかった灰色の色合いと、赤/オレンジ色が付いた緑/青の色合いの混同を引き起こす可能性がある、近視によって引き起こされます。重水素症によって引き起こされる最も重大な混乱は、緑と赤の色合いです。
カラーユニバーサルデザイン（CUD）-色覚障害者にやさしい図やプレゼンテーションを作成する方法-岡部正孝と伊藤圭によるクイックサンプル （最初に投稿された 選択する色色盲の人？ ）：
テストする方法？
この問題へのアプローチが単純すぎることがよくあるので、これらのテストをどのように実行する必要があるかを要約しましょう。これは常に厳密なアプローチを必要とするわけではありませんが、一部のアプリケーションでは、それが有用であり、必要な場合は、知っておく必要があります。これを読んでcum grano salisを読み、より適切なものを使用してください。
1）ICCカラープロファイルを選択して色覚異常をシミュレートし、いくつかのテストを自分で実行します。これは、少なくとも最も一般的な色覚異常のタイプに対して行います。
2）いくつかのツール（オンラインリソースもいくつかあります）を使用して、アプリケーションのすべての関連画面のすべての色覚異常タイプをシミュレートします。定性分析を実行して、色合いが依然として区別しやすく、色覚異常のユーザーがさらに混乱していないかどうかを判断します。テキストのコントラストも測定することを忘れないでください。
3）異なるモニターでポイント1と2を繰り返します。カラープロファイルは、カラーキャリブレーションされた参照モニターとは大きく異なる場合があるためです。カラープロファイルを使用してこれをシミュレートできますが、可能であれば、安価なモニターをいくつか使用します（明るさとコントラストも大きな役割を果たすためです）。
4）これらのカラープロファイルを使用して、正式なユーザーエクスペリエンステストを繰り返します。完全なテストである必要はなく、ユーザーの反応性（アラートおよび画面上の要素を見つけるため）とfatigueに集中する必要があります。これは、少なくとも最も一般的な色覚異常のタイプに対して行います。繰り返しますが、このテストすべきは、少なくとも2つの異なるモニターを使用して実行されます（1つはキャリブレーション済み、もう1つは安い。）
5）可能な場合（およびアプリケーションに厳しい安全要件がある場合）、色覚障害者をほとんど使用しないでユーザーエクスペリエンステストを繰り返します。色覚障害にはさまざまなレベルがあるため、これは重要です本物テストが必要です。残念ながら、良いサンプルを入手することはほとんどできません。1人を選んで簡単なテストを実行し、ポイント4からのシミュレーション結果を検証することができます。私は、個人的なプロジェクトでは、常に父（軽い重度）を使用したことを認めます...
オンラインシミュレータを使用してカラーパレットオプションをチェックすることを検討してください Coblisなど（ http://www.color-blindness.com/coblis-color-blindness-simulator/ ）、さまざまな色覚異常のバリエーションをシミュレートして画像がどのように見えるかを示します。
この種の問題から保護するために、オプションをさらに区別するために形状、コントラスト、および/またはアイコンを使用することをお勧めしますも一般的に受け入れられています。ストーリーテリングセッション（このビデオでは21:00頃）で、Enterprise UX 2016カンファレンスのMatt Desioによるこの素晴らしいストーリーを聞くことができます。
重要ですが、色覚異常は必ずしもこの場合には関係ありません。
アラートが他のものと混同されないような方法で配置されていて、さまざまな種類のアラートが色だけで区別されていない場合（たとえば、例のようにテキストでアラートタイプを示している場合）、問題はないはずです。 。
ただし、質問に含まれている例を見ると、色のコントラストに問題がある可能性があります。テキスト（前景色）と背景色の違いは、アクセシビリティテストに合格するほど強くないようです。青と緑は小さなテキストのAAAに失敗しますが、黄色と赤は大きなテキストのAAを除いてすべて失敗します。
意味を伝えるために色だけを使用しているわけではありません-色 AND テキストを使用しています。
したがって、テキストを読み、閉じるアイコンをクリックするのが簡単になるように、前景色（テキストと閉じるアイコン）と背景色に十分な視覚的コントラストがあることを確認するだけで済みます。
これらのアラートのコントラストレベルを確認しましたBootstrapアラートとWCAG2.0のコントラスト要件を満たしています。
したがって、要約すると、この場合、テキストの目的を伝えるテキストと背景色から目立つ閉じるアイコンが原因で、色覚異常は潜在的に赤いニシンです。
他の状況では明らかに、色覚異常のあるユーザーにページがどのように表示されるかを考えることが非常に重要であり、色覚異常シミュレーターを使用することは、潜在的な問題を特定するための非常に簡単な作業です。
一般に、重要な情報を色だけで、または色とテキストでエンコードすることはお勧めできません。
色の知覚は状況によって異なります。昼間の平均的な色の知覚があっても、夜に色を認識することがどれほど難しいかを考えると、その真実を簡単に確認できます。
そして、多くの人々は色の認識が良くありません。赤緑と青オレンジの混同はかなり一般的ですが、色をまったく認識しない人もいます。そして、いくつかは先天性または加齢に関連した白内障を持っています。そして、それはすべてをより淡く見せる効果があります。
さらに、色の知覚の限界に気づいていない人、またはその大部分を経験する人もいます。彼らが成功するのは、色が唯一の差別化要因である状況はあまりないからです。信号機の赤と緑のレンズを切り替えると、その交差点での交通事故の数が目に見えて増加します。
そのため、道路標識は色に依存しません。代わりに形状（最も基本的なアイコン機能）が使用され、通常はin colorで表現されますが、-by colorでは表現されません。 （例を含めますが、おそらくそれらはすでに十分によく知られていると思います：triangle = warning、ring =（potential）error、rectangle = info）。
4つのメッセージボックスの例は、標準の標識アイコンを使用することで、基本的な意味（情報、警告、エラー、満足度）をより強く伝えます。
色覚異常のあるユーザーは、 1つの色の異なるトーンを区別でき、異なる色を区別するのが難しくなります。赤と緑は、色覚異常のあるユーザーにとって同じように見えます。ただし、色覚異常にはさまざまな種類があります。
Photoshopには、画像の色覚異常をテストするためのオプションがあります： Protanopia および Deuteranopia 。私は両方の機能を試しましたが、それはあなたの例が色覚異常のためにユーザーフレンドリーであることを示しています。
私は常に、何かを区別する2つのインジケーターがあることを確認するというルールに従いました。あなたの場合、あなたは色+テキストを持っています。つまり、色を区別する場合でも、インジケーター（つまり「警告」）が常にメッセージと共に表示されるようにする必要があります。
色付きのアイコンについても同様です。同じアイコンを使用してはならず、色を変更してください。各アイテムのアイコンと色の両方を常に変更してください。これの良い例は、信号機です。すべての色が1行にあると想像してみてください。特定の人にとって、光が何色であったかを知るのは非常に難しいでしょう。代わりに、position（shape）は各色を区別するのに役立ちます。したがって、トップライトの色が赤であることを認識できない人にとっては、lit + off + off =赤です。