WCAG コントラストチェッカー
プライバシー優先設計 — すべてブラウザ内で処理します
前景と背景の色を選ぶと、WCAG コントラスト比と通常/大きいテキスト、UI コンポーネント向けの AA/AAA バッジを表示します。
どのくらいの比率で合格ですか
WCAG AA は通常テキストに 4.5:1、大きいテキスト(≥18 px レギュラー、または ≥14 px ボールド)に 3:1 を要求し、AAA はそれぞれ 7:1 と 4.5:1 まで厳しくなります。
UI コンポーネントの 3:1 とは
WCAG 2.1 SC 1.4.11 はアイコンや入力欄の枠など、情報を伝える非テキスト要素に対して 3:1 のコントラストを求めます。このバッジでその要件をカバーします。
半透明色はサポートされますか
値が rgba で背景が不透明な場合は計算できます。重ねた半透明の場合は事前にフラット化が必要で、解析できないときはツールが警告します。
よくある質問
- どのくらいの比率で合格ですか?
- WCAG AA は通常テキストに 4.5:1、大きいテキスト(≥18 px レギュラー、または ≥14 px ボールド)に 3:1 を要求し、AAA はそれぞれ 7:1 と 4.5:1 まで厳しくなります。
- UI コンポーネントの 3:1 とは?
- WCAG 2.1 SC 1.4.11 はアイコンや入力欄の枠など、情報を伝える非テキスト要素に対して 3:1 のコントラストを求めます。このバッジでその要件をカバーします。
- 半透明色はサポートされますか?
- 値が rgba で背景が不透明な場合は計算できます。重ねた半透明の場合は事前にフラット化が必要で、解析できないときはツールが警告します。
- 何かアップロードされますか?
- いいえ。計算はこのページ上の小さな関数で、色情報がブラウザの外へ出ることはありません。