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

WCAG 2.2「1.4.6 コントラスト（拡張）」とは？Level AAAの基準と実装方法

greeden
yellow balloon on blue background

Photo by Deeana Arts on Pexels.com

WCAG 2.2の達成基準「1.4.6 コントラスト（拡張）」は、テキストと背景の明るさに十分な差を設け、弱視の人や加齢によって視力が低下した人などが文字を読み取りやすくするための基準です。適合レベルはLevel AAAで、通常のテキストには7:1以上、大きなテキストには4.5:1以上のコントラスト比が求められます。

ここでは、基準値の読み方から、CSSでの配色、背景画像への対処、動的な表示の確認までを順に説明します。

1.4.6で求められるコントラスト比

コントラスト比とは、文字色と背景色の明るさの差を比率で表したものです。数値が大きいほど明暗の差が大きくなります。

対象 必要なコントラスト比 大きさの目安
通常のテキストと画像化された文字 7:1以上 下記の「大きなテキスト」に当てはまらない文字
大きなテキストと画像化された大きな文字 4.5:1以上 18ポイント以上、または14ポイント以上の太字

白（#ffffff）と黒（#000000）の組み合わせは21:1で、どちらの基準も満たします。ただし、すべてを白と黒にする必要はありません。ブランドカラーを使う場合も、実際に重なる文字色と背景色の組み合わせを一つずつ確認します。

Level AAの基準との違いを確認したい場合は、「1.4.3 コントラスト（最小）」の基準と確認方法も参照してください。ボタンの境界線やアイコンなど、文字ではない要素の扱いは「1.4.11 非テキストコントラスト」の解説で整理しています。

コントラストを確保する実装手順

文字色と背景色をセットで管理する

色を決めるときは、文字色だけを単独で選ばず、背景色との組み合わせで設計します。CSSカスタムプロパティを使うと、配色の組み合わせをまとめて管理できます。

:root {
  --page-background: #ffffff;
  --page-text: #000000;
}

body {
  background-color: var(--page-background);
  color: var(--page-text);
}

カスタムプロパティは色の変更を一か所に集約する仕組みであり、それだけでコントラストが保証されるわけではありません。値を変更するたびに、組み合わせを再確認します。

測定ツールで数値を確認する

見た目の印象だけでは、7:1や4.5:1を満たしているかを正確に判断できません。文字色と背景色の値をWebAIM Contrast Checkerへ入力するか、ブラウザの開発者ツールにあるコントラスト確認機能を使って測定します。

本文だけでなく、見出し、リンク、ボタン内の文字、入力欄、エラーメッセージなど、画面に表示される文字を実際の状態で確認してください。

背景画像の上では暗さが変わる場所も調べる

背景画像は場所によって明るさが変わるため、一部分で読めても別の部分では基準を下回ることがあります。画像の上に半透明の色を重ねる場合は、背景色を指定するだけではなく、グラデーションと画像を同じ背景として重ねます。

<div class="hero">
  読みやすいテキスト
</div>

.hero {
  color: #ffffff;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url('example.jpg');
  background-size: cover;
  padding: 20px;
}

オーバーレイを追加した後も、文字の背後にある画像の明るい場所と暗い場所をそれぞれ測定します。画像の差し替えや表示位置の変更があると結果も変わるため、実際の画面での再確認が必要です。

動的な状態を確認する

初期表示で合格していても、操作後に文字色や背景色が変われば、別の組み合わせとして確認する必要があります。少なくとも次の状態を点検します。

高コントラスト表示を提供する場合

利用者が切り替えられる高コントラスト表示は、読みやすさを調整する選択肢になります。切り替えボタン自体が操作でき、現在の状態が支援技術にも伝わるように実装します。

<button id="toggleContrast" type="button" aria-pressed="false">
  高コントラスト表示に切り替える
</button>
<div id="content" class="content">
  <p>ページの本文</p>
</div>

const button = document.getElementById('toggleContrast');
const content = document.getElementById('content');

button.addEventListener('click', () => {
  const isActive = content.classList.toggle('high-contrast');
  button.setAttribute('aria-pressed', String(isActive));
  button.textContent = isActive
    ? '標準表示に戻す'
    : '高コントラスト表示に切り替える';
});

.content.high-contrast {
  background-color: #000000;
  color: #ffffff;
}

切り替え後の配色だけでなく、切り替え前の表示とボタンの文字も測定対象です。ページの一部にだけクラスを付ける場合は、対象外の見出しやナビゲーションが残っていないかも確認します。

よくある失敗と修正方法

薄いグレーを本文に使う

白い背景に#777777の文字を置くと、通常のテキストに必要な7:1へ届きません。見た目を大きく変えたくない場合でも、測定しながら文字色を濃くします。

<p style="color: #000000; background-color: #ffffff;">
  コントラストを確保したテキスト
</p>

背景色だけで画像を暗くしようとする

background-imageの後ろにbackground-colorを置くだけでは、画像の上に半透明の色は重なりません。前述のようにグラデーションを重ねるか、別の要素をオーバーレイとして配置します。

通常表示だけを確認する

ホバー、フォーカス、選択、エラーなどで配色が変わるサイトでは、通常表示の測定だけでは不足します。デザインシステムやコンポーネントの確認表に状態ごとの配色を記録すると、修正後の再確認もしやすくなります。

画像化された文字を多用する

文字を画像に埋め込むと、HTMLのテキストより調整しにくくなります。文字で表現できる内容はHTMLで記述し、CSSで見た目を整える方法を優先します。画像化された文字を使う場合も、背景とのコントラストを測定します。

公開前のチェックリスト

読みやすい配色を継続して保つ

達成基準1.4.6に対応するには、通常のテキストで7:1以上、大きなテキストで4.5:1以上を確保します。配色を決めた時点だけでなく、背景画像、操作による状態変化、表示モードの切り替えまで含めて測定することが、公開後の読みやすさを保つ近道です。

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。サイトのアクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。

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