WCAG の AA と AAA は何が違いますか?
AA は多くの国のガイドラインや調達基準で求められる標準的な水準で、通常の文字は 4.5:1 以上、大きい文字は 3:1 以上が必要です。AAA はより高い水準で、通常の文字 7:1、大きい文字 4.5:1 を求めます。まず AA を満たし、本文の可読性を高めたい箇所で AAA を目指すのが実務的です。
コントラスト比はどう計算していますか?
WCAG 2.x の定義どおり、各色の相対輝度 L を求めて (L1 + 0.05) ÷ (L2 + 0.05) で計算します(L1 が明るい方)。相対輝度は sRGB の各チャンネルを 0〜1 に正規化し、0.03928 以下なら 12.92 で割り、それ以外は ((c + 0.055) / 1.055) の 2.4 乗に変換したうえで、0.2126R + 0.7152G + 0.0722B で合成した値です。比は 1:1〜21:1 の範囲になります。
「大きい文字」の定義は?
18pt(約 24px)以上、または 14pt(約 18.66px)以上の太字です。この条件を満たす文字は AA で 3:1、AAA で 4.5:1 まで緩和されます。日本語のように字画が多い書体では、基準を満たしていても実際には読みづらいことがあるため、本文には通常文字の基準を使うのが安全です。
文字以外にもコントラストは必要ですか?
必要です。WCAG 2.1 の達成基準 1.4.11「非テキストのコントラスト」では、ボタンの境界線、フォームの枠、アイコン、グラフの要素など、意味を伝える図形と UI 部品に隣接色との 3:1 以上を求めています。このツールでは同じ 2 色の比から 3:1 の判定も同時に表示します。