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