Level AAWCAG 2.2
1.4.11 非テキストのコントラスト
UIコンポーネントとグラフィカルオブジェクトに3:1以上のコントラスト比がある。
なぜ重要か
ロービジョン
テキスト以外のUI要素（ボーダー、アイコン）も見えなければ操作できない。
色覚特性
色のみで区別されたUIは300万人以上の色覚特性者に影響。形と明度が必要。
環境条件
屋外や明るい場所では低コントラストのボーダーやアイコンが消えて見える。
グラフ・チャート
データ可視化の線・点・エリアにも3:1以上のコントラストが必要。
ライブデモ
UIコンポーネントのコントラスト
フォーム要素やアイコンなどの非テキスト要素にも十分なコントラストが必要です。
選択してください
利用規約に同意
メール通知
通知をオンにする
アクションアイコン
検索
設定
お気に入り
約1.5:1 — UI要素の境界が見えにくい
ペルソナで理解する
中村さん（55歳）— 軽度白内障
フォームの入力欄がどこにあるかわかりません。薄いグレーのボーダーは背景と溶け合って、クリックする場所が見えないのです。チェックボックスも、チェック済みかどうか確認できません。