カラーコントラストチェッカーは、前景色（テキスト・アイコン）と背景色のコントラスト比が WCAG アクセシビリティ基準を満たしているかどうかを検証し、AA および AAA レベルの合否状態を表示するツールです。UI デザインレビューやアクセシビリティ監査で広く使われています。
実務で重要な WCAG 閾値
WCAG のコントラスト比は 1:1（コントラストなし、白地に白など）から 21:1（黒地に白）の範囲です。よく確認することになる閾値：
- AA 通常テキスト — ≥ 4.5:1：ほとんどの Web・アプリのコンプライアンス要件をカバー
- AA 大きなテキスト — ≥ 3:1：18 pt（≈ 24 px）以上、または 14 pt（≈ 18.5 px）以上の太字に適用
- AAA 通常テキスト — ≥ 7:1：本文テキストや高アクセシビリティが求められる場面
- AAA 大きなテキスト — ≥ 4.5:1
ツールは 3 つのコンテンツカテゴリを個別にチェックします：通常テキスト・大きなテキスト・UI コンポーネント（アイコン・ボタンの枠線・グラフ要素）。
輝度スライダーで不合格を修正する
各カラーピッカーの隣にある輝度スライダーは、色相と彩度を変えずに明度チャンネル（HSL の L）を調整します。比率が閾値を下回っている場合、テキストカラーのスライダーを上げる（明るくする）か、背景カラーのスライダーを下げる（暗くする）のが、色を完全に選び直すことなく基準をクリアする最速の方法です。
例えば、ブランドブルー #3B82F6 を白背景に使うと比率は約 3.0:1 で AA 通常テキストを下回ります。#1D4ED8 まで暗くすると約 5.3:1 となり AA を通過します。
AA レベル（ほとんどの場面）
- 通常テキスト：≥ 4.5:1
- 大きなテキスト（≥ 24 px または ≥ 18.5 px 太字）：≥ 3:1
- UI コンポーネントとアイコン：≥ 3:1
- WCAG 2.1 達成基準 1.4.3 と 1.4.11 をカバー
AAA レベル（高い要求水準）
- 通常テキスト：≥ 7:1
- 大きなテキスト：≥ 4.5:1
- 医療・行政・教育などの高アクセシビリティ場面に適切
- 普遍的な目標ではなく、デザインの柔軟性を制約する
合格でも視覚的に不明瞭になる場合
コントラスト計算は相対輝度を使用します。純赤 #FF0000 を黒背景に使う場合のように、比率の閾値を満たしていても色相差が不十分で色覚障害のある方には読みにくい組み合わせがあります。合否バッジだけでなく、必ずライブプレビューで実際の見た目を確認してください。
コンテンツ種別ごとの推奨目標
本文テキストは長時間読む快適さのために AAA（7:1）を目指すと良いです。ナビゲーションリンクやボタンラベルは AA（4.5:1）で十分です。大きな見出しは AA 大テキスト基準（3:1）を使えます。純粋な装飾要素は WCAG のコントラスト要件から完全に免除されています。極端に高いコントラスト（21:1 の純粋な黒白など）は広い面積で目の疲労を引き起こすことがあるため、基準を満たす中で最も快適に見えるレシオを選んでください。