カラーコントラストチェッカー
WCAG 2.1のAA/AAAレベルに適合しているか確認できます
WCAG 2.1 適合チェック
見出しサンプル (24px)
本文テキストサンプル。このツールでコントラスト比を確認できます。(16px)
小さなテキストサンプル。フォントサイズが小さいほど高いコントラストが必要です。(14px)
カラーコントラストチェッカーとは
Webアクセシビリティの国際標準であるWCAG（Web Content Accessibility Guidelines）2.1に基づき、前景色と背景色のコントラスト比を計算するツールです。視覚障害のある方を含む多くのユーザーが読みやすいWebページを作成するために活用できます。
よくある質問
WCAG AAとAAAの違いは？
WCAG（Web Content Accessibility Guidelines）は3段階の適合レベルがあり、A < AA < AAA の順で要件が厳しくなります。コントラストでは AA は通常テキスト 4.5:1、大きいテキスト 3:1。AAA は通常テキスト 7:1、大きいテキスト 4.5:1。商用サイトは AA 達成が事実上の最低基準で、公共サービス・医療系・教育系では AAA 推奨です。日本のJIS X 8341シリーズも WCAG をベースにしています。
「大きいテキスト」の定義は？
WCAG 2.1 では、(1) 18pt（24px相当）以上の通常テキスト、または (2) 14pt（18.67px相当）以上の太字テキスト を「大きいテキスト」と定義します。これらは視認性が高いため、コントラスト比要件が緩和されます。本文の段落は通常 16px なので「通常テキスト」扱い、見出し（h2/h3）は28px以上が一般的なので「大きいテキスト」扱いになります。
コントラスト比はどうやって計算されますか？
WCAG式では各色のRGB値から「相対輝度（relative luminance）」を計算し、コントラスト比 = (明るい輝度 + 0.05) / (暗い輝度 + 0.05) で求めます。最大値は 21:1（黒 #000000 × 白 #FFFFFF）、最小値は 1:1（同色）。輝度計算は線形RGB変換を経由し、人間の目の感度を反映しています。本ツールは WCAG 2.1 の正確なアルゴリズムで計算しています。
コントラスト不足の場合どうすればよいですか？
コントラスト比を上げる方法: (1) 前景色をより暗く（黒に近づける）、(2) 背景色を明るく（白に近づける）、(3) 背景にぼかしや暗いオーバーレイを追加、(4) フォントサイズを大きくする・太字にする（要件緩和）、(5) アイコンや下線で視覚的補強。デザインの世界観を保ちながら、HSL の Lightness のみを微調整するのがおすすめです。
色覚異常の人にも見やすくするには？
コントラスト比だけでなく「色相だけで情報を伝えない」ことが重要です。WCAG基準: (1) 色だけで情報を区別しない（赤=エラー、緑=成功 → アイコンや文言も併用）、(2) リンクは色だけでなく下線でも示す、(3) フォーム入力エラーは色 + テキスト + アイコンで表示。色覚シミュレーター（Color Oracle、Sim Daltonism）でデザイン確認も推奨されます。
ダークモードでもチェックすべきですか？
はい、ダークモードでもコントラスト基準を満たす必要があります。本ツールはどの色の組み合わせでも正確にチェックできるので、ライトモード（黒文字×白背景）とダークモード（白文字×濃灰背景）両方の組合せを確認してください。ダークモードでは、純白 #FFFFFF より少し落ち着いた #E0E0E0 程度の方が目に優しく、長時間の閲覧で疲れにくくなります。
リンクのコントラストは？
リンクテキストは (1) 通常の本文テキスト と背景の比 4.5:1、(2) リンク色 と 通常本文の比 3:1（色だけでリンクを判別する場合の WCAG 1.4.1）、(3) ホバー時の状態変化が視認可能、を満たす必要があります。一般的には「青色のリンク + 下線あり」が最もアクセシブルで、装飾性を上げる場合も下線を完全に消すのは避けるのがベストプラクティスです。
アクセシビリティ対応の優先順位は？
AdSense審査・SEO・ユーザー体験の観点から、優先度の高い順に: (1) コントラスト比 4.5:1 以上（AA準拠）、(2) altテキスト（画像）、(3) キーボードフォーカス可視化、(4) フォームラベル、(5) 見出し階層（h1→h2→h3）、(6) 動画字幕、(7) スクリーンリーダー対応（aria-label等）。本ツールは(1)に特化しています。Lighthouse / axe DevTools で総合チェックも併用してください。