実際のプロダクトデザインにおける WCAG コントラスト比——事例と落とし穴
コントラスト比が実際に測っているもの
WCAG のコントラスト比は、2つの色——テキストとその背景——の相対輝度（relative luminance）を、1:1（同一）から 21:1（純黒に純白）の尺度で比較します。式は (L1 + 0.05) / (L2 + 0.05) で、L1 は明るい色の輝度、L2 は暗い色の輝度です。鍵語は輝度であって色相ではありません：コントラストは色がどれだけ明るいか暗いかの話で、どれだけ違って見えるかではありません。
だから、鮮やかで明らかに異なる2色でも失敗しえます。中くらいの赤と中くらいの緑はほぼ同じ輝度になりえて、1:1 に近い比を生みます——一方のテキストを他方の背景に置くとほぼ読めません。たとえ「違う色」でも。コントラストと色の鮮やかさは同じものではありません。
しきい値、正確に
WCAG 2 の AA レベルは、通常テキストに 4.5:1、大きいテキストに 3:1 を要求します。大きいとは少なくとも 24px（18pt）、または太字なら 18.66px（14pt）と定義されます——それより小さいピクセルサイズは、太字のときだけ「大きい」と数えられます。AAA レベルはこれを通常 7:1、大きい 4.5:1 に引き上げます。
人が忘れる別の規則があります：達成基準 1.4.11（非テキストのコントラスト）は、UI コンポーネントと意味のあるグラフィック——ボタンの枠、入力欄の輪郭、アイコン、フォーカス表示——に対し、隣接色との 3:1 を要求します。無効化されたコントロールはコントラスト最小値から免除されますが、その免除は見えにくい非アクティブ状態を正当化するために広く悪用されます。
実際のデザインがどこで失敗するか
最もよくある失敗は、「上品さ」の名のもとに白地へ薄いグレーの本文を置くことです。#999999 のような中間グレーは白に対しておよそ 2.8:1 しかなく——AA を完全に落とします。プレースホルダーのテキストはたいていさらに薄く、ほぼ決して通らないのに、チームは日常的に本物の指示をそこに入れます。
ブランド色も別の罠です：多くの中間調のブランドパレットは、白いフィールド上のボタンラベルで AA を落とすので、ラベルかボタンを暗くせねばなりません。ヒーロー画像やグラデーション上のテキストは最も微妙な場合です——コントラスト比はピクセルごとに変わるので、キャプションが写真の暗い部分で通り、明るい部分で落ちることがあります。ダークモードも忘れられます：低コントラストの濃いグレーを黒に置くと、ライトモードの従兄弟と同じく不合格です。
チェッカーが捕まえない落とし穴
コントラストチェッカーは2つの平坦な色を比べますが、実際のテキストは平坦ではありません。通常のウェイトで通る比でも、極細または細いフォントでは読みづらくなりえます。計算が線の太さを無視するからです——細い字形は比が示すより少ないインクしか画面に置きません。小さなアンチエイリアスのテキストも、縁で実質的にコントラストを下げます。
さらに2つの罠：大きいテキストの免除を、太字だがまだ小さいテキストに当てること（サイズのしきい値を満たさねばなりません）、そして通った比を完全なアクセシビリティと見なすこと。コントラスト（1.4.3）と、色だけに頼らないこと（1.4.1）は別々の要件です——コントラストは通るが本文と色だけで区別されるリンクはやはり失敗します。画像やグラデーション上のテキストは常に最悪ケースのピクセルで、平均ではなくテストしてください。
今日は WCAG 2、明日は APCA
WCAG 2 の比は有用ですが不完全です。フォントサイズ・ウェイト、また人の視覚が明るい上に暗いと暗い上に明るいを実際どう知覚するかをモデル化しないため、ある明るいテキストの組み合わせには厳しすぎ、ある暗い組み合わせには甘すぎることがあります。デザイナーは、ある組が「見た目は問題ない」のに落ちる、または「細く見える」のに通るときに、それを感じます。
提案された置き換えは APCA（Accessible Perceptual Contrast Algorithm）で、将来の WCAG 3 に向けて探索されています。APCA はテキストサイズ・ウェイト・コントラスト極性に重みをつけ、知覚により近づけることを狙います。それはまだ規範的ではありません——それに対して適合を主張することはできません。実務的な立場：今日は WCAG 2 AA に合わせて出荷し、標準がどこへ向かうかを見るために APCA に注目すること。
要点
2つの数字を覚えること：本文に 4.5:1、大きいテキストと UI コンポーネントに 3:1。 ほとんどの決定はそこに戻ります。
グレー・オン・ホワイトの「上品さ」を信じないこと——#999 を白に置くと AA を落とします。出荷前に確認を。
画像やグラデーション上のテキストは最悪のピクセルでテストすること——平均ではなく。比は領域内で変わるからです。
極細フォントで通った比でも、実際の読者にはやはり失敗します——数字だけでなくウェイトとサイズを考えること。
コントラストと色の独立性は別々の要件です——色を唯一の信号にしないこと。本サイトの色コントラストチェッカーは、任意の組について WCAG 2 比と AA/AAA 結果を計算します。