カラーコントラストチェッカー
無料のカラーコントラストチェッカー。文字色と背景色が WCAG 2.2 の AA・AAA を満たすか判定し、コントラスト比と合格する最も近い色を表示します。
これは段落サイズの通常の文字です。
大きな文字
ボタン| AA | AAA | |
|---|---|---|
| 通常の文字 | ||
| 大きな文字（24 px、または太字で 18.7 px） | ||
| アイコンとインターフェースの境界線 | — |
できること
このチェッカーは、多くのアクセシビリティ関連法で採用されている WCAG 2.2 アクセシビリティガイドラインの計算式で、文字色と背景色のコントラストを測定します。1:1（コントラストなし）から 21:1（白地に黒）までのコントラスト比を表示し、通常の文字、大きな文字、アイコンや境界線などのインターフェース要素について AA と AAA の基準に合格するかを示します。不合格の場合は、同じ色相で合格する最も近い色を提案します。
使い方
- 文字色と背景色を入力するか、選択します。
- コントラスト比と AA・AAA の判定結果を確認し、ライブプレビューをチェックします。
- 不合格の場合は提案された色の「使用」を押し、リンクをコピーして結果を共有します。
よくある質問
必要なコントラスト比はどれくらいですか？
一般的な法的目標であるレベル AA では、通常の文字に 4.5:1、大きな文字とアイコンやインターフェースの境界線に 3:1 が必要です。レベル AAA では、通常の文字に 7:1、大きな文字に 4.5:1 が必要です。
大きな文字とはどのような文字ですか？
24 CSS ピクセル（18 ポイント）以上の文字、または太字で約 18.7 CSS ピクセル（14 ポイント）以上の文字です。見出しは大きな文字であることが多く、本文はたいていそうではありません。
白地の #777777 が不合格になるのはなぜですか？
コントラスト比は 4.47:1 で、通常の文字に必要な 4.5:1 をわずかに下回ります。比率は切り上げられないため、少し濃いグレーの #767676（4.54:1）が、白地で合格する最も明るいグレーです。
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast