カラーコントラストチェッカー＆提案ツール
WCAGのコントラスト比を判定し、合格する色を自動提案
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
文字色と背景色を選ぶだけで、リアルタイムにコントラスト比を計算し、WCAG 2.1のAA・AAA基準に適合しているかを表示するツールです。ウェブデザイナーや開発者がテキストの可読性を確認する際に役立ち、基準を満たさない場合は明度(Lightness)を調整した代替カラーを自動で提案し、そのまま適用できます。計算はすべてブラウザ内で完結するため、色情報がサーバーに送信されることはありません。
使い方
- カラーピッカーまたは16進コードで文字色(前景色)を入力します。
- 同様の方法で背景色を入力します。
- プレビューとコントラスト比、AA/AAAの合否バッジを確認します。
- 基準未達の場合は提案された色の「適用」ボタンを押してすぐに反映します。
よくある質問
- AAとAAAの基準の違いは何ですか？
- AAは通常テキストで4.5:1以上、大きいテキストで3:1以上を求めます。AAAはより厳しく、通常テキストで7:1以上、大きいテキストで4.5:1以上が必要です。
- 提案色はどのように計算されますか？
- 元の色相と彩度を保ったまま明度を0〜100%の範囲で走査し、目標のコントラスト比を満たしつつ元の色に最も近い値を選んで提案します。
- 入力した色情報はサーバーに保存されますか？
- いいえ、すべての計算はブラウザ内でのみ行われ、色の値が外部に送信されることはありません。