大きな明るさの違いも伴う色の違いはWCAG 2.0に失敗しますかSC 1.4.1：色の使用？
WCAG 2.0達成基準1.4.1：色の使用 で内部プロジェクトのWCAGレベルAAコンプライアンスを評価しているときに、難問に遭遇しました。
私の評価の中で、明るさに関して周囲の要素と強く対照的な色に基づくインジケーターを提供するコントロールを評価しています。それらのコントロールは次のとおりです（スクリーンショットはブートストラップからのものです）：
Bootstrapのページ付けコンポーネント で実装されたページ付け。アクティブなページは色だけで示されます（私は思う）：
![a row of numbers, with one selected]()
Bootstrapのボタングループ に基づくフィルター。アクティブ/選択されたフィルターは色で示されます。
![to do, doing, complete: to do is highlighted.]()
これらのすべての要素には、さまざまなAria属性が追加されています（例：aria-selected）。ただし、支援技術を使用していないユーザーにはあまり関係がありません。
クランチ：これらは合格基準1.4.1：色の使用に合格または不合格ですか？
これは、アクティブなページが何であり、アクティブなフィルターが何であるかを示すのに十分ですか？
文字で、これらは単に異なる色を持っているので、私は考えるこれらは失敗します。これは、「メアリーの売り上げは赤、トムの売り上げは青」の例に似ていますが、白では選択されていない、青では選択されています。
ただし、これらの要素にも大きなコントラストの違いがあり、完全に色覚異常の人でも、1つのコントロールが暗くなっていることがわかります。それは以下を除くすべての人を満足させます：
- テキストのみの限定カラーまたはモノクロディスプレイを使用しているユーザーは、色に依存する情報にアクセスできない場合があります。
...しかし、これらの人々が実際に何を見るか、そしてとにかく多くの情報が破棄されている場合に彼らにとって何が役立つかはわかりません。
選択したページとフィルターに矢印やドットなどの追加や、別の見出しを追加する必要がありますか？ 「ページ1：」または「やること：」は、あなたが見ているものの明らかなインジケーターを運びますか、それともインジケーターとしてこの違いを持つのに十分ですか？
Googleをすばやく検索したところ、- 色覚異常に関するこの有益な記事 につながりました。 UXの質問を確認することをお勧めします 色覚異常者のテスト これは、色の欠乏に対処していることを確認するためのリソースを提供します。この質問に加えて、色の不足をシミュレートするためのchrome拡張機能（ Spectrum 、 see など））があります。
基本的な考え方は、区別を示す唯一の手段として色を使用しないことです。この問題は、いくつかの種類の区別を示すために異なる色が使用されている場合、さらに増幅されます。色が不足している場合は、複数の色がグレースケールに減少するため、表示しようとしている違いを見分けるのが難しくなります。
UIを考慮した場合、白と一緒に単一の色を使用している場合、それはグレースケールに減少し、ユーザーがサイト上のものを区別するための視覚的な手掛かりを提供します。将来、たとえば無効なリンクやセカンダリボタンなど、他の色を含めることを選択した場合は、使用しているアクティブな色と無効な色が同じレベルの灰色にならないようにする必要があります。上記のツールは、それを推測するのに役立ちます。
現在、単一のカラーパレットがあれば、問題はないはずです。
コントラストの差が大きいので、通常の画面をお持ちの方は、お使いのフォーマットで良いと思います。
完全なアクセシビリティを必要とする場合、テキストのみのディスプレイの場合おそらく[Active] Inactive Inactiveのようなテキストのみのフォーマットが必要です。オーディオリーダー（視覚障害者）の場合は、「オプション1がアクティブになっています」（おそらく、altテキスト付きの0サイズの画像を使用しています）。