コントラスト比チェッカー
前景色と背景色からWCAGコントラスト比を計算し、通常・大きいテキストのAA/AAA合格可否を同時に表示します。入れ替えとライブプレビュー付き。入力はブラウザ内だけで完結します。
例（クリックで試す）
通常テキスト — コントラストは読みやすさの目安です。
大きいテキスト（太字）
—
コントラスト比
—
| 通常 | 大 | |
|---|---|---|
| AA | — | — |
| AAA | — | — |
使い方
前景色・背景色を指定するか、例チップを選びます。比率・AA/AAA判定・プレビューが同時に更新されます。「入れ替え」で文字色と背景色を逆にして見え方を確認できます。
具体例
- #777 on #fff → 4.47:1 / 通常 AA ✗（4.5未満） / 大 AA ✓
- #000 on #fff → 21:1 / 通常・大とも AAA ✓
- #ea6379 on #fff → 3.20:1 / 通常 AA ✗ / 大 AA ✓（ブランド色を本文に使う場合は要注意）
- #fff on #2d2a32 → 14.10:1 / 通常・大とも AAA ✓（ダークUI向け）
WCAG判定で確認できないこと
判定値はWCAG 2.xのsRGB相対輝度とAA/AAAしきい値に基づきます。W3CのContrast (Minimum)解説も参照してください（最終確認：2026年7月14日）。ただし、この画面は入力した不透明な2色だけを比較し、画像・グラデーション・半透明・ホバー状態・環境光は評価しません。
数値合格だけでアクセシビリティ全体が保証されるわけではありません。実際のフォントサイズと太さ、フォーカス表示、リンクの識別、色覚特性、拡大表示も実画面で確認します。配色候補は配色ジェネレーターで作れます。
しきい値の読み方
通常文字は4.5:1以上でAA、7:1以上でAAA、大きい文字は3:1以上でAA、4.5:1以上でAAAです。これは文字と背景の組み合わせに対する基準で、ロゴ文字や装飾だけの文字には扱いが異なります。境界ぎりぎりの色は表示環境や実装変更で下回りやすいため、可能なら余裕のある比率を選びます。色コードの形式変換はカラーコード変換で行えます。
よくある質問
入力データはサーバーに送信されますか？
いいえ。計算はすべてブラウザ内で完結し、外部に送信・保存されません。
AAとAAAの違いは？
通常テキストは4.5:1でAA、7:1でAAA。大きいテキストは3:1でAA、4.5:1でAAA。AAAの方がより多くのユーザーに読みやすい組み合わせです。
大きいテキストの基準は？
WCAGでは18pt（約24px）以上の通常書体、または14pt（約18.5px）以上の太字が「大きいテキスト」に該当します。しきい値が通常テキストより緩いです。
前景色と背景色の入れ替えで結果は変わりますか？
コントラスト比そのものは変わりません（明るい色と暗い色の相対関係は同じ）。ただし実際のUIではどちらを文字色にするかで見え方が異なるため、入れ替えボタンで両方向を確認できます。