コントラストチェッカー
文字と背景のコントラストを WCAG AA・AAA で確認
- ファイルは端末の外に出ません
- ブラウザ内で処理
- 無料・登録不要・透かしなし
コントラスト比
4.54:1
すべての文字で AA に適合
- 適合
AA通常の文字
4.5:1
- 適合
AA大きな文字
3:1 · 24px 以上、または太字 18.66px 以上
- 不適合
AAA通常の文字
7:1
- 適合
AAA大きな文字
4.5:1 · 24px 以上、または太字 18.66px 以上
- 適合
AAUI コンポーネントとグラフィック
3:1 · アイコン、入力欄の枠線、フォーカスリング
APCA 明度コントラスト
Lc 71.6
コンテンツ文字には可、長い本文には不向き
WCAG 3 草案の指標で、明暗の向きを区別します。Lc がマイナスなら暗い背景に明るい文字です。
プレビュー
大きな見出し
いろはにほへと ちりぬるを
いろはにほへと ちりぬるを
コントラスト不足が一番響くのは本文です。小さな文字の長い段落はすぐに目が疲れ、日差しの下のスマホでは特に読みにくくなります。
いろはにほへと ちりぬるを
注記・キャプション・脚注
ボタンボタン
最も近い適合色
AA · 4.5:1
文字色を調整適合済み
背景色を調整適合済み
AAA · 7:1
文字色を調整
#595959 · 7.00:1
背景色を調整明度の調整だけでは到達できません
明度（OKLCH）だけを調整するので、色相や印象は変わりません。
コントラストチェッカーの使い方
文字色と背景色が WCAG 2（通常の文字・大きな文字・UI コンポーネントの AA と AAA）を満たすかを確認し、WCAG 3 草案の APCA 明度コントラストも表示します。不適合なら最も近い適合色を提案します。
- 1
「文字色」と「背景色」に HEX、rgb()、hsl()、oklch()、色名のいずれかを入力するか、色見本をクリックしてカラーピッカーを開きます。
- 2
「コントラスト比」の値と、AA・AAA の各項目が「適合」か「不適合」かを確認します。
- 3
「プレビュー」で見え方を確かめ、「サンプル文字」に自分の文章を入れたり、「色を入れ替え」で逆の組み合わせを試したりします。
- 4
「最も近い適合色」で、AA（4.5:1）または AAA（7:1）向けの「文字色を調整」「背景色を調整」の候補から「適用」を押します。
- 5
色を変更するとページの URL に 2 色が含まれるので、URL をコピーすれば結果を共有できます。
よくある質問
必要なコントラスト比はいくつですか？
WCAG AA では通常の文字が 4.5:1、大きな文字（24px 以上、または太字 18.66px 以上）とアイコンや入力欄の枠などの UI コンポーネントが 3:1 です。AAA ではそれぞれ 7:1 と 4.5:1 です。
4.497:1 が 4.50 ではなく 4.49 と表示されるのはなぜですか？
基準値をまたいで切り上げないようにしているためです。4.5:1 にわずかに届かない組み合わせが適合しているように見えることを防ぎます。
半透明の文字も確認できますか？
できます。「文字の不透明度」スライダーを動かすと、半透明の文字を背景に合成してからコントラスト比を計算します。
APCA の値とは何ですか？
WCAG 3 草案に含まれる指標で、どちらが文字色かによって変わる明度コントラスト（Lc）を示します。負の値は暗い背景に明るい文字を意味します。まだ草案のため、適合性の確認には通常 WCAG 2 のコントラスト比が使われます。
提案される色はどう選ばれますか？
OKLCH で明度だけを変えるので、色相や雰囲気は保たれます。明るくしても暗くしても目標に届かない場合は「明度の調整だけでは到達できません」と表示されるので、もう一方の色を調整してみてください。