カラーコントラスト確認
カラーコントラストチェッカー
文字色と背景色からWCAG AA / AAAコントラストをリアルタイム計算。
比率に合格しても、すべてのサイズ、太さ、状況が自動的にアクセシブルになるわけではありません
前景色と背景色
2色を見極めてから使う
WCAGの相対輝度式でコントラストをリアルタイム計算します。
コントラスト結果
14.25:1本文が読みやすいかを確認するための文章です。Aa こんにちは 123
通常文字 AA合格 · ≥ 4.5
大きな文字 AA合格 · ≥ 3.0
通常文字 AAA合格 · ≥ 7.0
方法と制限
色相の距離ではなく、相対輝度を比較
2色を線形RGBへ変換して相対輝度を計算し、明るい色と暗い色から1:1～21:1の比率を求めます。
通常本文のAAは4.5:1、大きな文字は3:1です。読みやすさにはサイズ、太さ、行間、実際の表示環境も関わります。
コントラスト =（明るい色の相対輝度 + 0.05）÷（暗い色の相対輝度 + 0.05）。
よくある質問
カラーコントラストチェッカー · よくある質問
AAとAAAの違いは？
AAAがより厳格です。通常文字はAA 4.5:1、AAA 7:1、大きな文字は3:1と4.5:1です。
大きな文字とは？
一般に通常ウェイト24px以上、太字約18.66px以上です。実際のフォントと環境でも確認してください。
赤と緑が違って見えても不合格になるのは？
色相が違っても輝度差が足りない場合があります。状態には文字や形も併用してください。