WCAG AA と AAA のコントラスト：どちらのレベルを目指すべき？
WCAG 2.2 はテキストのコントラストに 2 つのレベルを定めています。AA はほとんどのアクセシビリティ関連の法令やポリシーが参照するレベル、AAA はできるだけ多くの人が読めるべきコンテンツ向けの、より高いレベルです。
しきい値の早見表
| コンテンツ | AA（最低限） | AAA（高度） |
|---|---|---|
| 通常テキスト | 4.5:1 | 7:1 |
| 大きなテキスト（24px 以上、または太字 18.66px 以上） | 3:1 | 4.5:1 |
| UI コンポーネントとグラフィック（達成基準 1.4.11） | 3:1 | AAA の個別基準なし |
テキストに関する基準は、AA が達成基準 1.4.3「コントラスト（最低限）」、AAA が達成基準 1.4.6「コントラスト（高度）」です。ロゴ、純粋な装飾目的のテキスト、無効化されたコントロールは対象外です。
「大きなテキスト」とは？
WCAG では大きなテキストを、標準の太さで 18 ポイント以上、または 太字で 14 ポイント以上と定義しています。Web では 1pt = 1.333px なので、おおよそ標準 24px、太字 18.66px に相当します。本文の多く（14〜18px）は通常テキストに当たり、より厳しいしきい値を満たす必要があります。
例
文字 #000000 / 背景 #ffffff21.00:1 · AA・AAA ともに合格文字 #595959 / 背景 #ffffff7.00:1 · ぎりぎり AAA 合格文字 #767676 / 背景 #ffffff4.54:1 · AA 合格、AAA 不合格文字 #777777 / 背景 #ffffff4.47:1 · 通常テキストで AA 不合格文字 #949494 / 背景 #ffffff3.03:1 · 大きなテキストと UI のみ合格
例をクリックすると、チェッカーで開けます。
どのレベルを目指すべきか
- 全体で AA を目指しましょう。米国の ADA ガイダンス、Section 508、EN 301 549、欧州アクセシビリティ法はいずれも WCAG レベル AA を基準としています。AA を満たさないことは、コンプライアンス上の現実的なリスクです。
- 長文コンテンツには AAA を。記事、ドキュメント、行政や医療関連のコンテンツでは、本文を 7:1 にすると、特に高齢の読者やロービジョンの人にとって読みやすくなります。
- サイト全体に AAA を義務付けない。W3C 自身も、すべてのコンテンツで AAA を満たすことはできないと述べています。主要な本文の目標として扱い、大きな見出しでブランドカラーを使う妨げにはしないようにしましょう。
- 非テキストのコントラストも忘れずに。テキストが合格していても、入力欄の枠線、フォーカスインジケーター、意味を持つアイコンには、隣接する色との間に 3:1 のコントラストが必要です。
配色をチェックしよう
お手持ちのパレットをContrastCheck のカラーコントラストチェッカーに入力すれば、AA と AAA の結果がすぐにわかります。基準に届かない組み合わせには、合格できる最も近い明度の調整を提案します。