WCAG 1.4.11: UI部品やグラフィックのコントラストが十分か確認する
操作に必要なUI部品、アイコン、グラフ、フォーム境界、フォーカス表示などの非テキスト情報が、隣接する色との間で3:1以上のコントラストを確保しているか確認します。
意図的な失敗例: UI部品の境界コントラスト不足
入力欄の境界線が背景とほぼ同じです。
確認観点
- ボタン、リンクのアイコン、フォーム部品、チェックボックス、ラジオボタン、スイッチなど操作に必要な部品を確認する
- 入力欄の枠線、フォーカスリング、選択状態、エラー表示など、状態を伝える視覚表現を確認する
- グラフ、チャート、図解、地図、SVGアイコンなど、意味を持つグラフィックを確認する
- 色の変更ができるCMS入力や図表作成では、運用時に低コントラストな色を選ばないルールにする
人の判断が必要な例
- アイコンや境界線が薄すぎて、機能や状態を見分けにくくなっていないか確認する
- フォーカス表示、選択中、入力エラー、無効状態などが色の差だけでなく十分な明暗差で分かるか確認する
- ロゴや装飾目的の画像など、達成基準の対象外にできるものと操作・理解に必要なものを分けて確認する
補助ツール候補
- non-text-contrast
- color-contrast
- focus-visibility
- svg-title
生成メモ
manual-judgment-catalog.ja.json の内容から生成しています。