コントラスト比の基準は 4.5:1。白地のグレー文字は #767676 まで合格です
コントラスト比とは、文字色と背景色の明るさの差を 1:1 から 21:1 までの比で表した値です。同じ色どうしは 1:1、黒と白は 21:1 になります。ウェブアクセシビリティの国際基準である WCAG 2.2 は、本文のような通常サイズの文字に最低 4.5:1(AA レベル)を求めています。白い背景にグレーの文字を載せるなら、4.54:1 で合格する最も明るいグレーは #767676 です。ひとつ明るい #777777 は 4.47:1 で基準に届きません。コントラスト比は 2 色の順序に関係しないため、#767676 の背景に白い文字を載せても同じ 4.54:1 になります。
上の検査ツールに文字色と背景色を入力すると、コントラスト比に加えて、通常の文字・大きな文字・アイコンの各基準を満たすかどうかがすぐに表示されます。文字サイズと太さを入力すれば、その文字にどの基準が当てはまるかを自動で選び、基準に届かない場合は色相をそのままに明度だけを動かして、合格する最も近い色を探します。下のプレビューでは、同じ 2 色が色覚の異なる人にどう見えるか、そのときのコントラスト比も確認できます。
コントラスト比を確認したい場面
W3C の解説文書(Understanding SC 1.4.3)は、この基準の目的を、中程度の低視力やコントラスト感度の低下がある人が、コントラストを高める支援技術なしでも文字を読めるようにすることだと説明しています。4.5:1 という比は、中程度の低視力、先天性または後天性の色覚の違い、そして加齢に伴うコントラスト感度の低下が重なっても読めるように設定された値です。視力が良い人には少しかすれて見える程度でも、こうした人には読めない場合があります。実際に計算が必要になるのは、たとえば次のような場面です。
- ブランドカラーをボタンやリンクに使うとき: 画面では鮮やかに見える青・赤・緑も、白い背景や白い文字とのコントラストが低いことがよくあります。白地の #3B82F6 のリンクは 3.67:1、#EF4444 のボタン上の白い文字は 3.76:1 で、どちらも本文の基準に届きません。
- 補足文や注釈を薄いグレーにするとき: 入力欄のヒントや日付・出典などの補助的な文字によく使われる #9CA3AF は、白地で 2.53:1 です。目立たなくしたつもりが、読めなくなってしまう典型的な例です。
- ダークモードの色を決めるとき: 暗い背景では同じグレーでもコントラストがまったく違うため、明るい画面とは別に計算する必要があります。
- デザインシステムのカラートークンを作るとき: 文字色と背景色の組を最初から数値で決めておけば、画面を作るたびに検査し直さずに済みます。
- アクセシビリティの確認や試験の準備をするとき: ウェブアクセシビリティの試験では、コントラスト比が代表的な確認項目のひとつです。
コントラスト比の計算方法
WCAG 2.2 は、相対輝度という値を使ってコントラスト比を計算します。まず R・G・B の各値(0〜255)を 255 で割ります。その値が 0.04045 以下なら 12.92 で割り、それより大きければ ((値 + 0.055) ÷ 1.055)2.4 で線形の値を求めます。相対輝度は L = 0.2126 × R + 0.7152 × G + 0.0722 × B で、コントラスト比は (明るい色の L + 0.05) ÷ (暗い色の L + 0.05) です。緑の重みがいちばん大きいのは、人の目が緑の光の明るさにもっとも敏感だからです。
2021 年 5 月より前の定義では、しきい値が 0.04045 ではなく 0.03928 と書かれていました。WCAG 2.2 は、この違いが計算に実質的な影響を与えないと説明しています。実際、8 ビットの値のなかに 2 つのしきい値の間に入るものはありません(10/255 = 0.0392、11/255 = 0.0431)。次は、白い背景に #3B82F6 を載せたときの計算過程です。
| 手順 | R | G | B |
|---|---|---|---|
| 8 ビット値 | 59 | 130 | 246 |
| ÷ 255 | 0.2314 | 0.5098 | 0.9647 |
| 線形値 | 0.0437 | 0.2232 | 0.9216 |
| 重み | 0.2126 | 0.7152 | 0.0722 |
相対輝度は 0.2126 × 0.0437 + 0.7152 × 0.2232 + 0.0722 × 0.9216 = 0.2355 です。白の相対輝度は 1 なので、コントラスト比は (1 + 0.05) ÷ (0.2355 + 0.05) = 3.6779… になります。W3C の解説文書は、計算した値を丸めないと明記し、4.499:1 も 4.5:1 に届かないという例を挙げています。そのためこのツールは、小数第 2 位で切り捨てた 3.67:1 を表示し、判定も画面に表示されたその値で行います。
WCAG 2.2 のコントラスト基準の早見表
| 対象 | AA | AAA | 達成基準 |
|---|---|---|---|
| 通常の文字(本文・ボタンの文字など) | 4.5:1 | 7:1 | 1.4.3・1.4.6 |
| 大きな文字(18pt 以上、または 14pt 以上の太字) | 3:1 | 4.5:1 | 1.4.3・1.4.6 |
| アイコン・入力欄の枠線・グラフなどの非テキスト要素 | 3:1 | — | 1.4.11 |
文字の基準には例外があります。非アクティブなユーザーインタフェース コンポーネントの文字、純粋な装飾、誰も視覚的に確認できない文字、ほかの視覚的な内容が重要な写真の一部になっている文字には、コントラストの要件がありません。ロゴやブランド名の一部である文字も要件の対象外です。アイコンや枠線に関する 1.4.11 は隣り合う色との比を見る基準で、非アクティブなコンポーネントと、ブラウザの既定の見た目をそのまま使った要素は例外です。
AA は多くの法令やガイドラインが求めるレベルで、AAA はさらに読みやすい画面を目指すレベルです。WCAG 2.2 も、コンテンツによっては AAA をすべて満たせないことがあるため、サイト全体に AAA を一般的な方針として求めることは勧めないと述べています。
大きな文字は何 px から?
WCAG でいう大きな文字とは、18pt 以上、または 14pt 以上の太字です。CSS では 1pt が 4/3px なので、標準の太さなら 24px 以上、太字なら 18.67px 以上が当てはまります。W3C の解説文書は 14pt を約 18.5px と書いているため、18.5px から 18.67px の太字は境界にあたります。このツールは 1pt = 4/3px と正確に換算して判定します。文字サイズは、利用者が拡大する前の、コンテンツが提供されたときのサイズで考えます。
| 文字サイズ | pt | 太さ | 適用される基準(AA) |
|---|---|---|---|
| 12px | 9pt | 標準 | 通常の文字 4.5:1 |
| 16px | 12pt | 標準 | 通常の文字 4.5:1 |
| 18px | 13.5pt | 太字 | 通常の文字 4.5:1 |
| 19px | 14.25pt | 太字 | 大きな文字 3:1 |
| 20px | 15pt | 標準 | 通常の文字 4.5:1 |
| 24px | 18pt | 標準 | 大きな文字 3:1 |
WCAG の「サイズの大きな(テキスト)」の定義には、中国語・日本語・韓国語(CJK)のフォントについて「それと同等の文字サイズ」とする一文があります。具体的な数字は定義本文にはありません。WAIC による日本語訳には訳注が付いており、日本語の全角文字では拡大教科書普及推進会議の第一次報告に基づき、22 ポイント(約 29.3px)または 18 ポイント(24px)の太字を「同等な」サイズとみなすのが妥当だと書かれています。これは訳注であって WCAG 本文の規定ではありません。このツールは言語に関係なく 18pt・14pt 太字の基準で判定するので、日本語の文字を大きな文字として扱うかどうかは、この訳注も参考に判断してください。迷う場合は、大きな文字でも 4.5:1 以上に合わせておくのが安全です。
WCAG は、線がきわめて細いフォントや、字形が見慣れにくい特徴的なフォントは、コントラストが低いほど読みにくいという注記も付けています。画数の多い漢字を細いウェイトで表示する場合は、大きな文字でも余裕のあるコントラストを選んでください。
よく使う色の白地・黒地でのコントラスト
下の表の「白地」の値は、その色の背景に白い文字を載せたときの値と同じです。判定は通常の文字の AA(4.5:1)基準です。
| 色 | 白地 | 黒地 | 通常の文字 AA |
|---|---|---|---|
| #999999 | 2.84:1 | 7.37:1 | 黒地のみ合格 |
| #888888 | 3.54:1 | 5.92:1 | 黒地のみ合格 |
| #777777 | 4.47:1 | 4.68:1 | 黒地のみ合格 |
| #767676 | 4.54:1 | 4.62:1 | 両方合格 |
| #666666 | 5.74:1 | 3.65:1 | 白地のみ合格 |
| #595959 | 7.00:1 | 2.99:1 | 白地のみ合格(AAA も合格) |
| #3B82F6 | 3.67:1 | 5.70:1 | 黒地のみ合格 |
| #2563EB | 5.16:1 | 4.06:1 | 白地のみ合格 |
| #EF4444 | 3.76:1 | 5.58:1 | 黒地のみ合格 |
| #DC2626 | 4.82:1 | 4.34:1 | 白地のみ合格 |
| #16A34A | 3.29:1 | 6.37:1 | 黒地のみ合格 |
| #15803D | 5.01:1 | 4.18:1 | 白地のみ合格 |
| #F59E0B | 2.14:1 | 9.77:1 | 黒地のみ合格 |
| #B45309 | 5.02:1 | 4.18:1 | 白地のみ合格 |
表のとおり、#767676 付近の中間のグレーは、白い文字でも黒い文字でも 4.5:1 をわずかに上回ります。計算すると、どんな背景でも白と黒の文字のどちらかは最低 4.58:1 になるため、文字を白か黒に変えれば AA は必ず満たせます。反対に、黄色やオレンジのような明るい色は、白い背景の上の文字には使いにくく、同じ色相で明度を大きく下げた色(#B45309 など)を使う必要があります。
基準に届かないときの色の直し方
検査ツールの「明度で調整」は、選んだ側の色を OKLCH 色空間に変換し、色相角はそのままに明度だけを 0.001 ずつ動かして、基準を最初に超える色を暗い側と明るい側で 1 つずつ探します。そのうち元の明度からの移動が小さいほうを提案し、8 ビットの HEX に丸めたあとのコントラスト比で再確認します。明度を動かす途中で画面に表示できない色になった場合は、CSS Color 4 の色域マッピングと同じように彩度だけを下げます。そのため、提案される色は元の色と同じ系統に見えます。
| 状況 | 現在のコントラスト比 | AA に合わせる | AAA に合わせる |
|---|---|---|---|
| 白地の青いリンク #3B82F6(文字色を変更) | 3.67:1 | #2B72E5・4.52:1 | #0352C2・7.02:1 |
| #EF4444 のボタン上の白い文字(背景色を変更) | 3.76:1 | #DF3337・4.50:1 | #B5001A・7.04:1 |
| #EF4444 のボタン上の白い文字(文字色を変更) | 3.76:1 | #1C1C1C・4.52:1 | 不可能 |
| ダークモード #111827 上の #9CA3AF(文字色を変更) | 6.98:1 | すでに合格 | #9DA4B0・7.07:1 |
#EF4444 のボタンのように、背景の相対輝度が 0.10 から 0.30 の間にあると、白い文字でも黒い文字でも 7:1 に届かないため、どの文字色でも AAA を満たせません。この場合は背景色を変える必要があり、検査ツールで「背景色」を選ぶと、ボタンの色をどこまで濃くすればよいかがすぐに分かります。ブランドカラーを守りたいときは、その色を大きな文字(24px 以上、または太字の 18.67px 以上)だけに使い、本文には濃い色を使う方法もあります。
半透明の文字は混ざった色で計算します
CSS の rgba() や 8 桁の HEX で指定した半透明の文字は、背景と混ざって見えます。混ざった色はチャンネルごとに「文字 × 不透明度 + 背景 × (1 − 不透明度)」で求め、画面と同じ 8 ビットの値に丸めてからコントラスト比を計算します。白い背景に黒い文字を載せた場合、不透明度によってコントラスト比は次のように変わります。
| 文字色 | 不透明度 | 見える色 | 白地でのコントラスト比 |
|---|---|---|---|
| #000000DE | 87% | #212121 | 16.10:1 |
| #00000099 | 60% | #666666 | 5.74:1 |
| #0000008A | 54% | #757575 | 4.60:1 |
| #00000061 | 38% | #9E9E9E | 2.67:1 |
半透明の文字は背景が変わると見える色も変わります。同じ文字が置かれる背景ごとに確認してください。グラデーションや写真の上の文字は、文字の裏でコントラストがいちばん低くなる地点の色を背景色として入力して確認すると安全です。
色覚の違いがあるときのコントラスト
コントラスト比の計算式は、一般的な色覚を前提にした重みを使っています。1 型2色覚(P 型)の人には赤が暗く見えるため、黒い背景の赤い文字は、計算値よりコントラストが低く感じられることがあります。検査ツールのプレビューは、Chrome の開発者ツールにある視覚障害のエミュレーションと同じ Machado・Oliveira・Fernandes(2009)のモデルで、最も強い程度の色覚の違いを再現し、変化した 2 色のコントラスト比を計算し直します。
| 文字 / 背景 | 元の色 | 1 型 | 2 型 | 3 型 |
|---|---|---|---|---|
| #E53935 / #000000 | 4.96:1 | 3.49:1 | 5.95:1 | 5.20:1 |
| #3B82F6 / #FFFFFF | 3.67:1 | 3.24:1 | 4.00:1 | 3.22:1 |
| #FFFFFF / #EF4444 | 3.76:1 | 5.25:1 | 3.17:1 | 3.93:1 |
| #E53935 / #43A047 | 1.27:1 | 1.92:1 | 1.01:1 | 1.20:1 |
最後の行の赤と緑の組み合わせは、元から 1.27:1 しかないため文字には使えず、2 型2色覚(D 型)では 1.01:1 とほぼ同じ色になります。このように色だけで区別する情報(赤はエラー、緑は正常など)は、コントラスト比とは別に WCAG の達成基準 1.4.1 が避けるよう求めている方法なので、文字や模様を併用してください。シミュレーションの値は理解を助けるための近似で、基準の判定は元の色のコントラスト比で行います。自分の色覚を確かめたいときは、色覚テストも併せて使ってみてください。
日本のウェブアクセシビリティ規格と法律
日本のウェブアクセシビリティの規格は JIS X 8341-3:2016 です。ウェブアクセシビリティ基盤委員会(WAIC)の解説によると、この規格は ISO/IEC 40500:2012 の一致規格で、規格本文は WCAG 2.0 と同じ内容です。達成基準の番号も WCAG 2.0 と同じで、レベル A・AA・AAA の 3 段階があります(解説は 2016 年 4 月 7 日公開)。コントラストの基準は達成基準 1.4.3「コントラスト (最低限)」(AA)と 1.4.6「コントラスト (高度)」(AAA)で、本文に書かれている数値は WCAG 2.2 と同じ 4.5:1・3:1・7:1 です。ただし JIS X 8341-3:2016 が参照する WCAG は 2.0 なので、非テキストのコントラスト(1.4.11)は 2.1 で加わった基準であり、JIS の本文には含まれません。このツールの 1.4.11 の判定は、WCAG 2.2 に基づく追加の確認として使ってください。なお WAIC は 2026 年 9 月の解説で、ISO/IEC 40500 の改訂に合わせて JIS X 8341-3 も改正される予定であり、達成基準は 2016 年版の 61 個から 26 個増える見込みだと説明しています。
法律では、「障害を理由とする差別の解消の推進に関する法律」(障害者差別解消法)が令和 3 年(2021 年)5 月に改正され、令和 6 年(2024 年)4 月 1 日に施行されました。内閣府はこの改正により、事業者にも合理的配慮の提供が義務化されたと案内しています。同法第 8 条第 2 項は、障害のある人から社会的障壁の除去を必要としているという意思の表明があり、実施に伴う負担が過重でないときに、必要かつ合理的な配慮をしなければならないと定めています。一方、第 5 条は、あらかじめ施設の構造の改善や設備の整備、関係職員への研修といった「環境の整備」に努めなければならないとする努力義務です。
この法律の本文には、ウェブサイトやアクセシビリティ、JIS の語は出てきません。つまり、法律が JIS X 8341-3 や WCAG の特定のレベルへの適合を直接定めているわけではありません。ウェブサイトの色のコントラストは、こうした合理的配慮や環境の整備を考えるときの具体的な目安として、JIS X 8341-3:2016(WCAG 2.0 と同じ内容)の AA を参照するのが現実的です。
よくある間違い
- 四捨五入して合格とみなす: #777777 は白地で 4.478…:1 です。丸めると 4.5 に見えますが、基準には届いていません。
- 18px の太字を大きな文字とみなす: 14pt は 18.67px なので、18px の太字には通常の文字の基準(4.5:1)が当てはまります。
- 補足文を例外とみなす: WCAG の例外は、非アクティブなコンポーネント、装飾、見えない文字、写真の中の文字、ロゴです。使える状態の入力欄のヒントや補助的な文字は、この一覧に含まれません。
- ホバー時の色を忘れる: ホバー・フォーカス・選択状態の色も、それぞれ計算する必要があります。
- 明るい画面だけを確認する: ダークモードは背景が違い、コントラスト比がまったく変わるので、別に計算してください。
- アイコンだけのボタンを見落とす: 文字のないアイコンボタンや入力欄の枠線には、1.4.11 により 3:1 が必要です。
限界
- WCAG 2.2 のコントラストの式は、文字サイズを通常と大きな文字の 2 つにしか分けず、フォントの線の太さを反映しません。同じ 4.5:1 でも、細いフォントのほうが読みにくくなります。
- WCAG 3.0 はまだ作業草案の段階で、新しいコントラストの計算方法は確定していません。このツールは現行の勧告である WCAG 2.2 の式を使います。
- 画面の明るさ、周囲の光、モニターごとの色の違いは反映しません。計算は sRGB の色を前提にしています。
- 背景には 1 色しか入力できません。グラデーションや写真の背景は、最も不利な地点の色で別に確認してください。
- 色覚の違いのプレビューはモデルに基づく近似で、実際の見え方には個人差があります。
- コントラストはアクセシビリティの項目のひとつにすぎません。キーボード操作、代替テキスト、文字の拡大など、ほかの項目は別に確認する必要があります。
- 入力した色はブラウザ内だけで計算し、サーバーには送信しません。
基準日: 2026 年 10 月 20 日。WCAG 2.2(W3C 勧告、2024 年 12 月 12 日版)、JIS X 8341-3:2016 に関する WAIC の解説(2016 年 4 月版)、障害者差別解消法(令和 3 年改正、令和 6 年 4 月 1 日施行)を基準に書いています。
出典
- 01W3C — Web Content Accessibility Guidelines (WCAG) 2.2相対輝度・コントラスト比・大きな文字の定義、達成基準 1.4.3・1.4.6・1.4.11、適合の注記(2024 年 12 月 12 日版)
- 02W3C — Understanding SC 1.4.3: Contrast (Minimum)目的と根拠(低視力・加齢によるコントラスト感度の低下)、コントラスト比を丸めない(4.499:1 は不足)、14pt・18pt ≈ 18.5px・24px
- 03W3C — Understanding SC 1.4.6: Contrast (Enhanced)AAA 7:1・大きな文字 4.5:1
- 04W3C — Understanding SC 1.4.11: Non-text Contrastユーザーインタフェース コンポーネントとグラフィックの 3:1
- 05WAIC — JIS X 8341-3:2016 と WCAG 2.0(2016 年 4 月版)ISO/IEC 40500:2012 の一致規格、規格本文は WCAG 2.0 と同じ、レベル A・AA・AAA
- 06WAIC — Web Content Accessibility Guidelines (WCAG) 2.0 日本語訳達成基準 1.4.3「コントラスト (最低限)」、「サイズの大きな (テキスト)」の定義と、日本語の全角文字に関する訳注
- 07内閣府 — 障害を理由とする差別の解消の推進令和 3 年改正、令和 6 年 4 月 1 日施行、事業者の合理的配慮の提供の義務化
- 08e-Gov 法令検索 — 障害を理由とする差別の解消の推進に関する法律第 5 条(環境の整備、努力義務)、第 8 条第 2 項(事業者による合理的配慮)
- 09Machado, Oliveira, Fernandes (2009) — A Physiologically-based Model for Simulation of Color Vision Deficiency色覚の違いのシミュレーション行列(強度 1.0)
- 10Chrome for Developers — Simulating color vision deficiencies in the Blink Renderer開発者ツールの視覚障害エミュレーションが同じモデルを使うという説明
- 11Björn Ottosson (2020) — A perceptual color space for image processingOKLab の変換式(明度で調整)
- 12W3C — CSS Color Module Level 4, 14. Gamut Mapping色域外の色は色相を保ち彩度を下げる方式
- 13WAIC — JIS X 8341-3とは何なのか？ ウェブコンテンツのアクセシビリティのために2026 年 9 月 28 日公開。JIS X 8341-3:2016 の位置づけと、ISO の改訂に伴う改正予定(達成基準 26 個追加)
よくある質問
コントラスト比 4.5:1 とはどういう意味ですか?
2 色のうち明るい色の相対輝度に 0.05 を足した値を、暗い色の相対輝度に 0.05 を足した値で割った比です。同じ色どうしは 1:1、黒と白は 21:1 になります。WCAG 2.2 は、通常サイズの文字と背景の間に最低 4.5:1(AA)を求めており、より厳しい AAA では 7:1 を求めています。
4.48:1 なら四捨五入して 4.5:1 とみなせますか?
みなせません。W3C の Understanding SC 1.4.3 は、計算した値を丸めないと明記し、4.499:1 でも 4.5:1 の基準を満たさないという例を挙げています。このツールは小数第 2 位で切り捨てた値を表示し、その値で判定します。白地の #777777 は 4.47:1 で不合格、ひとつ濃い #767676 は 4.54:1 で合格です。
大きな文字は何 px からですか?
WCAG でいう大きな文字は、18pt 以上、または 14pt 以上の太字です。CSS では 1pt が 4/3px なので、標準の太さなら 24px 以上、太字なら約 18.67px 以上が当てはまります(W3C の解説文書は約 18.5px と書いています)。16px の本文や 18px の太字には、通常の文字の基準である 4.5:1 が必要です。日本語の全角文字については、WAIC の WCAG 2.0 日本語訳に、22pt または 18pt の太字を同等とみなすのが妥当という訳注があります。
AA と AAA のどちらに合わせるべきですか?
実務では、WCAG の 3 つの適合レベル(A・AA・AAA)のうち AA を目標にすることが一般的で、JIS X 8341-3:2016 でも同じ内容の達成基準に AA があります。AAA(7:1)はより読みやすい画面のための上位のレベルです。WCAG 2.2 も、すべてのコンテンツが AAA を満たすのは難しいとして、サイト全体に AAA を一般的な方針として求めることは勧めていません。長く読まれる本文は AAA に近づけるとさらに読みやすくなります。
半透明の文字(rgba)はどう計算しますか?
半透明の文字は背景と混ざって見えるため、混ざったあとの実際の色でコントラスト比を計算します。白地に不透明度 54% の黒い文字(#0000008A)を載せると、画面には #757575 として見え、コントラスト比は 4.6:1 です。同じ文字でも背景が変われば混ざった色が変わるので、背景ごとに確認し直してください。背景そのものが半透明なら、下地と混ぜた値を背景色として入力します。
アイコンや入力欄の枠線にもコントラストの基準はありますか?
あります。WCAG 2.2 の達成基準 1.4.11(非テキストのコントラスト、AA)は、ユーザーインタフェース コンポーネントを識別するために必要な視覚情報と、内容を理解するために必要なグラフィックが、隣り合う色と 3:1 以上のコントラストを持つことを求めています。入力欄の枠線、チェックボックス、情報を伝えるアイコンが該当します。非アクティブなコンポーネントと、ブラウザの既定の見た目をそのまま使った要素は例外です。
基準を満たす色はどうやって探しますか?
「明度で調整」で、文字色と背景色のどちらを変えるかを選ぶと、色相はそのままに明度だけを動かして AA と AAA を満たす最も近い色を表示します。背景がどんな色でも、白か黒の文字のどちらかは 4.58:1 以上になるので、AA は必ず満たせます。ただし背景の相対輝度が 0.10 から 0.30 の間(例: #EF4444)だと、どの文字色でも 7:1 に届かないため、背景色を変える必要があります。
日本の基準(JIS X 8341-3)でもコントラストの数値は同じですか?
同じです。JIS X 8341-3:2016 は ISO/IEC 40500:2012 の一致規格で、規格本文は WCAG 2.0 と同じ内容だと WAIC が解説しています。達成基準 1.4.3「コントラスト (最低限)」は AA で 4.5:1、大きな文字は 3:1 です。ただし非テキストのコントラスト(1.4.11)は WCAG 2.1 で加わった基準で、WCAG 2.0 と同じ内容の JIS には含まれません。