コントラストチェッカー
このコントラストチェッカーは、文字色と背景色の WCAG 2.1 コントラスト比を計算し、その組み合わせが通常テキストと大きなテキストで AA・AAA に適合するかを表示します。
The quick brown fox
Small text sample — 14px regular weight
このツールについて
このコントラストチェッカーは、文字色と背景色の WCAG 2.1 コントラスト比を計算し、その組み合わせが通常テキストと大きなテキストで AA・AAA に適合するかを表示します。
使い方
- 文字色を入力するか選びます。
- 背景色を入力するか選びます（3 桁の短縮形を含む HEX 値が使えます）。
- コントラスト比と、通常テキスト・大きなテキストそれぞれの AA/AAA の結果を確認します。
- 必要なレベルに適合するまで、どちらかの色を調整します。
知っておきたいこと
- WCAG 2.1 AA では、通常テキストで 4.5:1 以上、大きなテキストで 3:1 以上のコントラスト比が必要です。
- WCAG 2.1 AAA では、通常テキストで 7:1 以上、大きなテキストで 4.5:1 以上が必要です。
- 大きなテキストとは、標準の太さで 18 pt（24 px）以上、または太字で 14 pt（約 18.66 px）以上のテキストです。
- コントラスト比は 1:1（同じ色）から 21:1（白地に黒）までの範囲です。
- 比率は、WCAG の計算式に従って各色の相対輝度から算出します。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
アクセシビリティに必要なコントラスト比は？
WCAG 2.1 レベル AA では、通常テキストで 4.5:1 以上、大きなテキストで 3:1 以上が必要です。レベル AAA ではこれが 7:1 と 4.5:1 に引き上げられます。
緑の背景に白い文字はアクセシブルですか？
色合いによります。明るい緑の多くは白い文字では AA を満たせませんが、濃い緑なら通常は適合します。正確な HEX 値を入力して確認してください。
WCAG での大きなテキストとは？
標準の太さで 18 ポイント（24 px）以上、または太字で 14 ポイント（約 18.66 px）以上のテキストです。
WCAG のコントラストはボタンやアイコンにも適用されますか？
WCAG 2.1 の達成基準 1.4.11 では、ユーザーインターフェースのコンポーネントや意味のあるグラフィックについて、周囲との 3:1 以上のコントラストを求めています。