どの基準を確認しますか？
通常テキストは4.5:1と7:1、大きなテキストは3:1と4.5:1、UIコンポーネントは3:1を確認します。
配色を公開する前にWCAGコントラストを確認
カラーコントラストチェッカーを使うと、前景色と背景色を一般的なWCAGコントラスト基準でテストできます。色を入力または選択し、自分のテキストをプレビューし、フォントサイズと太さを設定して、デザインレビューや課題管理向けの明確なレポートをコピーできます。
結果には正確なコントラスト比、通常テキスト、大きなテキスト、UIコンポーネントごとのAA/AAAの合否、実用的な前景色の候補が含まれます。
こんなときに使用
- ボタン、カード、ダッシュボード、フォーム、ドキュメント向けにテキスト色と背景色を選ぶとき。
- 読みやすいUIテキストに使う前にブランドカラーを監査するとき。
- フォントサイズがWCAG基準の大きなテキストに該当するか確認するとき。
- アクセシビリティのメモをチケット、プルリクエスト、デザイン引き継ぎにコピーするとき。
ツールを読み込み中...
カラーコントラストチェッカーFAQ
太字は大きなテキストの判定に影響しますか？
はい。太字のテキストは通常テキストより小さいピクセルサイズで大きなテキストとして扱われます。
近いアクセシブルな色を見つけられますか？
はい。元の色相をできるだけ保ちながら、最も近いAA前景色の方向を提案します。
