WCAG 2.2 ガイドライン「1.4.6 コントラスト（拡張）」Level AAA について
はじめに
WCAG 2.2の「1.4.6 コントラスト（拡張）」では、テキストや画像テキストのコントラスト比が少なくとも7:1であることを求めています。この基準は、視覚障害や高齢者の視認性をさらに向上させることを目的としており、Level AAAの最も高いアクセシビリティ基準の1つです。
この記事では、コントラスト比の基本、基準を満たすための実装方法、よくある失敗例とその対策を詳しく説明します。
1. コントラスト比（7:1）とは？
コントラスト比は、文字色と背景色の明るさの比率を数値で表します。
基準:
- 通常のテキスト：7:1以上
- 大きなテキスト（18ポイント以上、または14ポイント以上で太字）：4.5:1以上
2. 基準を満たす実装方法
a. 色の選択を慎重に行う
適切なコントラストの例
CSS
body {
background-color: #ffffff; /* 白背景 */
color: #000000; /* 黒テキスト */
}
- 白（#ffffff）と黒（#000000）はコントラスト比が21:1で基準を満たします。
b. ツールを使用してコントラストを確認
オンラインツールを活用して、テキストと背景色のコントラスト比を確認します。
おすすめツール
- WebAIM Contrast Checker
- ブラウザの開発者ツール（Chromeのアクセシビリティタブ）
c. 相対的な色指定を使用する
CSSで相対的な色指定を使用すると、カスタマイズが柔軟になります。
CSSの例
:root {
--primary-bg: #ffffff;
--primary-text: #000000;
}
body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
d. 背景画像を使用する場合の対策
背景画像を使用する場合、背景の明暗に応じてテキストを適切に読みやすくするための対策を講じます。
背景画像とオーバーレイ
HTMLとCSS
<div class="background-text">
読みやすいテキスト
</div>
.background-text {
background-image: url('example.jpg');
background-color: rgba(0, 0, 0, 0.5); /* 黒いオーバーレイ */
color: #ffffff; /* 白いテキスト */
padding: 20px;
}
rgbaを使ったオーバーレイでコントラストを確保します。
e. ユーザーが切り替え可能な高コントラストモードを提供
実装例
HTML
<button id="toggleContrast">高コントラストモード</button>
<div id="content">
<p>標準モードのテキスト</p>
</div>
JavaScript
const button = document.getElementById('toggleContrast');
const content = document.getElementById('content');
button.addEventListener('click', () => {
content.classList.toggle('high-contrast');
});
CSS
.high-contrast {
background-color: #000000;
color: #ffffff;
}
3. 失敗例とその対策
a. コントラストが不足している場合
失敗例
<p style="color: #777777; background-color: #ffffff;">コントラスト不足のテキスト</p>
- 明るい灰色（#777777）は白（#ffffff）とコントラストが低く、基準を満たしません。
改善策
<p style="color: #000000; background-color: #ffffff;">適切なコントラストのテキスト</p>
b. 背景画像でテキストが読みにくい
失敗例
<div style="background-image: url('bright-background.jpg'); color: white;">
読みにくいテキスト
</div>
改善策
- 背景画像の明るさを調整するか、オーバーレイを追加します。
4. 実装時の注意点
a. テキスト画像の使用を避ける
- テキスト画像ではなく、HTMLとCSSでスタイリングを実施します。
b. 動的なコンテンツでのコントラスト確認
- JavaScriptで生成されるテキストや、インタラクティブ要素でもコントラスト基準を満たすことを確認します。
5. アクセシビリティのメリット
a. 視覚障害や高齢者への配慮
高いコントラスト比により、視力が弱いユーザーでもコンテンツを簡単に読めます。
b. ユーザー体験の向上
背景色や文字色のバランスが良いと、すべてのユーザーが快適に利用できます。
まとめ
WCAG 2.2の「1.4.6 コントラスト（拡張）」は、テキストや画像テキストのコントラスト比を7:1以上にすることで、視認性を最大限に向上させる基準です。
実装ポイント
- 適切な色を選択し、コントラスト比を確認する。
- 背景画像を使用する場合、コントラストが保たれるよう工夫する。
- 高コントラストモードを提供して、ユーザーが切り替え可能にする。
これらを実践することで、アクセシビリティが向上し、誰もが快適に利用できるウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。