コントラストチェッカー — WCAG AA/AAA 判定

コントラスト比の仕組み

WCAG（Web Content Accessibility Guidelines）はコントラストを「2色の相対輝度の比」として定義しています。式: 各 sRGB チャンネルを線形化 → 視感度で重み付け（R 0.2126・G 0.7152・B 0.0722）→ (明い側 + 0.05) / (暗い側 + 0.05) を計算。結果は1:1（同色）から21:1（黒×白）の範囲です。

本ツールはこの公式WCAG 2.x の式をブラウザ内で計算しています。4つのバッジは AA（通常 4.5:1 / 大 3:1）と AAA（通常 7:1 / 大 4.5:1）の閾値で判定。「大きい文字」は24px（18pt）以上、または18.66px（14pt）以上の太字を指します。

最低でも AA を満たすべき理由

AA は多くの法域で法的に強制力を持つ基準です（米国ADA・EU EN 301 549・英国Equality Act のデジタルサービス）。本文文字でAA未達は最も多いアクセシビリティ問題で、設計段階で直すのが最も低コストです。

AAA は長文読書・行政サービス・重要情報インターフェースで推奨されます。基準が厳しく、デザイナーが好む「白地に薄いグレー」は AAA を簡単に落とします。短時間閲覧のサイトなら AA、書籍記事・公的情報サイトなら AAA を目指してください。

よくある間違い

「自分のモニタでは読めるから大丈夫」: モニタのキャリブレーション・オフィスの蛍光灯・屋外でのスマホ使用などで知覚コントラストは変化します。目視ではなく「比」で判定してください。

ダークモードをHEX反転で作る: 反転は色相を変え、コントラストを壊します。テーマ切替後に全ペアを再テストしてください。

ブランドガイドラインを盲信する: 多くのブランドパレットは WCAG 認知前に選ばれています。ブランドピンクが白背景で落ちる場合、本文用にやや濃いピンクを提案し、元の色は装飾用途にとどめてください。