コントラストチェッカー
文字色と背景色を入力すると、WCAG のコントラスト比を計算し、AA・AAA の合否とプレビューを即座に表示します。
🔒 お使いのブラウザ内でローカル処理されます
Loading…
使い方
- 1つ目の欄に文字（前景）色を入力するか、カラーピッカーで選びます。
- 2つ目の欄に背景色を入力するか、カラーピッカーで選びます。
- コントラスト比と実際の配色のプレビューがすぐに更新されます。
- 4つのバッジを確認し、通常テキストと大きいテキストでWCAG AA・AAA基準を満たしているか確認します。
特徴
- hex、rgb()、hsl() のカラー形式に対応
- WCAG 2.x の相対輝度コントラスト比を正確に計算
- 通常・大きいテキストそれぞれのAA・AAA合否バッジを表示
- 実際の文字色と背景色の組み合わせをリアルタイムでプレビュー
- 100%クライアントサイド処理——色情報はブラウザの外に出ません
よくある質問
コントラスト比はどのように計算されますか？
WCAG 2.xの計算式を使用します。各色のsRGBチャンネルを線形化して相対輝度を求め、(L1 + 0.05) / (L2 + 0.05) で比率を算出します（L1は明るい方の色の輝度）。比率は1:1（コントラストなし）から21:1（黒と白）の範囲です。
AAとAAAの違いは何ですか？
AAはほとんどのサイトが目標とする標準的な適合レベルで、AAAはより厳格な強化レベルです。AAは通常テキストで4.5:1、大きいテキストで3:1が必要です。AAAは通常テキストで7:1、大きいテキストで4.5:1が必要です。
WCAGでいう「大きいテキスト」とは何ですか？
大きいテキストとは、18pt（24px）以上の標準ウェイト、または14pt（18.66px）以上の太字を指します。太く大きい文字は低いコントラストでも読みやすいため、要求基準が緩和されています。
どの色形式を入力できますか？
hexコード（#000または#000000）、rgb()/rgba()、hsl()/hsla()形式の文字列を入力できるほか、各欄の横にあるカラーピッカーも使用できます。
このツールは色情報を保存または送信しますか？
いいえ。すべての解析とコントラスト計算はブラウザ内でローカルにJavaScriptによって行われます。サーバーに送信されたり保存されたりすることはありません。