WCAG 2.2 ガイドライン「1.4.11 非テキストコントラスト」Level AA について
はじめに
WCAG 2.2の「1.4.11 非テキストコントラスト」は、非テキスト要素（ボタン、アイコン、グラフィカルなコンテンツなど）のコントラスト比が3:1以上であることを求めています。この基準は、視覚的な制約を持つユーザーやコントラスト感度が低下したユーザーが、インターフェースやグラフィカルなコンテンツを正しく認識できるようにするためのものです。
この記事では、具体的な実装方法をHTML、CSS、JavaScriptを使ってわかりやすく解説します。
1. 適用対象
このガイドラインは、以下に該当する非テキスト要素に適用されます：
-
ユーザーインターフェースコンポーネント
- ボタン、リンク、スイッチなどの操作可能な要素。
- フォーカスやホバー状態の識別。
-
グラフィカルコンテンツ
- アイコン、グラフ、図など、情報伝達に必要なビジュアル要素。
2. 実装方法
a. ユーザーインターフェースコンポーネントのコントラスト
ボタンやリンクのコントラストを設定
操作可能な要素と背景色のコントラスト比を3:1以上にする必要があります。
CSSの例
button {
background-color: #0055ff; /* 青 */
color: #ffffff; /* 白 */
border: 2px solid #0033cc; /* コントラストを保つための境界線 */
padding: 10px 20px;
font-size: 1em;
}
ポイント
- ボタンの背景色と文字色、または境界線のコントラストを確認します。
- ホバーやフォーカス時の状態も考慮します。
b. フォーカスインジケータの可視性
フォーカスが当たっている要素を視覚的に識別できるようにする必要があります。
CSSの例
button:focus {
outline: 3px solid #ffaa00; /* 明るい黄色でフォーカスを示す */
outline-offset: 2px;
}
c. グラフィカルコンテンツのコントラスト
アイコンや図などのグラフィカルな要素も、隣接する色とのコントラスト比が3:1以上である必要があります。
適切なアイコンの設計
アイコンの色と背景色のコントラストを考慮し、視認性を確保します。
HTMLとCSSの例
<div class="icon-container">
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="icon">
<circle cx="25" cy="25" r="20" fill="#0055ff" stroke="#ffffff" stroke-width="4"/>
</svg>
</div>
.icon-container {
background-color: #ffffff; /* 白背景 */
padding: 10px;
}
ポイント
- アイコンと背景色のコントラストをツールで測定します。
d. コントラスト確認ツールの活用
コントラスト比を確認するために以下のツールを利用できます：
- WebAIM Contrast Checker
- ブラウザの開発者ツール（Chromeのアクセシビリティタブなど）
3. よくある失敗例とその改善策
a. コントラストが不足しているボタン
失敗例
button {
background-color: #cccccc; /* 薄いグレー */
color: #ffffff; /* 白 */
}
- 背景色（#cccccc）と文字色（#ffffff）のコントラスト比が低い。
改善策
button {
background-color: #0055ff; /* 濃い青 */
color: #ffffff; /* 白 */
}
b. フォーカスインジケータがない
失敗例
button:focus {
outline: none;
}
- フォーカスが視覚的に認識できなくなります。
改善策
button:focus {
outline: 3px solid #ffaa00;
}
c. アイコンのコントラスト不足
失敗例
- アイコンの色が背景と同化している。
改善策
- アイコンの境界線や背景色を調整してコントラスト比を確保します。
4. アクセシビリティのメリット
a. ユーザー体験の向上
- 視覚障害やコントラスト感度が低下しているユーザーも、操作可能な要素や情報を正確に認識できます。
b. 一貫性のあるデザイン
- コントラストの高いデザインは、すべてのユーザーにとって視認性が高く、使いやすいインターフェースを提供します。
まとめ
WCAG 2.2の「1.4.11 非テキストコントラスト」は、ボタンやアイコンなどの非テキスト要素が周囲の色と十分なコントラストを持つことを求めています。
実装ポイント
- コントラスト比を3:1以上にする
ボタンやアイコンと背景の色を測定し、調整します。 - フォーカスインジケータを提供する
キーボード操作時にフォーカスを視覚的に示します。 - ツールを活用してコントラストを確認する
デザインの初期段階からコントラストを確保します。
これらを実践することで、すべてのユーザーにとってアクセシブルで快適なウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。