Webサイトの配色とコントラスト比 完全ガイド｜WCAG準拠で読みやすく・アクセシブルにする方法
【ご注意】 本記事はWCAG 2.1（2018年勧告）の基準と2026年5月時点の一般的なWeb制作実務をもとにまとめています。法的要件や案件ごとの準拠レベルは発注元・所属業界により異なります。公共系・大企業案件では事前に求められる準拠レベル（A／AA／AAA）を必ず確認してください。
① 配色の良し悪しがビジネスに直接効く理由
LP・バナー・サービスサイトで「なんとなくおしゃれだけど読みにくい」配色を選んでしまうと、そもそも文章が読まれずに離脱します。文字色と背景色のコントラストが不足していると、特にスマートフォンの屋外利用や、年齢を重ねた読者・視覚に不安のある読者にとっては情報がほとんど届きません。
配色は、見栄えの問題であると同時に、「読まれるかどうか」というコンバージョン直結の要素です。さらに、ブランドカラーを統一すること自体が信頼形成につながるため、配色設計は「カッコよさ」ではなく「機能」として考える必要があります。
加えて、日本では2024年4月の改正障害者差別解消法で民間事業者にも合理的配慮の提供が義務化されました。Webアクセシビリティの確保そのものは「環境の整備」として努力義務に位置づけられる（総務省・内閣府見解）ものの、合理的配慮を実効的に提供するための基盤として重要性が年々高まっています。BtoBや公共系の案件では、WCAG準拠が発注条件に含まれるケースも増えてきました。
② WCAGとは｜世界標準のアクセシビリティ基準
WCAG（Web Content Accessibility Guidelines）は、W3Cが策定するWebコンテンツのアクセシビリティに関する国際標準です。現行の主要バージョンはWCAG 2.1で、より新しい2.2も勧告されていますが、実務ではまだ2.1ベースで語られることが多くあります。次世代のWCAG 3.0では、コントラスト評価アルゴリズムをAPCA（Advanced Perceptual Contrast Algorithm）へ置き換える方向で検討が進んでおり、人間の知覚により近い評価になる見込みです（2026年5月時点ではまだドラフト段階で、当面は2.1/2.2準拠で運用するのが安全です）。
WCAGは大きく4原則「知覚可能・操作可能・理解可能・堅牢」に分けられ、それぞれに達成基準があります。配色のコントラスト比は「知覚可能」の代表的な達成基準で、達成度に応じて次の3段階のレベルがあります。
- レベルA：最低限満たすべき基準（コントラストに関する明確な数値要件はこのレベルでは弱め）
- レベルAA：実務で広く採用されるスタンダード。本文4.5:1、大きいテキスト3:1
- レベルAAA：最も厳しい基準。本文7:1、大きいテキスト4.5:1
公共系・大企業・行政発注の案件ではレベルAA準拠が必須要件となるケースが多く、それ以外の一般的なサイトでもAAを目標にするのが妥当です。
③ コントラスト比の基準と数値（早見表）
WCAG 2.1で定められているコントラスト比の基準は次の通りです。配色を決めるときの判定基準として、まずこの表をブックマークしてください。
| 対象 | レベルAA | レベルAAA |
|---|---|---|
| 通常テキスト | 4.5:1 以上 | 7:1 以上 |
| 大きいテキスト （18pt＝約24px以上 / 14pt＝約18.67px以上の太字） | 3:1 以上 | 4.5:1 以上 |
| UIコンポーネント （ボタン枠線・入力欄など） | 3:1 以上 | 明確な追加基準なし |
| グラフィカルオブジェクト （アイコン・図表など） | 3:1 以上 | 明確な追加基準なし |
実務で押さえておきたいのは「本文は4.5:1、大きい文字とUI部品は3:1」という2つの数値です。例えば白背景（#FFFFFF）に対して、よく見かける薄いグレー文字「#999999」のコントラスト比は約2.85:1で、本文用としてはAA基準を満たしません。
④ コントラスト比の計算式（仕組みだけ知っておく）
コントラスト比は、2色の「相対輝度（relative luminance）」から計算されます。式は次の通りです。
コントラスト比 =（明るい方の相対輝度 + 0.05）÷（暗い方の相対輝度 + 0.05）
値は1:1（完全に同じ色＝見えない）から21:1（黒×白）までの範囲を取ります。相対輝度は、RGB値をsRGB色空間で線形化したうえで「0.2126×R + 0.7152×G + 0.0722×B」で算出します。緑の係数（0.7152）が突出して大きいのは、ITU-R BT.709の輝度係数を採用しているためで、M錐体の感度ピーク位置などヒトの視覚特性に基づいて導かれた重み付けです。
実務では手計算する必要はなく、カラーコードを入力するだけで判定できるツールを使えば十分です。覚えておきたいのは「白背景に薄いグレー文字＝NGになりやすい」「ブランドカラーの彩度が高い赤や黄色は白背景ではコントラスト不足になりやすい」といった傾向の感覚です。
⑤ 色覚多様性（カラーユニバーサルデザイン）への配慮
コントラスト比に加えて重要なのが、色覚多様性への配慮です。日本人男性の約5%、女性の約0.2%が何らかの色覚特性を持つとされ、男性に限れば20人に1人の比率です。BtoBサイトの読者層を考えると、無視できない数字です。
主な色覚タイプ
- P型（1型／赤色弱）：赤を感じる錐体が弱い／欠ける。赤と緑、赤と黒などが見分けにくい
- D型（2型／緑色弱）：緑を感じる錐体が弱い／欠ける。赤と緑、緑と茶などが見分けにくい（最も頻度が高い）
- T型（3型／青色弱）：青を感じる錐体が弱い／欠ける。非常に頻度は低いが存在する
避けたいNG配色の例
- 赤い文字 × 緑の背景（クリスマス配色は色覚特性者には判別困難）
- 赤と緑だけでグラフの系列を区別する（凡例を見ても見分けがつかない）
- 「赤＝エラー、緑＝OK」を色だけで表現する（アイコンやテキストの併用が必要）
- 明度の近い色同士の組み合わせ（彩度が違っても、明度が近いと判別困難になりやすい）
対応の基本は「色だけで情報を伝えない」ことです。色＋アイコン、色＋テキストラベル、色＋パターン（縞・点）など、二重に意味を持たせる設計にしておくと、色覚特性に関わらず誰でも内容を理解できます。
⑥ コントラスト不足を改善する実用テクニック
手元の配色が基準を満たしていないと分かったとき、すぐ使える改善テクニックを紹介します。
1. 文字色の明度を調整する
白背景（#FFFFFF）に対しては、#767676 がコントラスト比 4.5:1 の境界（AAギリギリ）で、これより暗い色（例：#666666、#595959 など）にすれば本文サイズでも確実にAA基準（4.5:1）を満たせます。逆に暗い背景に白文字を載せる場合は、文字色を純白（#FFFFFF）にする方が安全です。
2. 背景に白（または黒）を混ぜる
ブランドカラーが鮮やかすぎてコントラストが取れない場合、背景色を白寄せ（パステル化）することで、文字とのコントラストを稼げます。例えば鮮やかなオレンジ背景に白文字が読みにくければ、背景を薄いオレンジにして文字を濃いオレンジ／濃灰にする、という発想です。
3. 文字を大きく・太くしてコントラスト基準を緩める
通常テキストの4.5:1を満たせないが3:1は満たせる、というケースでは、その文字を「大きいテキスト」扱いにできるサイズ・太さに変更するのが現実的な救済策です。WCAGの定義では「14pt（約18.67px、安全をみるなら19px以上）の太字」または「18pt（約24px）以上の通常文字」であれば、AAの基準が3:1に緩和されます。見出しやキャッチコピーで使えるテクニックです。
4. ボタンと背景の差別化を必ず行う
ボタンの背景色とページ背景色のコントラスト比はUIコンポーネントとして3:1以上が求められます。さらにボタン上の文字色は、ボタン背景色との間で4.5:1以上を確保してください。「白背景に薄い水色のボタン＋白文字」はほぼ確実に基準を満たしません。
⑦ ブランドカラーを変えずにWCAGを通す方法
「ブランドカラーが決まっていて変更できない」という前提は、デザイン制作の現場でよく直面します。ブランドカラーそのものをコントラスト不足のまま本文文字色として使うのではなく、用途を分けて運用すると無理なくWCAGを通せます。
- 本文文字色はブランドカラーを使わず、必ず濃いグレーや黒系を使う（読みやすさ最優先）
- ブランドカラーは見出し・アクセント・ボタン・リンクに限定して使う（その用途であればコントラスト基準を満たしやすい）
- 背景としてブランドカラーを使う場合は、薄いオーバーレイ（白の透過レイヤー）を重ねるか、彩度を落としたバリエーションを用意する
- ブランドカラーの「濃い版／薄い版」をデザインシステムに登録し、用途別に使い分ける（コア色は触らず、派生色で対応する）
コーポレートカラーを保ったままアクセシビリティを通すには、1色のブランドカラーを「コア色＋濃淡数段階のパレット」へ拡張する設計が有効です。例えばグレーのスケールを #1A1A1A（本文最濃）/ #4A4A4A（補助テキスト）/ #767676（AAギリギリの注記）/ #D1D5DB（罫線・無効化）のように4段階で持つだけで、用途別に迷わず色が選べます。Tailwind CSSなら slate-900 / slate-600 / slate-500 / slate-300 がおおむね対応するレンジで、shade番号を揃えるだけでも一貫性が保てます。バナーやLPの配色設計にも応用できます。
⑧ 当サイトの「コントラスト比チェッカー」の使い方
Toolbox Portalのコントラスト比チェッカーは、配色設計の段階でWCAG基準を確認するためのブラウザツールです。ファイルアップロード不要・外部送信なしで、その場で判定できます。
- WCAG判定：文字色と背景色を入力すると、コントラスト比の数値と AA／AAA の合否、大きいテキスト用基準の判定が一目で分かる
- 色覚シミュレーション：P型／D型／T型の色覚特性で配色がどう見えるかをプレビューできるため、赤×緑などのNG配色を設計段階で潰せる
- 改善色の提案：基準を満たさない場合、ブランドカラーの色相を保ったまま「明度だけを調整した代替色」を提案するため、ブランドを崩さず通せる
配色を決めたら、実際の制作物にも活かしましょう。バナー最適化ツールでバナーの可読性を確認したり、LPコンポーネントビルダーでLPのファーストビューを組むときにも、ここで決めた配色をそのまま使えます。
関連ガイドとして、バナーデザインの基本、LPの作り方ガイド、外注を検討する場合のWeb制作会社比較ガイドもあわせてご覧ください。
よくある質問(FAQ)
Q. WCAGのコントラスト比基準は法的に守る必要がありますか?
WCAG自体は技術ガイドラインで、それ自体に直接の法的拘束力があるわけではありません。日本では2024年4月の改正障害者差別解消法で民間事業者の合理的配慮の提供は義務となりましたが、Webアクセシビリティの確保そのものは「環境の整備」として努力義務に位置づけられています（総務省・内閣府見解）。とはいえ公共系・大企業・行政発注の案件では、WCAG 2.1 レベルAA準拠が発注条件として求められるケースが多くあります。
Q. 「大きいテキスト」の定義を教えてください。
WCAG 2.1では「18pt（約24px）以上の通常テキスト」または「14pt（約18.67px、安全に見るなら19px以上）の太字テキスト」を大きいテキストとして扱います。大きいテキストはコントラスト比の基準が緩和され、AAで3:1、AAAで4.5:1となります。本文の小さな文字はより高い基準（AA 4.5:1）が求められます。
Q. 色覚多様性への配慮は具体的に何をすれば良いですか?
日本人男性の約5%、女性の約0.2%が色覚特性を持つとされます。最も多いのが赤色弱（P型）と緑色弱（D型）で、赤と緑の組み合わせが見分けにくくなります。具体的な対応は「色だけで情報を伝えない（アイコン・テキスト・パターンを併用する）」「赤と緑を隣接させて意味を区別しない」「コントラスト比を十分に確保する」の3点が基本です。
Q. AAとAAAのどちらを目指せば良いですか?
実務では一般的にレベルAA準拠が現実的な目標です。AAAは要求水準が高く、ブランドカラーや表現の自由度を大きく制約することがあります。一般的なWebサイト・LP・バナーであればAA、行政サイト・教育機関・医療など高齢者や視覚に不安のある利用者が多いサイトでは可能な範囲でAAAを目指す、という使い分けが現実的です。
Q. コントラスト比チェッカーで何が分かりますか?
コントラスト比チェッカーでは、文字色と背景色のコードを入力するだけで、コントラスト比の数値とWCAGのAA/AAA判定が一目で分かります。当サイトのチェッカーは判定に加えて、色覚多様性のシミュレーション（赤色弱・緑色弱・青色弱の見え方）と、基準を満たすための改善色の提案も表示するため、設計段階で配色を詰める用途に使えます。