色コントラスト チェッカー
前景色と背景色を入力するとWCAG 2.1基準のコントラスト比を計算します。通常テキストと大きいテキストのAA/AAAの合否とリアルタイムプレビューを即時表示します。
前景色と背景色のHEXからコントラスト比を計算し、一般的なWCAG AA・AAAテキスト基準と比較します。
色のコントラストを確認する方法
- 前景色と背景色をHEXまたはカラーピッカーで指定します。
- プレビューとコントラスト比を確認します。
- AA・AAAの通常文字と大きい文字の判定を確認します。
計算方法
sRGB値を相対輝度へ変換し、明るい側と暗い側から標準コントラスト比を求めます。
AAは通常4.5:1・大文字3:1、AAAは通常7:1・大文字4.5:1を使います。
プライバシーと制限
計算はブラウザ内で完結します。2色だけを評価し、実際のフォントサイズ、太さ、透明度、画像、グラデーション、フォーカス状態などは検査しません。
Contrast Checker FAQ
対応色形式は？
3桁または6桁HEXです。
最大比率は？
黒と白で約21:1です。
AA合格ならページ全体もアクセシブルですか？
いいえ。コントラストは要件の一部です。
大きい文字か自動判定しますか？
いいえ。両方の基準を表示します。
色を送信しますか？
いいえ。ローカル計算です。