しくみ
文字色と背景色を入力すると、コントラスト比、リアルタイムのプレビュー、WCAGの各レベルの合否を表示します。基準を満たさない場合は、同じ色相で4.5:1に達する最も近い文字色を提案し、ワンタップで適用できます。
コントラスト比 = (明るい色の輝度 + 0.05) ÷ (暗い色の輝度 + 0.05)
WCAGの基準
- 通常の文字: AAは4.5:1以上、AAAは7:1以上。
- 大きな文字(24 px、太字なら18.66 px): AAは3:1以上、AAAは4.5:1以上。
- ボタン、アイコン、入力欄の枠線: 周囲に対して3:1以上。
活用のヒント
- 白背景にグレーの文字は基準を満たさないことが多いので、プレースホルダーやキャプションも確認しましょう。
- コントラストが十分だと、屋外でスマートフォンを見る人を含め、誰にとっても読みやすくなります。
- 入れ替えボタンで、暗い背景に明るい文字の組み合わせも確認しましょう。
計算の基準と出典
- コントラスト比の式と基準値はWCAG 2.2の達成基準1.4.3、1.4.6、1.4.11(W3C)に準拠
最終確認 2026年10月7日
よくある質問
必要なコントラスト比は?
通常の文字はWCAG AAで4.5:1、AAAで7:1が必要です。大きな文字はAAで3:1、AAAで4.5:1です。
大きな文字とはどのくらいですか?
24 px以上、太字なら18.66 px以上の文字です。
基準を満たさない場合は?
提案された色を使ってください。色相と彩度はそのままで、組み合わせが4.5:1に達するまで明度だけを変えた色です。
ボタンやアイコンにもコントラストは重要ですか?
はい。WCAGでは、ボタン、アイコン、入力欄の枠線などのUI部品とその周囲の間に3:1以上を求めています。
透明度は結果に影響しますか?
このチェッカーは不透明な色で計算します。半透明の文字は、背景の上で実際に見える色で確認してください。