コントラスト比とは｜WCAGのAA・AAA基準と「読める配色」の考え方
公開日：2026年7月13日 対象ツール：カラーコントラスト比チェッカー（WCAG）
文字色と背景色の「コントラスト比」は、両者の明るさ（相対輝度）の差を 1:1〜21:1 の範囲で表した数値です。同じ色どうしなら1:1、白と黒の組み合わせで最大の21:1。数字が大きいほど明暗の差が大きく、文字の輪郭がくっきりして読みやすくなります。ポイントは、これが色相（赤・青など）ではなく明るさの差だという点です。鮮やかな赤と鮮やかな緑のように「違う色」に見えても、明るさが近ければコントラスト比は低く、読みづらい配色になり得ます。
WCAGの基準はなぜその値なのか
Webアクセシビリティの指針 WCAG は、達成すべき下限を次のように定めています。
- 通常テキスト：AA は 4.5:1 以上、AAA は 7:1 以上
- 大きい文字：AA は 3:1 以上、AAA は 4.5:1 以上
4.5:1 という数値は、視力0.5程度（一般的なロービジョンの目安）の人でも本文を読めることを想定したライン、7:1 はさらに低い視力や加齢による見えづらさも考慮した水準です。AA は「まず満たすべき最低基準」、AAA は「余裕をもたせた理想値」と捉えると使い分けやすくなります。
文字サイズと太さで基準が変わる
同じ配色でも、文字が大きく太いほど輪郭を追いやすいため、基準はゆるくなります。WCAG ではおよそ18pt（約24px）以上、または太字で14pt（約18.66px）以上を「大きい文字」とし、通常テキストより低い比率でも合格とします。裏を返すと、細いフォントや小さなキャプション、薄いウェイトの文字は数値以上に読みにくくなりがちで、基準ぎりぎりでは不十分なことがあります。見出しはクリアしても本文が落ちる、という判定の分かれ方はこのためです。
「基準を満たす」だけでは足りない場面
コントラスト比は明るさの差だけを見た指標なので、次のような条件では数値が合格でも実際には見づらくなります。
- 色覚多様性：赤と緑など特定の色の区別が難しい人には、色相の違いだけの区別は伝わりません。明るさの差か、記号・下線・ラベルなど色以外の手がかりを併用します。
- 加齢・屋外：高齢になると水晶体が黄ばみ、青系や淡い色の判別が落ちます。スマホを屋外の強い光の下で見る場面では、画面が白っぽくなりコントラストが実質的に下がります。室内でちょうど良い配色が、日なたでは読めないことがあります。
- 薄いグレー文字：白背景に #999999 のグレー文字はおしゃれに見えますが、コントラスト比は約2.85:1で通常テキストAAに届きません。#767676 まで濃くすると約4.5:1で境目に乗ります。
文字以外のコントラストも忘れずに
見落としがちなのが、文字ではない要素のコントラストです。ボタンの枠線、フォームの入力欄の境界、アイコン、グラフの色分けなどは、背景に対して 3:1 以上が目安です。「送信」ボタンが背景と馴染みすぎて押せると気づかれない、彩度の違いだけで区別したグラフが印刷やモノクロで判別できない、といった失敗はここに当てはまります。彩度や色相だけに頼らず、明るさの差と形・ラベルで区別を担保するのが安全です。
このツールでの確認方法
前景色（文字色）と背景色を、カラーピッカーまたはHEX（#RRGGBB／3桁短縮も可）で入力するだけです。コントラスト比と、通常テキストAA・AAA／大きい文字AA・AAAの4区分の合否がその場で表示され、実際の配色プレビューで見え方も確認できます。前景色と背景色を入れ替えても比率は同じですが、プレビューの印象は比較できます。計算はすべてブラウザ内で完結し、入力した色は外部に送信されません。まずは本文でAA（4.5:1）を確実に満たし、余裕があればAAA（7:1）を目指してみてください。