1.4.11 非テキストのコントラスト

要件

視覚的に伝える必要がある非テキスト要素（ユーザーインターフェース部品・グラフィックオブジェクト）は、隣接する色とのコントラスト比が少なくとも3:1以上であること。

内容

要素の種類	要件内容
ユーザーインターフェース部品	ボタン、チェックボックス、スライダー、テキスト入力欄、リンク枠など
グラフィックオブジェクト	グラフの折れ線、アイコン、インフォグラフィックス、データ図など
対象外	観賞目的の装飾、無意味な背景装飾、視認性に寄与しないデザイン要素

適合基準（コントラスト比）

項目	値
最低コントラスト比	3:1（背景とのコントラスト）
対象範囲	UIの境界線、状態変化（hover等）、アイコン、図形、折れ線など
判定対象外	非視認的な装飾、ブランドロゴ、キャプション付きグラフィック（1.1.1で補完）など

適合の具体例

ケース	適合の理由
枠線が #333（ダークグレー）、背景が #FFF（白） → コントラスト比 15:1	OK（3:1以上）
折れ線グラフの線が #4A7EBB（青）、背景が #EDF0EF（淡灰）→ コントラスト比 4:1	OK
ボタンの境界が #CCC、背景が #FFF → コントラスト比 1.5:1	NG（境界線が視認しにくい）

適合しない例

ケース	問題点
境界線が背景色とほぼ同色で識別できない	操作対象が判別不能
折れ線グラフの色と背景が類似していて見えにくい	情報が取得できない
ラジオボタンの未選択状態が極端に薄い灰色	状態認識が困難

補足

• テキストに対するコントラスト要件（1.4.3）とは別に定義された基準です。
• 状態変化（hover・focus・disabled）も含めてすべての状態で達成する必要があります。
• グラフィックの場合、情報伝達に必須な部分が対象になります。

利点

視点	内容
ロービジョン・色覚障害のユーザー支援	非テキスト情報を認識しやすくする
UI操作ミスの削減	操作部品を見失いにくい
理解と操作性の向上	グラフィックの意味を正しく伝えられる

一覧に戻る