🌗 カラーコントラストチェッカー（WCAG AA / AAA）

概要

WCAG（Webコンテンツアクセシビリティガイドライン）のコントラスト比計算式は、IEC 61966-2-1 sRGB規格を使って各色の相対輝度を算出し、2色間の明るさの差を求めます。通常テキスト（16 px）では4.5:1以上でAA、7:1以上でAAAを満たします。大きなテキスト（24 px または太字18.67 px）は基準が緩和され、AAは3:1、AAAは4.5:1以上です。このツールはWCAG 2.xのアルゴリズム全体をブラウザ内のみで実行します。サーバー送信・アカウント登録・トラッキング一切なし。最後のカラーペアはローカルに保存され、次回訪問時にも引き継がれます。

使い方

1. カラーピッカーを使うか、テキストカラーフィールドにHEXコード（例：#1a2b3c）を直接入力してテキストの色を選んでください。
2. 背景カラーフィールドでも同じ方法で背景色を選んでください。スワップボタンを使うと2色を素早く入れ替えられます。
3. 大きく表示されたコントラスト比を確認し、通常テキストと大きなテキストそれぞれのAA・AAAの合否バッジ（計4つ）をチェックしてください。
4. デザインを確定する前に、ライブプレビューセクションで選んだ背景色にテキストが実際どう見えるかを確認してください。

よくある質問

このWCAGコントラストチェッカーは無料で使えますか？

はい、完全無料です。登録不要、有料ゲートなし、利用制限もありません。ページを開けばすぐにカラーチェックを始められます。

オフラインやインターネット接続なしでも使えますか？

はい。すべての計算はJavaScriptでブラウザ内のみで実行されます。ページを一度読み込めば、インターネットを切断してもツールは動作し続けます。サーバーへのデータ送信は一切ありません。

入力したカラーデータはプライベートですか？何かアップロードされますか？

入力したカラーはブラウザの外に出ることはありません。入力カラーの分析・アップロード・第三者への共有は一切なし。最後のカラーペアはブラウザのlocalStorageにのみ保存されます。

WCAG AAとAAAの違いは何ですか？

AAはほとんどの規制（ADA、EN 301 549など）が求める最低基準です。通常テキストは4.5:1、大きなテキスト（24 px または太字18.67 px）は3:1以上が必要です。AAAは強化されたアクセシビリティ基準で、通常テキストに7:1、大きなテキストに4.5:1以上を要求します。本番デザインでは少なくともAAを目指してください。

#fffのような3桁のHEX略記で色を確認できますか？

はい。ツールは3桁の略記（#rgb）と6桁のフル形式（#rrggbb）の両方のHEXコードに対応しています。カラーを入力または貼り付けるだけで、チェッカーが自動的に展開・検証します。