コントラスト比チェッカー
前景色と背景色からWCAGコントラスト比を計算し、通常・大きいテキストのAA/AAA合格可否を同時に表示します。入れ替えとライブプレビュー付き。入力はブラウザ内だけで完結します。
例（クリックで試す）
通常テキスト — コントラストは読みやすさの目安です。
大きいテキスト（太字）
—
コントラスト比
—
| 通常 | 大 | |
|---|---|---|
| AA | — | — |
| AAA | — | — |
使い方
前景色・背景色を指定するか、例チップを選びます。比率・AA/AAA判定・プレビューが同時に更新されます。「入れ替え」で文字色と背景色を逆にして見え方を確認できます。
具体例
- #777 on #fff → 4.48:1 / 通常 AA ✗（4.5未満） / 大 AA ✓
- #000 on #fff → 21:1 / 通常・大とも AAA ✓
- #ea6379 on #fff → 3.20:1 / 通常 AA ✗ / 大 AA ✓（ブランド色を本文に使う場合は要注意）
- #fff on #2d2a32 → 14.11:1 / 通常・大とも AAA ✓（ダークUI向け）
よくある質問
入力データはサーバーに送信されますか？
いいえ。計算はすべてブラウザ内で完結し、外部に送信・保存されません。
AAとAAAの違いは？
通常テキストは4.5:1でAA、7:1でAAA。大きいテキストは3:1でAA、4.5:1でAAA。AAAの方がより多くのユーザーに読みやすい組み合わせです。
大きいテキストの基準は？
WCAGでは18pt（約24px）以上の通常書体、または14pt（約18.5px）以上の太字が「大きいテキスト」に該当します。しきい値が通常テキストより緩いです。
前景色と背景色の入れ替えで結果は変わりますか？
コントラスト比そのものは変わりません（明るい色と暗い色の相対関係は同じ）。ただし実際のUIではどちらを文字色にするかで見え方が異なるため、入れ替えボタンで両方向を確認できます。