薄い灰色の文字は画面に静かになじみますが、背景との明暗差が小さいと、読むための手掛かりも弱くなります。では、どの程度の差があればよいのでしょうか。Webのアクセシビリティ指針であるWCAGは、文字と背景の組合せを「コントラスト比」という数値で確かめる方法を定めています。
ここではW3CのWCAG 2.2、2024年12月12日勧告版の達成基準1.4.3「コントラスト（最低限）」を中心に、数値の成り立ちと配色を見直す手順を整理します。見た目がよく似た二つの灰色が、基準の境界で違う判定になる例から見ていきます。［1］
簡単にまとめると？
- WCAG 2.2の達成基準1.4.3では、通常の文字は4.5:1以上、大きな文字は条件を満たす場合に3:1以上のコントラスト比が必要です。
- 比率は文字色と背景色の相対輝度から計算し、基準との比較前には丸めません。同じ文字色でも、背景を替えると結果が変わります。
- 比率を満たすことと、実際に読みやすいことは同じではありません。文字の大きさ・太さ・表示状態も一緒に確認します。
4.5:1は、文字と背景の組合せに対する基準
達成基準1.4.3はレベルAAに位置付けられ、原則として文字と文字画像に4.5:1以上を求めます。大きな文字には3:1以上という条件があります。文字を画像にしても、文章として読ませるためのものなら、この確認から外れるわけではありません。［1］
ここでいう比率は、「この灰色なら常に使える」という色単体の評価ではありません。白い背景で十分な差があっても、薄い灰色の背景へ移せば差は縮まります。本文、カード、入力欄など、実際に接する背景との組合せを確認する必要があります。
同じ1.4.3には、操作できない状態の部品に含まれる文字、純粋な装飾、ほかの視覚情報を含む写真に偶然写った文字、ロゴやブランド名の一部などの例外があります。ただし「ブランドで決めた色だから」という理由で、通常の説明文まで例外になるわけではありません。入力欄のプレースホルダーや、ホバー・キーボードフォーカス時に表示する文字も対象です。［1、2］
相対輝度は、RGBの数字をそのまま平均しない
コントラスト比の計算には、色を明暗の量へ置き換える「相対輝度」を使います。最も暗い黒を0、最も明るい白を1とする比較用の値です。画面から出る光を実測した値ではなく、ここで扱う例ではsRGBの色指定から求めます。色相が違うかどうかより、文字と背景の明暗差に着目する仕組みです。［1、2］
Webでよく使う#777777のような色は、赤・緑・青をそれぞれ0〜255の8ビット値で表しています。ただし、その値は光の量に対して直線的に増える尺度ではありません。各成分を光の量に対応する値へ変換してから、重みを付けて合計します。緑の係数は赤や青より大きく、単純なRGBの平均とは異なります。［1］
- 各成分を0〜1へ。赤・緑・青それぞれの8ビット値を255で割り、その値を
cとします。 - 光の量に対応する値へ変換。
c ≤ 0.04045ならc / 12.92、それより大きければ((c + 0.055) / 1.055)2.4とします。 - 相対輝度Lを計算。変換後の赤・緑・青をR・G・Bとして、
L = 0.2126R + 0.7152G + 0.0722Bを求めます。
次に、文字と背景のうち明るい方の相対輝度をL1、暗い方をL2とし、コントラスト比 = (L1 + 0.05) / (L2 + 0.05)と計算します。白と黒なら(1 + 0.05) / (0 + 0.05) = 21で21:1、同じ色同士なら1:1です。暗い背景に明るい文字を置く場合も、明るい方を分子へ置く計算は変わりません。［1］
4.48を「4.5」と表示しても、基準は満たさない
白背景の#777777を計算してみます。16進数の77は10進数で119なので、各成分は119 / 255、約0.4667です。上の変換を行うと相対輝度は約0.184475。白の相対輝度1と組み合わせた比率は、約4.478089:1となります。
この値は通常文字の4.5:1をわずかに下回ります。表示を小数1桁へ丸めれば「4.5」に見えますが、合格にはできません。W3Cの解説は、4.499:1も4.5:1の条件を満たさない例として挙げ、丸める前の計算値で比較するよう説明しています。［2］
一方、少し暗い#767676は各成分が118で、白背景との比率は約4.542225:1です。こちらは4.5:1以上になります。わずかな色指定の差でも、しきい値のどちら側にあるかは変わります。「目で違いが分からないほど近い」ことは、同じ判定にする理由にはなりません。
以下は不透明な単色のsRGBを前提に計算した例です。表の比率は読みやすさのため小数2桁にしていますが、判定には丸める前の値を使っています。画面や読者による見え方の実測ではありません。
| 文字色 | 背景色 | 比率 | 通常文字の4.5:1 |
|---|---|---|---|
#767676 |
#FFFFFF |
4.54:1 | 満たす |
#777777 |
#FFFFFF |
4.48:1 | 満たさない |
#767676 |
#F0F0F0 |
3.99:1 | 満たさない |
#666666 |
#F0F0F0 |
5.04:1 | 満たす |
3行目では文字色を変えず、背景だけを白から薄い灰色にしています。それだけで比率は約3.99:1へ下がります。そこで4行目のように文字を暗くすると、薄い灰色の背景でも約5.04:1を確保できます。背景を残して文字を変えるのか、文字を残して背景を変えるのか。比率を見ると、配色のどちらを調整するかを具体的に考えられます。
「大きな文字なら3:1」の前に、サイズ条件を見る
大きな文字では、字の形をとらえる手掛かりが増えるため、最低限の比率が緩和されます。ただし、見出しという名前や太字の指定だけで、すべて3:1へ切り替わるわけではありません。［2］
WCAGの定義は、18ポイント以上、または14ポイント以上の太字、あるいは中国語・日本語・韓国語のフォントでそれらに相当する大きさを挙げています。注記では、英字の18・14ポイントが大きな印刷文字のサイズをもとにしていること、CJKの相当サイズも各言語で使われる大きな印刷文字のサイズに基づくことを説明しています。［1］
そのため、日本語の見出しを英字の数値やピクセル換算だけで自動的に「大きな文字」と決めるのは避けたいところです。使う書体と実際の表示サイズを確認し、該当する根拠が曖昧なら、通常文字と同じ4.5:1以上で設計する方が判断を保守的にできます。利用者があとから拡大したサイズを、配信時点の大きな文字の判定へ持ち込むこともできません。
また、3:1は「あらゆる薄い文字を許す値」ではありません。例えば白背景の#999999は約2.85:1なので、大きな文字の3:1にも届きません。文字を大きくする案と配色を変える案は、それぞれ条件を確かめる必要があります。
比率の確認と、実際の読みやすさの確認をつなぐ
配色を点検するときは、まず通常表示で隣り合う文字色と背景色を特定します。明るいテーマと暗いテーマ、通常時とホバー時など、実装が切り替える組合せも別々に確認します。背景画像やグラデーションがある場所へ、単色背景で通った比率をそのまま持ち込むことはできません。文字が重なる位置に応じて、十分な明暗差が保たれるかを見る必要があります。［1、2］
文字の縁をなめらかにするアンチエイリアスでは、途中の色の画素が生まれます。1.4.3の評価では、その縁の画素をスクリーンショットから一つ拾うのではなく、ブラウザーやHTML・CSSから得られる前景色と背景色を参照します。一方、細い書体では、指定色の比率が基準を満たしていても実際には薄く見えることがあります。W3Cの解説は、より太い線を持つ書体を選ぶことや、最低限より余裕のある比率を目指すことも勧めています。［2］
数値を確かめたあとには、実際の文字サイズ、太さ、画面幅で文章を読んでみる工程が残ります。比率は配色の問題を共有できる物差しですが、読みやすさのすべてを表す点数ではありません。1.4.3を満たしたことだけで、ページ全体がWCAGのレベルAAに適合したとも言えません。文字以外の部品や図のコントラストは、別の達成基準1.4.11などの確認対象です。［1、2］
参考資料
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 — 2024年12月12日勧告。達成基準1.4.3、5.1、5.2.1、用語定義「contrast ratio」「large scale」「relative luminance」。規範本文と情報提供の注記・例を区別して参照。Copyright © 2020–2024 World Wide Web Consortium.
- W3C WAI, Understanding Success Criterion 1.4.3: Contrast (Minimum) — 規範とは別の解説資料。保存版の更新表示は2026年9月6日。非丸め判定、文字サイズ、アンチエイリアス、例外と適用対象を参照。Copyright © 2026 World Wide Web Consortium.