コントラスト比とは｜WCAGのAA・AAA基準と「読める配色」の考え方
公開日：2026年7月13日 更新日：2026年9月2日 運営：シルギア（Analyzegear, Inc.） 対象ツール：カラーコントラスト比チェッカー（WCAG）
文字色と背景色の「コントラスト比」は、両者の明るさ（相対輝度）の差を 1:1〜21:1 の範囲で表した数値です。同じ色どうしなら1:1、白と黒の組み合わせで最大の21:1になります。数字が大きいほど明暗の差が大きく、文字の輪郭がくっきりして読みやすくなります。このページでは、値の意味・計算のしくみ・WCAGのAA/AAA基準の根拠を整理し、数値を満たすだけで終わらせないための勘どころまで、実際に計算した数値例を交えて解説します。
コントラスト比を決めるのは「明るさの差」
まず押さえたいのは、コントラスト比が色相（赤・青といった色み）ではなく明るさの差を見た指標だという点です。鮮やかな赤と鮮やかな緑のように「まったく違う色」に見えても、明るさが近ければ比率は低く、読みづらい配色になり得ます。たとえば純赤（#FF0000）と純緑（#00FF00）のコントラスト比は約2.91:1しかなく、通常テキストの基準に届きません。色を変えたつもりでも読みやすさは上がっていない、という典型例です。区別を確実にしたいときは、色みではなく明暗を離すことが基本になります。
コントラスト比はどう計算されるか
本ツールはWCAGの定義どおりに計算します。手順は2段階です。
- 各色の相対輝度 L を求める。L = 0.2126×R + 0.7152×G + 0.0722×B。ただし各チャンネルは sRGB値をガンマ展開した線形値で、cs（= 値÷255）が0.03928以下なら cs/12.92、それ以外は ((cs+0.055)/1.055) の2.4乗を使います。
- コントラスト比 = (明るい方の L + 0.05) ÷ (暗い方の L + 0.05) を計算する。
係数のうち緑（0.7152）が大きいのは、人の目が緑の明るさを最も強く感じるためです。この式により、白と黒は最大の21:1、白と #767676 はちょうど約4.54:1になります。前景色と背景色を入れ替えても、明るい方と暗い方の関係は変わらないので比率は同じです。
WCAGのAA・AAA基準はなぜその値なのか
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は「余裕をもたせた理想値」と捉えると使い分けやすくなります。本ツールは「通常×AA(4.5)」「通常×AAA(7.0)」「大×AA(3.0)」「大×AAA(4.5)」の4区分をそれぞれ判定します。
文字サイズと太さで基準が変わる
同じ配色でも、文字が大きく太いほど輪郭を追いやすいため、基準はゆるくなります。WCAGではおよそ18pt（約24px）以上、または太字で14pt（約18.66px）以上を「大きい文字」とし、通常テキストより低い比率でも合格とします。裏を返すと、細いフォントや小さなキャプション、薄いウェイトの文字は数値以上に読みにくくなりがちで、基準ぎりぎりでは不十分なことがあります。見出しはクリアしても本文が落ちる、という判定の分かれ方はこのために起こります。
具体例で検算してみる
実際の配色をいくつか計算してみると、基準の意味が体感しやすくなります。いずれも本ツールと同じ式で求めた値です。
- 白背景 × #999999 のグレー文字：約2.85:1。おしゃれに見えますが通常AA(4.5)に届きません。#767676 まで濃くすると約4.54:1でちょうど境目に乗ります。
- 白背景 × #595959：ちょうど約7.00:1。通常AAAの境界です。これより濃ければAAAまで合格します。
- 白文字 × 緑背景（#2B8A3E）：約4.37:1。合格するのは大きい文字のAA(3.0)だけで、通常AA(4.5)にはわずかに届きません。見出しには使えても本文では基準割れ、という微妙な配色の代表例です。
- 白文字 × 青背景（#3B5BDB）：約5.67:1。通常AAを満たし、本文でも安心して使えます。
このように、4.37と4.54のわずかな差が合否を分けます。目視では「どちらも読める」と感じても判定は明確に変わるため、境界付近では必ず数値で確認するのが安全です。
数値を満たすだけでは足りない場面と使い方
コントラスト比は明るさの差だけを見た指標なので、次のような条件では数値が合格でも実際には見づらくなります。あくまで読みやすさの「目安」であり、最終的には実機での見え方を確かめてください。
- 色覚多様性：赤と緑などの区別が難しい人には、色相の違いだけの区別は伝わりません。明暗の差か、記号・下線・ラベルなど色以外の手がかりを併用します。
- 加齢・屋外：高齢になると青系や淡い色の判別が落ち、屋外の強い光の下では画面が白っぽくなって実質的なコントラストが下がります。室内でちょうど良い配色が日なたでは読めないこともあります。
- 文字以外の要素：ボタンの枠線・入力欄の境界・アイコン・グラフの色分けは、背景に対して 3:1 以上が目安です。彩度だけで区別すると印刷やモノクロで判別できなくなります。
使い方は簡単です。前景色（文字色）と背景色を、カラーピッカーまたはHEX（#RRGGBB／3桁短縮も可）で入力すると、コントラスト比と上記4区分の合否がその場で表示され、配色プレビューで見え方も確認できます。プリセット配色ボタンでよく使う組み合わせを1タップで試すこともできます。計算はすべてブラウザ内で完結し、入力した色は外部に送信されません。まずは本文でAA（4.5:1）を確実に満たし、余裕があればAAA（7:1）を目指してみてください。