文字色だけを調整
現在の背景色を維持します。
読みやすい文字
- 文字色
- 背景色
4つの基準に適合
← ツール一覧
[ 03 / デザイン ]
コントラストチェッカー
文字と背景の色をプレビューし、WCAGのコントラスト基準を確認。
すべての言葉を読みやすく。
適切なコントラストで、より多くの人にメッセージを届けましょう。
コントラスト比14.02:1
AA / 通常の文字 ≥ 4.5:1適合
AA / 大きな文字 ≥ 3:1適合
AAA / 通常の文字 ≥ 7:1適合
AAA / 大きな文字 ≥ 4.5:1適合
すべての基準を満たす配色の提案
現在の配色は4つのコントラスト基準をすべて満たしています。
7:1以上を目指しましょう。現在の色を明るく、または暗く調整し、4つのコントラスト基準をすべて満たす配色を提案します。
どちらか一方の色を維持したままでは7:1を達成できません。両方の色を調整してください。
背景色だけを調整
現在の文字色を維持します。
読みやすい文字
- 文字色
- 背景色
4つの基準に適合
両方の色を調整
一方を明るく、もう一方を暗くします。
読みやすい文字
- 文字色
- 背景色
4つの基準に適合
不透明なsRGBカラーのみを判定します。大きな文字とは、24px以上、または太字で18.67px以上の文字を指します。基準を満たす配色は、アクセシブルなデザインの要素の一つです。 WCAG 2.2のコントラスト解説 ↗
入力したテキストや色はブラウザ内で処理され、アップロードされません。