アクセシビリティカラーコントラストサポートのために無効なフィールドとテキストを表示する最良の方法は何ですか
私は色のコントラストのアクセシビリティをサポートする必要があるプロジェクトに取り組んでいます。
現在、システムでは無効化されたデータはグレー表示されていますが、アクセシビリティのために色のコントラストをサポートする必要があります。つまり、背景色と前景色の間に非常に良いコントラストがあり、白い背景に薄い灰色のテキストはありません。コントラストテストに合格。
製品で508条に準拠する方法として一般に受け入れられているWCAG 2.0以降：
1.4.3コントラスト（最小）：テキストとテキストの画像の視覚的表現は、以下を除いて、少なくとも4.5：1のコントラスト比を持ちます：（レベルAA）
大きなテキスト：大規模なテキストと大規模なテキストの画像のコントラスト比は少なくとも3：1です。
Incidental：非アクティブなユーザーインターフェイスコンポーネントの一部であり、純粋な装飾であり、表示されないテキストまたはテキストの画像誰でも、または他の重要な視覚的コンテンツを含む画像の一部である場合、コントラストの要件はありません。
ロゴタイプ：ロゴまたはブランド名の一部であるテキストには、最低限のコントラスト要件はありません。
基本的に、これが意味することは、無効にされた要素が付随的である場合、たとえば他の手段では伝えられない、ユーザーにとって重要な情報を伝えないため、カラーコントラストガイドラインを満たすことは重要ではありません。
たとえば、まだ使用できないために無効になっているボタン（下図のように）は、一度有効にするとアクションが有効になるため、カラーコントラストを渡す必要はありません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ただし、コンテンツが重要で他の方法で伝えられない場合は、 Chrome Developer Accessibility Tools または Color Contrast Checker を使用して、色を変更する必要があることを通知できますアクセシブルにするために。
たとえば、ユーザーが選択できる一連のオプションがあり、そのうちの1つが常にtrueになるが、そのオプションについてユーザーに伝える必要がある場合は、無効にすることができます。
おそらく最良ではありませんが、状況を改善するためのいくつかのオプション：
背景とフォントの色。
ホバー時の許可されていないポインター。 （CSS =>カーソル：許可しない;）
