コントラストチェッカー（WCAG 2.2）
文字色と背景色のコントラストをWCAG 2.2のAA・AAA基準で判定し、APCA（草案）のLc、色覚特性のシミュレーション、ΔEも表示。合格する色の提案とパレット表付きです。
WCAG 2.2は、通常のテキストに4.5:1、大きなテキストとインターフェースのグラフィックに3:1以上のコントラスト比（AAレベル）を求めています。AAAレベルでは7:1 / 4.5:1です。このチェッカーは規格の定義どおりにコントラスト比を計算し、フォントサイズに応じて合格するレベルを示し、最も近い合格色を提案し、3種類の主な色覚特性での見え方をシミュレーションします。新しいAPCAのスコアは草案であることを明記して併記します。
使い方
- 文字色と背景色を入力します。HEX、rgb()、hsl()、oklch()、CSSの色名が使えます。
- フォントサイズを設定し、太字ならチェックを入れて、正しい基準を使います。
- コントラスト比とAA/AAAの結果を確認し、不合格なら提案された色を使います。
- 必要ならパレットを貼り付けて、文字色と背景色のすべての組み合わせを一度に評価します。
計算式
コントラスト比 ＝ (L₁ + 0.05) ÷ (L₂ + 0.05)、L ＝ 0.2126 R + 0.7152 G + 0.0722 B。各チャンネル c ＝ v/255 は線形化します：c ≤ 0.04045 ? c/12.92 : ((c + 0.055)/1.055)^2.4
L₁ は明るいほうの色です。コントラスト比は1:1（同じ色）から21:1（白地に黒）までです。結果は四捨五入ではなく切り捨てで表示します（4.499:1はAA不合格）。大きなテキストとは24 px以上、または太字で18.66 px（14 pt）以上です。
計算例
白地のグレー #767676：118/255 ＝ 0.4627 を線形化すると0.1812なので、コントラスト比は 1.05 ÷ (0.1812 + 0.05) ＝ 4.54:1 で、通常テキストのAAは合格、AAAは不合格です。1段階明るい #777777 は4.47:1で、本文のAAにも不合格です。
よくある質問
APCAとは何で、使うべきですか？
APCA（Accessible Perceptual Contrast Algorithm）は、将来のWCAG 3の候補となっている方式です。特にダークモードで知覚をよく反映しますが、まだ草案です。現時点の適合判定は、最初に表示するWCAG 2のコントラスト比で行います。
色覚に配慮した配色には、コントラストだけで十分ですか？
コントラストは明度に依存するため色覚特性があっても多くは保たれますが、赤と緑の区別は失われることがあります。シミュレーション表は、1型・2型・3型の色覚の人に各組み合わせがどう見えるかを示します。色だけで意味を伝えないでください。
ロゴや無効状態のボタンにも4.5:1は必要ですか？
いいえ。WCAGはロゴタイプ、純粋な装飾テキスト、無効なコントロールを対象外としています。情報を伝えるアイコンや入力欄の枠線には3:1が必要です。
出典
最終更新:
この入力内容のページアドレス： https://kakao.mobile/ja/tools/color-contrast-checker/
このツールを引用する
kakaoCalc. (2026, November 8). コントラストチェッカー（WCAG 2.2）. https://kakao.mobile/ja/tools/color-contrast-checker/
“コントラストチェッカー（WCAG 2.2）.” kakaoCalc, 8 Nov. 2026, kakao.mobile/ja/tools/color-contrast-checker/.