色のコントラスト比チェッカー（WCAG 2.2 AA・AAA）

文字色と背景色の HEX コードから WCAG 2.2 の計算式でコントラスト比を求め、通常のテキスト・大きいテキスト・UI 部品が AA／AAA 基準を満たすか判定します。

文字色（前景色）

#RGB または #RRGGBB（例：#6B7280）

背景色

#RGB または #RRGGBB（例：#6B7280）

結果

コントラスト比

4.83:1

対象: 通常のテキスト判定: 合格
基準: AA：4.5:1 以上（達成基準 1.4.3）
対象: 通常のテキスト判定: 不合格
基準: AAA：7:1 以上（達成基準 1.4.6）
対象: 大きいテキスト判定: 合格
基準: AA：3:1 以上（達成基準 1.4.3）
24px（18pt）以上、または約 18.66px（14pt）以上の太字
対象: 大きいテキスト判定: 合格
基準: AAA：4.5:1 以上（達成基準 1.4.6）
24px（18pt）以上、または約 18.66px（14pt）以上の太字
対象: UI 部品・図形判定: 合格
基準: AA：3:1 以上（達成基準 1.4.11）
ボタンの枠線、アイコン、グラフなど（テキスト以外）

判定は丸める前の値で行い、表示は小数第 2 位未満を切り捨てています（例：4.499:1 は 4.49:1 と表示され、4.5:1 を満たしません）。

これは 16px の通常のテキストです。読みやすさを確認してください。

24px の大きいテキスト

約 18.66px の太字テキスト

ボタン風の枠線とアイコン

文字色 #6B7280

0.1672

背景色 #FFFFFF

1.0000

AA と AAA の違いは何ですか？

WCAG 2.2 の適合レベルです。通常のテキストは AA で 4.5:1 以上、AAA で 7:1 以上が必要です。大きいテキストは AA で 3:1 以上、AAA で 4.5:1 以上です。

「大きいテキスト」は何ピクセルからですか？

WCAG では 18 ポイント以上、または 14 ポイント以上の太字を大きいテキストとしています。CSS では 1pt が約 1.333px なので、約 24px 以上、または約 18.66px 以上の太字が目安です。

4.49:1 と表示されました。四捨五入すれば 4.5 ではないのですか？

WCAG の解説（Understanding 1.4.3）では、計算値を丸めずに判定するとしています（4.499:1 は 4.5:1 を満たしません）。このツールも丸める前の値で判定し、合格に見えないよう表示は小数第 2 位未満を切り捨てています。

透明な色やグラデーションも判定できますか？

できません。不透明な単色同士の組み合わせだけに対応しています。透明な色は、実際に重なって表示される不透明な色で確認してください。