WCAG 2.2 ガイドライン「1.4.3 コントラスト（最小）」Level AA について
はじめに
WCAG 2.2の「1.4.3 コントラスト（最小）」は、テキストとその背景とのコントラスト比が4.5:1以上であることを求めています。この基準は、視覚的な制約を持つユーザーや高齢者がウェブコンテンツを読みやすくするために重要です。
この記事では、HTMLやCSS、JavaScriptを学び始めた方に向けて、コントラスト比の意味と基準を満たす方法を具体的に解説します。
1. コントラスト比とは？
コントラスト比は、テキスト（または画像内のテキスト）と背景色の明るさの差を数値で表したものです。値が大きいほど、色の違いがはっきりしており、読みやすくなります。
- 最小基準: 通常のテキストでは4.5:1以上。
- 例外:
- 大きなテキスト（18ポイント以上、または14ポイント以上で太字）では3:1以上。
- 装飾的な文字や非表示の要素には適用されません。
2. コントラスト比を満たす方法
a. 色の選択を慎重に行う
テキストと背景の色を慎重に選ぶことで、視認性を確保します。
不適切な例
<p style="color: lightgray; background-color: white;">視認性の低いテキスト</p>
- 明るい灰色の文字と白い背景のコントラスト比は不十分です。
改善例
<p style="color: black; background-color: white;">視認性の高いテキスト</p>
- 黒い文字と白い背景は、コントラスト比が十分に高く、基準を満たします。
b. CSSを使ったコントラスト管理
テキストと背景をカスタマイズする場合
body {
color: #000; /* 黒 */
background-color: #fff; /* 白 */
}
.high-contrast {
color: #ffffff; /* 白 */
background-color: #000000; /* 黒 */
}
- デフォルトのコントラストを適切に設定し、必要に応じて高コントラストテーマを提供します。
c. コントラスト比を計算するツールを使用
手動で色を選ぶ際、オンラインツールやブラウザ拡張機能を活用してコントラスト比を確認します。
推奨ツール
- WebAIM Contrast Checker
- ブラウザの開発者ツール（Chromeのアクセシビリティチェック機能など）
d. 背景画像を使用する場合の注意点
背景画像を使う場合、コントラストが十分でないと読みづらくなります。
不適切な例
<div style="background-image: url('background.jpg'); color: white;">
背景画像上の白いテキスト
</div>
改善例
背景画像の上に半透明の色を重ねることで、コントラストを確保します。
<div style="background-image: url('background.jpg'); background-color: rgba(0, 0, 0, 0.5); color: white;">
背景画像上の読みやすいテキスト
</div>
3. コントラスト基準に適合しない場合の失敗例
a. 前景色のみ、または背景色のみを指定
失敗例
<p style="color: blue;">テキスト</p>
- 背景色がブラウザのデフォルト（白）に依存しているため、適切なコントラストが保証されません。
改善策
<p style="color: blue; background-color: white;">テキスト</p>
b. コントラスト不足のリンクテキスト
失敗例
<a href="#" style="color: lightblue;">リンク</a>
- 明るい青色のリンクは、白い背景に対してコントラストが不足しています。
改善策
<a href="#" style="color: blue;">リンク</a>
- コントラスト比を上げ、視認性を改善します。
4. コントラスト比の測定と改善プロセス
a. 測定手順
- 色のRGB値または16進数コードを取得します。
- コントラスト計算ツールに入力し、比率を確認します。
- 必要に応じて、色を調整して基準を満たします。
b. 改善のステップ
- テキストと背景色の組み合わせを変更
コントラストが基準を下回る場合、背景色または文字色を変更します。 - 代替手段の提供
高コントラストモードやテーマ切り替え機能を実装します。
5. アクセシビリティのメリット
a. 誰でも読みやすいコンテンツ
視覚障害や加齢による視力低下を持つユーザーが、簡単にコンテンツを読めるようになります。
b. モバイル環境での視認性向上
小さい画面でも読みやすく、快適なユーザー体験を提供できます。
まとめ
WCAG 2.2の「1.4.3 コントラスト（最小）」は、テキストと背景のコントラスト比が4.5:1以上であることを求めています。
実装ポイント
- 色の選択を慎重に行い、コントラスト比を確認する。
- 背景画像を使用する場合は、追加の処理で視認性を確保する。
- コントラスト測定ツールを活用して基準を満たしているか確認する。
これらを実践することで、すべてのユーザーに優しいウェブコンテンツを提供できます！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。