コントラストチェッカー
テキスト色と背景色の WCAG コントラスト比を即座にチェック。
100% プライベート——すべてブラウザ内で動作
広告
使い方
- 1
ピッカーまたは HEX コードでテキスト色と背景色を設定します。
- 2
WCAG コントラスト比が即座に計算されます。
- 3
4つのバッジでどの WCAG 基準を満たすか確認できます。
- 4
「入れ替え」で逆の組み合わせもチェックできます。
使用例
白背景に濃い文字
入力
テキスト #111827 · 背景 #FFFFFF出力
コントラスト 17.74 : 1 — すべてのサイズで AA・AAA 適合低コントラストのグレー
入力
テキスト #9CA3AF · 背景 #FFFFFF出力
コントラスト 2.54 : 1 — 通常テキストは AA 不適合よくある質問
コントラスト比はどのくらい必要？
WCAG は通常テキストに 4.5:1 以上（AA）、7:1（AAA）を推奨しています。大きなテキスト（18pt、または太字 14pt）は 3:1 以上です。
コントラスト比の計算方法は？
WCAG 2.x の式 (L1 + 0.05) / (L2 + 0.05) を使用します。L1・L2 は明るい色と暗い色の相対輝度で、結果は 1:1～21:1 の範囲です。
色覚異常への対応もチェックできますか？
いいえ。コントラスト比は明るさの差のみを測ります。比が適合していても、色覚特性によっては区別しにくい配色があります。