WCAG 1.4.11: 非テキストのコントラスト
文字そのものや写真・装飾画像ではなく、操作に必要なUI部品（ボタン、入力欄の境界線）、状態表示（フォーカスリング、選択状態）、意味を持つグラフィック（アイコン、グラフの凡例等）を対象とします。3:1未満の箇所があっても、装飾目的なのか、状態・境界・意味の識別に必須の色差なのかを総合的に判断します。
意図的な失敗例: UI部品の境界コントラスト不足
入力欄の境界線が背景とほぼ同じです。
確認観点
- ボタン、リンクアイコン、チェックボックス、ラジオボタン、トグルスイッチなどの操作部品を確認する
- 入力欄の境界線、フォーカスリング、選択中タブ、エラー状態など、状態を示す視覚表現を確認する
- 文字を伴わない単独のアイコン、グラフ、図解、地図など、意味を持つグラフィックの線や塗りの色差を確認する
- その色差だけで境界や状態を識別する必要がある箇所について、隣接色とのコントラスト比が3:1以上あるか確認する
人の判断が必要な例
- 3:1未満の箇所を見つけた場合、直ちに不適合とせず、その色差が状態・境界・意味を伝えるために必須か確認する
- 文字や写真ではなく、操作ボタン、アイコン、入力欄の枠線、選択状態、グラフの線や凡例などが、隣接する色との間で3:1以上のコントラストを確保しているか確認する
- ロゴや純粋な装飾画像など、達成基準の対象外となる非テキスト要素と区別して確認する
補助ツール候補
- non-text-contrast
- color-contrast
- focus-visibility
- svg-title
生成メモ
manual-judgment-catalog.ja.json の内容から生成しています。