AAA
1.4.6 コントラスト (高度)
アクセシビリティ達成基準 1.4.6「コントラスト（高度）」 は、WCAG 2.2におけるレベルAAAの基準の一つで、視覚的により高いコントラストを確保することを求めています。特に色覚多様性や弱視のあるユーザーに配慮した高度なアクセシビリティ対応です。
目次
要件
視覚的に表示されるテキスト及び画像化された文字に対し、背景とのコントラスト比が
少なくとも 7:1 であること。
対象範囲
- 通常の本文テキスト
- ボタンやリンク内のテキスト
- 画像内のテキスト（例：画像化されたバナーのキャッチコピー）
- フォームラベルやヘルプテキストなど、視認性が重要な要素
例外
| 項目 | 理由 |
|---|---|
| ロゴタイプの文字 | ブランド固有の表現が目的のため |
| 装飾のみの文字（情報伝達しない） | 読解に直接影響しないため |
| 大きい文字（18pt または 14pt太字以上）は 4.5:1でも可 | 視認性が比較的高いため |
具体例
| 前景色 | 背景色 | コントラスト比 | 評価（AAA） |
|---|---|---|---|
| #000000 | #FFFFFF | 21.0:1 | 達成 |
| #234058 | #EDF0EF | 9.41:1 | 達成 |
| #666666 | #FFFFFF | 5.4:1 | 不達成（AAはOK） |
| #888888 | #FFFFFF | 3.6:1 | 不達成 |
利用ツール
- WebAIM Contrast Checker（新しいタブで開きます）
- Colorable（新しいタブで開きます）
- Figma / Adobe XD のアクセシビリティプラグイン
- Chrome拡張機能（WAVE、Accessibility Insights）
利点
視認性の向上
弱視、老眼、色覚障害ユーザーでも読みやすい
ユーザビリティ向上
屋外など明暗差が大きい環境でも視認可能
法令・ガイドライン対応
公共機関・大企業における調達基準への対応
マルチデバイス対応
モバイル環境でも読みやすいテキスト表現を実現
実装のヒント
- サイト全体のカラーパレットに対してコントラストチェックを実施
- デザインガイドラインに最小コントラスト比7:1を明記
- アクセントカラーの使用箇所を限定し、本文・ラベルには高コントラスト配色を適用
- 状態変化（ホバー・フォーカスなど）でもコントラストを保つ
お問い合わせ
当社では、ウェブサイトの診断や改善方法のご提案を通じて、
すべてのユーザーにとって使いやすいウェブづくりをサポートしています。
ご相談・ご依頼は、こちらからお気軽にお問い合わせください。