サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「1.4.11 非テキストコントラスト」とは？Level AAの対象、実装、確認方法

greeden
yellow and and blue colored pencils

Photo by Ann H on Pexels.com

WCAG 2.2の達成基準1.4.11「非テキストコントラスト」（Level AA）は、操作部品を識別するための視覚情報や、内容を理解するために必要なグラフィックに、隣接する色との十分な明るさの差を求める基準です。
基準となるコントラスト比は3:1以上です。

対象は、ページ上のすべての画像や色ではありません。
ボタンや入力欄の存在を示す境界線、選択状態を示す印、意味を伝えるアイコンやグラフの線など、見分けられなければ操作や理解に支障が出る部分を確認します。

一方、ボタンの文字と背景色の組み合わせは、主に達成基準1.4.3「コントラスト（最小）」で評価します。
1.4.11と1.4.3を分けて考えると、どの色同士を測るのかが明確になります。

1.4.11で確認する対象

非テキストコントラストの対象は、操作に必要な視覚情報と、理解に必要なグラフィカルな情報の二つに分けられます。

達成基準1.4.11で確認する対象
区分 確認する視覚情報 比較する色
ユーザーインターフェースコンポーネント 入力欄の境界線、チェック状態、選択状態、作成者が指定したフォーカス枠など、部品や状態の識別に必要な部分 その線や形と、すぐ隣に表示される背景色
グラフィカルオブジェクト 単独で意味を伝えるアイコン、グラフの線や区分など、内容の理解に必要な部分 意味のある形や線と、それに隣接する色

無効化された操作部品、ブラウザ標準の外観を変更していない部品、内容の理解に不要な装飾は、同じ測定の対象とは限りません。
まず「この線や形が見えないと、操作または内容を理解できないか」を判断し、その答えが「はい」であれば隣接色とのコントラストを測ります。

コントラスト比と隣接色の考え方

コントラスト比とは、二つの色の明るさの差を数値で表したものです。
1.4.11では、必要な線や形と、そのすぐ隣にある色を一組として測ります。

文字と背景のコントラスト比を確認したい場合は、WCAG 2.2「1.4.3 コントラスト（最小）」の基準と確認方法も参照してください。

ボタンとフォーカス表示の実装例

次の例は、白いページ背景に配置するボタンを想定しています。
ボタンの文字色と背景色は1.4.3、境界線やフォーカス枠は1.4.11として、それぞれ別に確認します。

.action-button {
  background-color: #0055ff;
  color: #ffffff;
  border: 2px solid #0033cc;
  padding: 10px 20px;
  font-size: 1rem;
}

.action-button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

この例では、フォーカス枠の色である#005fccと白背景のコントラスト比は5.98:1です。
実際のサイトでは背景色が異なる場合があるため、コードをそのまま使うのではなく、配置先の色との組み合わせを測定してください。

outline: none;で既定のフォーカス表示を消す場合は、見失わない代替表示を用意する必要があります。
フォーカス順序やモーダル内での移動も含めて確認する場合は、キーボード操作とフォーカス管理の実装ガイドで確認できます。

アイコンだけのボタン

アイコンだけで機能を伝えるボタンでは、アイコンの形が背景から見分けられる必要があります。
視覚上のコントラストと、支援技術に伝える名前は別の確認項目であるため、両方を実装します。

<button class="icon-button" type="button" aria-label="検索">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <circle cx="11" cy="11" r="6"></circle>
    <path d="M16 16l4 4"></path>
  </svg>
</button>
.icon-button {
  color: #0055ff;
  background-color: #ffffff;
  border: 2px solid #0033cc;
  padding: 10px;
}

.icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

この例では、SVGの線にcurrentColorを使い、ボタンに指定した文字色と同じ色で描画しています。
背景色を変更したときは、アイコン、境界線、背景の組み合わせを再測定します。

グラフや図で確認する部分

グラフ全体を一つの色の組み合わせとして測るのではなく、内容の理解に必要な線、点、区分を一つずつ確認します。
たとえば、折れ線グラフでは系列の線とプロット領域の背景、円グラフでは意味を区別する隣接領域が確認候補になります。

色だけに意味を持たせると、十分なコントラストがあっても系列を区別しにくい場合があります。
ラベル、線種、記号、表などを組み合わせる方法は、アクセシブルなグラフとデータ可視化の設計で詳しく解説しています。

実装後の確認手順

  1. 対象を洗い出す
    ボタン、入力欄、選択状態、フォーカス表示、アイコン、グラフなどをページ単位で確認します。
  2. 必要な視覚情報を特定する
    その線や形が見えないと、部品の存在、状態、内容を理解できないかを判断します。
  3. 隣接する色を測る
    必要な線や形と、実際に隣り合う背景色のコントラスト比を確認します。
  4. 状態ごとに操作する
    通常時だけでなく、フォーカス時、選択時、エラー時など、意味のある状態を実際に表示して確認します。
  5. 手動確認を加える
    キーボードで移動し、拡大表示や異なる画面幅でも、必要な境界線や状態が失われないかを確認します。

色の測定には、既存記事で紹介していたWebAIM Contrast Checkerを利用できます。
ブラウザの開発者ツールにも、バージョンや対象要素に応じて色の確認機能があります。

よくある誤り

公開前のチェックリスト

1.4.11への対応は、単に色コードを置き換える作業ではありません。
利用者が操作部品や情報を見分けるために必要な手がかりを特定し、実際に隣り合う色との組み合わせを測ることが出発点です。

当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善に関心がある方は、サービスの詳細をご覧ください。

モバイルバージョンを終了