カラーコントラストチェッカー
文字色と背景色がWCAGのAA・AAAを満たすほど読みやすいかを確認し、合格する最も近い色を提案します。
大きな見出しの文字
通常の本文。多くの人が画面で読むサイズです。読みやすくするには、大きな文字よりも高いコントラストが必要です。
ボタンコントラスト比
4.54:1
- 通常の文字 · AA 4.5:1合格
- 通常の文字 · AAA 7:1不合格
- 大きな文字 · AA 3:1合格
- 大きな文字 · AAA 4.5:1合格
- アイコンと枠線 · AA 3:1合格
合格する最も近い文字色：
WCAG 2.2の計算式で測定しています。大きな文字とは24 px以上、または太字で18.5 px以上の文字です。半透明の文字は、背景の上での見た目どおりに測定します。
カラーコントラストチェッカーは、文字色と背景色のコントラスト比をWCAG 2.2の計算式で測定し、通常の文字、大きな文字、アイコンと枠線のそれぞれでAAとAAAに合格するかを表示します。ライブプレビューで、実際の文字を背景の上に表示します。不合格の場合は、色相を保ったまま合格する最も近い文字色を提案するので、デザインの変更を最小限に抑えられます。
カラーコントラストチェッカーの使い方
- 1
2つの色を選ぶ
文字色と背景色を入力するか、ピッカーで選びます。
- 2
結果を確認
コントラスト比と、AA・AAAに合格するかを確認します。
- 3
必要なら修正
提案された合格する色を使います。
できること
- WCAG 2.2の基準
- 通常の文字と大きな文字のAA・AAA、さらにアイコンと枠線。
- ライブプレビュー
- 見出し、本文、ボタンを背景の上で確認できます。
- 最も近い修正案
- 同じ色相で、合格する最も近い色。
よくある質問
必要なコントラスト比は？
WCAG AAでは、通常の文字に4.5:1、大きな文字・アイコン・枠線に3:1が必要です。AAAでは、通常の文字に7:1、大きな文字に4.5:1が必要です。
大きな文字とはどのくらいですか？
24 px以上、または約18.5 px（14 pt）以上の太字です。
半透明の色にも対応していますか？
はい。透明度のある文字色は、背景の上での見た目どおりに測定します。
インターネット接続は必要ですか？
ページを開くときだけ必要です。計算はすべてお使いの端末上で行われ、入力した内容はどこにも送信されません。