操作部品や図の大事な部分を、周りの色と見分けられるようにする。

05条件と補足

対象となる部分と隣り合う色

操作部品にはボタン・入力欄・チェックボックスなどがあります。存在や操作方法、選択中・フォーカス中といった状態を見分けるために必要な情報が対象です。

白地のチェックボックスなら、枠は外側の白、チェック印は内側の白との比を確かめます。図の線や記号も、実際に隣り合っている背景色や他の部分の色と比べます。複数の色が接する場合は、意味を読み取るために必要な境目を見分けられるか確認します。

一方、すべてのボタンに枠を付ける要件ではありません。文字などによって操作部品を特定でき、枠が識別に必要でない場合、その枠に一律の3:1を求めません。

選択前と選択後など、同時に隣り合って表示されない2つの状態の色同士を、3:1にする要件でもありません。各状態で、その状態を伝える印と隣り合う色を確かめます。

図やアイコンの扱い

意味を伝えるアイコンや、グラフの値を読むために必要な線なども対象です。図のすべての線や色が対象になるわけではありません。装飾だけの部分や、同じ情報を読める表などで提供しており、図を見分けなくても内容を理解できる場合は、その図の部分が必要かどうかを分けて判断します。

例外

操作部品には次の例外があります。

• 無効にされているなど、利用者が現在操作できない部品。
• ブラウザーなどが見た目を決めており、制作者が変更していない部品。

チェックが付いていないことと、操作できないことは別です。チェックなしでも付け外しできる部品なら、その状態で識別に必要な情報を確認します。図の「改善した例」は制作者が枠や印の見た目を指定しているため、ブラウザー任せの例外には当てはまりません。

図については、特定の見せ方が情報を伝えるために必要不可欠な場合に例外があります。見せ方を変えると情報や機能が根本的に変わり、適合するほかの方法でも提供できない場合です。実際の風景の写真や、元の見た目を伝えるスクリーンショットなどが例になります。ロゴも規定の配色を保つ必要がある場合と、制作者が任意に薄くした場合を区別します。

文字や色の使用、フォーカスとの違い

1.4.3「コントラスト (最低限)」は文字と背景を扱います。ボタン内の文字は1.4.11の3:1だけで判断せず、1.4.3でも確認します。

1.4.1「色の使用」では情報を色だけで区別していないかを確認します。例えば、評価の星に濃い枠を付けて周囲とのコントラストを確保しても、評価済みの星と空の星を色相だけで区別していると、別の問題が残る場合があります。

2.4.7「フォーカスの可視化」は、キーボードで操作中の位置が見えるかを扱います。制作者がフォーカスの印を指定する場合、その印に必要な隣接色とのコントラストは1.4.11でも確認します。印の面積や、フォーカス前後の変化を確認する2.4.13「フォーカスの外観」とは分けて判断します。

数値の確認

3:1は下限です。計算した値が2.999:1なら、丸めて3:1として扱いません。図の比は表示用に小数第2位まで示していますが、判定には丸める前の値を使います。

画面の線の端は滑らかに見せる処理によって淡く見えることがあります。測定はCSSなどで指定した色やブラウザーから取得した色を基にします。細すぎる線を避けたり、下限より余裕のある配色にしたりすることは、見分けやすくするための推奨です。

この改善例は示したチェックボックスの識別に必要な配色についての例です。ページやサイト全体のWCAG適合を示すものではありません。