色覚異常のアイコンの色分け
4つの状態を持つ2つのアイコン（チェックと感嘆符）があるシナリオがあります。アイコンの色は次のシナリオで変化します
- 状態1-！ -灰色（設定がありません、コンテンツがあります）
- 状態2-！ -青（設定が行われ、内容があります）
- 状態3-チェック-灰色（設定がありません、内容があります）
- 状態4-チェック-緑（構成が行われ、内容があります）
しかし、色覚異常の人にとっては、アイコンの色が変わっても、緑が灰色に変わるため、目立ちません。この問題を処理する方法、この問題を処理するための背後にある提案や科学。
「緑が灰色に変わる」は厳密には当てはまりません-Deuteranopes（色覚異常の最も一般的な形式）の場合、緑は灰色と区別できるような濁った茶色に変わります。色覚異常のユーザーに表示されるようにページの色を変更する多くのブラウザプラグインの1つを使用して、これを自分で確認できます。これにより、グレー状態とグリーン状態を区別する問題が効果的に解決されます。
ただし、任意のオブジェクトの異なる状態を区別するために色だけを使用することはお勧めしません。
あなたの例では、不完全な状態（「設定がありません、内容があります」）と完全な状態（「設定が行われました、内容があります」）があるように見えます。アイコンが不完全な場合は三角形の「警告」形状で、完全な場合は円形の「全体」形状でアイコンを表示することは、想像力を大幅に拡張するとは思わない-または他の形状ベースの構成選択。
もちろん、何をする場合でも、アイコンをまったく表示できないユーザーのために、アイコンの目的を示す何らかのalt値を含める必要があります。
ColorOracle を使用していくつかのシミュレーションを行いました。
赤-緑の色覚異常（重度老眼と色覚異常）では問題なく機能するように見えますが、青-緑の問題（色覚異常）の人は見づらいでしょう。
そして、それはあなたがわずかなパレット調整で完全に修正することができないものです。緑を黄色に移動するか、青を紫に変更する必要があります： 
色の組み合わせが色覚異常のある人に適しているかどうかを知る最良の方法は、画像をグレースケールに変換することです。
もちろん、色覚異常を持つほとんどの人は色を見るでしょう。しかし、色覚異常の種類によっては、うまくいく組み合わせを見つけるのが難しいです。
色を使用するためのガイドライン
- 彩度、明るさ、色相で色を区別します。
- 特徴的な色を使用してください。
- 色覚障害者が区別できない色のペアは避けてください。 （この回答の下部を参照してください）
- 他のキューと重複して色を使用します。
- 強い対戦相手の色。
必要に応じて、これらの点について詳しく説明します。出典：「心を念頭に置いた設計」、Jeff Johnson。
これらのポイントは、色覚障害者のための色の使用を最適化するだけでなく、他のすべての訪問者が色をより迅速に区別するのにも役立ちます。
色覚異常の種類：
色覚異常ジェネレータを使用して例をレンダリングしました。
デューテラノピア（別名、赤-緑の色覚異常）-最も一般的な：
Blue Cone Monochromacy：
色覚異常/単色性：
Green-Blind/Deuteranopia：
赤弱/変色：
青弱/三色異常：
Blue-Blind/Tritanopia：
ソース： http://www.color-blindness.com/coblis-color-blindness-simulator/
結論
ほとんどの場合、大丈夫です。しかし、より明確にするために、違いをよりよく示すために、彩度と明るさに焦点を当てます。また、Andrew Martinがすでに述べたように、違いを示すために色だけを使用しないでください。