コントラスト比とは
読み：こんとらすとひ英語：Contrast ratio
更新日：2026年10月31日
ひとことで
コントラスト比とは、2つの色の明るさの差を「4.5:1」のような比で表した数値で、文字の読みやすさを確かめるために使われるものです。
ひとに説明するなら
「コントラスト比は、文字と背景の明るさの差を数字にしたもの。1:1 は差がまったくない状態で、白と黒がいちばん大きい 21:1。ふつうの文字なら 4.5:1 以上あれば、多くの人にとって読みやすいとされている」
明るさの差を、数字にする
文字が読みやすいかどうかは、主に文字と背景の明るさの差で決まります。コントラスト比は、その差を数字にしたものです。
いちばん小さいのは、同じ色どうしの 1:1。いちばん大きいのは、黒と白の 21:1 です。数字が大きいほど、はっきり見分けられます。
4.54:1
- AA 本文の文字（4.5:1 以上）合格
- AA 大きな文字・図形（3:1 以上）合格
- AAA 本文の文字（7:1 以上）不合格
どのくらいあればいいのか
Web のアクセシビリティの国際的なガイドライン（WCAG）では、次の数値が目安として示されています。
| 対象 | 最低限（AA） | より高い水準（AAA） |
|---|---|---|
| ふつうの大きさの文字 | 4.5:1 以上 | 7:1 以上 |
| 大きな文字（18ポイント以上、または14ポイント以上の太字） | 3:1 以上 | 4.5:1 以上 |
| ボタンの枠や図のように、見分ける必要がある文字以外の部分 | 3:1 以上 | — |
計算のしかた
コントラスト比は、2つの色の「相対輝度」から計算します。相対輝度は、赤・緑・青の値を、人の目の感じ方に合わせて重みをつけて足し合わせた、0（黒）〜1（白）の明るさです。緑がいちばん明るく、青がいちばん暗く感じられるので、緑の重みが大きくなっています。
明るいほうの相対輝度を L1、暗いほうを L2 として、（L1 ＋ 0.05）÷（L2 ＋ 0.05）で求めます。
ぎりぎりの数字に注意
白い背景に灰色の文字を置くとき、#767676 なら 4.54:1 で、ふつうの文字の基準 4.5:1 を満たします。ところが、ほんの少し明るい #777777 にすると 4.48:1 となり、基準を下回ります。見た目ではほとんど区別がつかない差です。
表示を四捨五入した数字にも注意が必要です。白い背景の #959595 は、小数第2位で丸めると 3.00:1 に見えますが、実際の値は 2.995…で、3:1 には届いていません。判定は、丸める前の値でします。
よくある勘違い
勘違い色が違えば、文字は読める
ほんとうは色みが違っても、明るさが近いと読みにくくなります。鮮やかな赤と緑でも、コントラスト比は 2.91:1 しかありません。
勘違い基準を満たしていれば、誰にとっても読みやすい
ほんとうは基準は最低限の目安です。文字の太さや大きさ、まわりの色によっても読みやすさは変わります。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットは、暗い色から明るい色の順に並んでいます。文字と背景の組み合わせを探すときは、離れた位置にある色どうしを組み合わせると、コントラスト比を確保しやすくなります。
パレットについている「high-contrast」の印は、いちばん暗い色といちばん明るい色のコントラスト比が大きいパレット、「low-contrast」は小さいパレットです。どちらも、この記事と同じ WCAG の式で計算しています。
参考になるパレット
クイズ
白い背景のふつうの文字で、WCAG の最低限の基準を満たすのは？
#767676（4.54:1）
正解です。答えは「#767676（4.54:1）」。4.5:1 以上が必要です。#777777 は、わずかに届きません。
#777777（4.48:1）
ちがいます。答えは「#767676（4.54:1）」。4.5:1 以上が必要です。#777777 は、わずかに届きません。
どちらも満たす
ちがいます。答えは「#767676（4.54:1）」。4.5:1 以上が必要です。#777777 は、わずかに届きません。
コントラスト比がいちばん大きい組み合わせは？
黒と白
正解です。答えは「黒と白」。黒と白の 21:1 が最大です。
赤と緑
ちがいます。答えは「黒と白」。黒と白の 21:1 が最大です。
黄と白
ちがいます。答えは「黒と白」。黒と白の 21:1 が最大です。
3.00:1 と表示された値が 2.995 だったとき、3:1 の基準は？
満たす
ちがいます。答えは「満たさない」。判定は丸める前の値でします。2.995 は 3 に届いていません。
満たさない
正解です。答えは「満たさない」。判定は丸める前の値でします。2.995 は 3 に届いていません。
四捨五入すれば満たす
ちがいます。答えは「満たさない」。判定は丸める前の値でします。2.995 は 3 に届いていません。
よくある質問
コントラスト比とは何ですか？
2つの色の明るさの差を、4.5:1 のような比で表した数値です。文字の読みやすさを確かめるのに使います。
コントラスト比はどのくらいあればいいですか？
WCAG では、ふつうの文字で 4.5:1 以上、大きな文字で 3:1 以上が最低限の目安です。
コントラスト比の最大値はいくつですか？
黒と白の組み合わせの 21:1 です。最小は同じ色どうしの 1:1 です。
コントラスト比はどうやって計算しますか？
2つの色の相対輝度を求め、明るいほうを L1、暗いほうを L2 として、（L1＋0.05）÷（L2＋0.05）で計算します。
大きな文字とは、どのくらいの大きさですか？
WCAG では、18ポイント以上、または14ポイント以上の太字です。