アクセシビリティ 2026/06/20

【2026年版】LPのコントラスト比改善でCVRを高める方法｜WCAG基準と実践的な色の選び方

「LPのCTAボタンをオシャレなパステルカラーにしたら、クリック率が下がった」——このような経験は、コントラスト比の問題が原因かもしれません。

コントラスト比とは、テキストや要素と背景色の明るさの差のことです。WCAG 2.2では、通常テキストのコントラスト比が4.5:1以上（AAレベル）であることを求めており、これを下回るとアクセシビリティ上の問題になるだけでなく、すべてのユーザーにとって視認性が低下してCVRが落ちるという直接的な影響が生じます。

本記事では、LPのコントラスト比がCVRに与える影響から、WCAGの基準、CTAボタン・テキスト・フォームへの具体的な改善方法まで解説します。

この記事でわかること

コントラスト比とは何か、CVRへの影響
WCAG 2.2のコントラスト比基準（A/AA/AAA）
CTAボタン・テキスト・フォームのコントラスト改善方法
無料で使えるコントラスト比チェックツール
コントラスト比を保ちながらデザインの美観を維持する方法

コントラスト比とは
WCAG 2.2のコントラスト比基準
LPのコントラスト問題がCVRに与える影響
CTAボタンのコントラスト改善
テキスト・見出しのコントラスト改善
フォーム・UIコンポーネントのコントラスト改善
コントラスト比チェックツール
デザインの美観を保ちながらコントラストを高める方法
DejamでコントラストとCVRを継続的に改善する
よくある質問
まとめ

コントラスト比とは

**コントラスト比（Contrast Ratio）とは、前景色（テキストや要素の色）と背景色の相対輝度の差を数値化したものです。**1:1（同一色）から21:1（白と黒）の範囲で表され、数値が高いほど視認性が高くなります。

コントラスト比の計算式：

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)
※ L1は明るい方の相対輝度、L2は暗い方の相対輝度

実際にはツールで計算するため、計算式を覚える必要はありませんが、以下の目安を覚えておくと便利です。

コントラスト比	視認性	WCAGレベル
1:1	見えない（同色）	不合格
2:1〜3:1	見づらい	不合格（A/AAとも）
3:1	大きなテキスト・UIコンポーネントの最低ライン	AA（大文字・UI）
4.5:1	通常テキストの最低ライン	AA
7:1	高コントラスト	AAA
21:1	白背景に黒テキスト（最高）	AAA

WCAG 2.2のコントラスト比基準

WCAG 2.2では以下のコントラスト比基準が定められています。

対象	最低比率（AA）	推奨比率（AAA）
通常テキスト（18px未満・非太字）	4.5:1	7:1
大きなテキスト（18px以上 or 14px太字以上）	3:1	4.5:1
UIコンポーネント・グラフィック（ボタン枠線・アイコン・グラフ等）	3:1	—
装飾のみの要素	要件なし	—
ロゴのテキスト	要件なし	—
無効化されたUI要素	要件なし	—

また、WCAG 2.2で新たに追加された達成基準2.4.11（フォーカスの外観・AAレベル）では、フォーカスインジケーターのコントラスト比も3:1以上が求められています。

LPのコントラスト問題がCVRに与える影響

コントラスト比の問題はアクセシビリティ上の問題にとどまらず、LPのCVR全体に影響します。

影響1：CTAボタンが見えにくい → クリック率低下

パステルカラーの背景に薄い色のテキストボタンは、明るい屋外・ディスプレイの設定によって、正常な色覚を持つユーザーにとっても見づらいことがあります。コントラスト比の低いCTAボタンはクリック率（CTR）を下げます。

影響2：本文テキストが読みにくい → 離脱率上昇

ライトグレーの背景に薄いグレーのテキスト（コントラスト比2〜3:1程度）は、デザインとしてはよく使われますが、視覚障害・弱視・高齢者のユーザーには読めない場合があります。本文が読めないユーザーは離脱するため、コンテンツに投資した価値が損なわれます。

影響3：フォームの視認性低下 → 離脱率上昇

入力欄の枠線・ラベルテキスト・プレースホルダーのコントラストが不足していると、フォームが分かりにくくなり離脱率が上がります。特にモバイルの屋外使用では影響が顕著です。

CTAボタンのコントラスト改善

CTAボタンのコントラスト比改善は、LPのCVRに最も直接的に影響する施策です。

ボタンテキストのコントラスト確認方法

ボタン配色	テキスト	背景	コントラスト比	判定
白テキスト on 青（#0066CC）	#FFFFFF	#0066CC	8.59:1	✅ AA/AAA
白テキスト on オレンジ（#E65C00）	#FFFFFF	#E65C00	4.56:1	✅ AA
白テキスト on 赤（#FF0000）	#FFFFFF	#FF0000	3.99:1	❌ AA不合格
白テキスト on 赤（#C0392B）	#FFFFFF	#C0392B	5.12:1	✅ AA
黒テキスト on 黄（#FFD700）	#000000	#FFD700	9.65:1	✅ AA/AAA
グレーテキスト on 白（#999999）	#999999	#FFFFFF	2.85:1	❌ AA不合格

/* ✅ WCAG AA準拠のCTAボタン例 */
.cta-primary {
  background-color: #0066CC;  /* 濃い青 */
  color: #FFFFFF;              /* 白テキスト */
  /* コントラスト比：8.59:1 ✅ */
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 4px;
}

/* ✅ ホバー時のコントラストも確認 */
.cta-primary:hover {
  background-color: #0052A3;  /* より濃い青 */
  color: #FFFFFF;
  /* コントラスト比：11.57:1 ✅ */
}

テキスト・見出しのコントラスト改善

よくある問題と修正例

問題1：ライトグレーの本文テキスト

/* ❌ NG：コントラスト比 3.87:1（不合格） */
body {
  color: #999999;
  background-color: #FFFFFF;
}

/* ✅ 修正：コントラスト比 7.0:1（合格） */
body {
  color: #4A4A4A;  /* 濃いグレー */
  background-color: #FFFFFF;
}

問題2：薄い色の見出し

/* ❌ NG：ブランドカラーが薄すぎてコントラスト不足 */
h2 {
  color: #66AADD;  /* 薄いブルー：コントラスト比2.5:1 */
  background-color: #FFFFFF;
}

/* ✅ 修正：ブランドカラーを濃くする */
h2 {
  color: #0055AA;  /* 濃いブルー：コントラスト比8.25:1 */
  background-color: #FFFFFF;
}

問題3：画像上のテキスト

画像の上に直接テキストを重ねるデザインは、画像によってコントラストが変動します。

/* ✅ テキストの背景にオーバーレイを付ける */
.hero-text {
  background-color: rgba(0, 0, 0, 0.7);  /* 半透明の黒 */
  color: #FFFFFF;
  padding: 8px 16px;
}

/* または text-shadow で視認性を高める */
.hero-text {
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

フォーム・UIコンポーネントのコントラスト改善

フォームの入力欄・枠線・ラベルのコントラストも、CVRに直接影響します。

/* ✅ アクセシブルなフォームデザイン */
.form-input {
  border: 2px solid #767676;  /* グレー枠：白背景に対して4.54:1 ✅ */
  color: #1A1A1A;              /* 濃いテキスト：白背景に対して16.2:1 ✅ */
  background-color: #FFFFFF;
  padding: 12px 16px;
  font-size: 16px;
}

/* フォーカス時のスタイル */
.form-input:focus {
  border-color: #0066CC;       /* 濃い青：白背景に対して8.59:1 ✅ */
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

/* エラー状態 */
.form-input.error {
  border-color: #C0392B;       /* 濃い赤：白背景に対して5.12:1 ✅ */
}

.form-error-message {
  color: #C0392B;              /* 濃い赤：白背景に対して5.12:1 ✅ */
  font-size: 14px;
}

コントラスト比チェックツール

コントラスト比は以下の無料ツールで簡単に確認できます。

ツール	使い方	特徴
Colour Contrast Analyser	デスクトップアプリ。スポイトで色を抽出	リアルタイムで任意の色をチェック
WebAIM Contrast Checker	WebサイトでHEX値を入力	シンプルで使いやすい
Adobe Color	カラーパレット全体のチェック	デザインツールと連携しやすい
Figma「Stark」プラグイン	Figmaデザイン上で確認	デザイン段階でのチェックに最適
Chrome DevTools	F12→Elements→色の吹き出し	ブラウザ上でリアルタイム確認
Google Lighthouse	ページ全体のコントラスト問題を一括検出	複数箇所をまとめてスキャン

デザインの美観を保ちながらコントラストを高める方法

「コントラストを上げると、洗練されたデザインが崩れる」という懸念は多くのデザイナーが感じます。しかし以下の方法を使えば、美観とアクセシビリティを両立できます。

方法1：テキストを少し大きくする

14px以上の太字テキスト・18px以上のテキストは「大きなテキスト」として3:1以上で合格します。

/* 通常テキスト：4.5:1以上が必要 */
p { font-size: 16px; color: #767676; }  /* ❌ 4.54:1（ギリギリ合格だが視認性は低い） */

/* 少し大きく・太くすることで3:1以上で合格 */
p { font-size: 18px; font-weight: 500; color: #767676; }  /* 4.54:1で ✅ */

/* 見出しは18px以上が多いため3:1でOK */
h2 { font-size: 24px; color: #AAAAAA; }  /* コントラスト比2.32:1 ❌ → 濃くする必要あり */

方法2：背景色を微調整する

背景をわずかに暗くするだけでコントラスト比が大幅に改善します。

/* ❌ 薄いグレー背景にグレーテキスト */
.card {
  background: #F5F5F5;
  color: #999999;  /* コントラスト比：2.85:1 ❌ */
}

/* ✅ 背景を白に近づけると改善 */
.card {
  background: #FFFFFF;
  color: #767676;  /* コントラスト比：4.54:1 ✅ */
}

DejamでコントラストとCVRを継続的に改善する

コントラスト比の改善前後の効果は、Dejamのヒートマップ機能でCTAクリック率・フォーム離脱率を比較することで定量的に把握できます。

またDejamのウェブアクセシビリティ機能では、LPのコントラスト比問題を自動スキャンして改善箇所を一覧で提示します。

ABテスト機能でコントラスト比を改善したCTAボタンと旧バージョンを比較し、CVRへの効果を統計的に検証することも可能です。

詳しくは「【2026年版】色覚バリアフリーLPの作り方｜カラーユニバーサルデザインでCVRを改善する方法」も参考にしてください。

よくある質問

Q. WCAG AA（4.5:1）と今のデザインを両立できますか？

A. ほとんどのケースで可能です。コントラスト比を満たすためにデザインを大きく変える必要はなく、テキストカラーをわずかに濃くする・背景を白に近づける・テキストを少し大きくするなどの小さな調整で達成できることが多いです。ブランドカラーが薄い場合は、テキスト用の「ダーク版ブランドカラー」を用意する手法も有効です。

Q. 画像の中のテキストもコントラスト比が必要ですか？

A. はい、画像内のテキストもWCAGの対象です（ただしロゴや装飾テキストは除外）。商品画像内の価格表示・バナーのキャッチコピーなど、情報を伝えるためのテキストが含まれる画像はコントラスト比を確認してください。可能であれば画像のテキストはHTMLテキストで表現することをおすすめします。

Q. 動的に変わる背景（グラデーション・画像）の上のテキストはどう対処しますか？

A. グラデーションや画像の上のテキストは、背景の最も薄い部分に対してコントラスト比を確認します。半透明のオーバーレイを背景に追加するか、テキストにtext-shadowを付けることで、どの背景色でも一定のコントラストを確保できます。

まとめ

LPのコントラスト比は、WCAG AA準拠（通常テキスト4.5:1、UIコンポーネント3:1）を目標に改善することで、アクセシビリティと同時にCVRの向上が期待できます。

特に影響の大きいCTAボタン・本文テキスト・フォームのコントラスト比から優先的に確認し、Colour Contrast AnalyserやGoogle Lighthouseで問題箇所を把握してください。

デザインの美観を保ちながらコントラストを改善する方法として、テキストサイズの増大・背景色の微調整・テキストオーバーレイの活用が有効です。Dejamのヒートマップ・ABテストで改善効果を定量的に検証しながら、継続的にLPを最適化してください。

CVR改善ならDejam！アクセシビリティ対応からLP改善まで一気通貫

Dejamは、LP制作・ヒートマップ分析・ABテスト・ウェブアクセシビリティ診断をオールインワンで提供するCVR改善特化ツールです。コントラスト比改善を含むアクセシビリティ対応から改善効果の計測まで、Dejam一つで完結できます。

Dejamが選ばれる理由

国内唯一のワンプロダクト: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで完結
月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充
権威ある実績: 代表がダイレクトアジェンダで2連覇。国内唯一のLPO顕彰制度「LPO AWARD」主催者

Dejamの詳しい機能を見る →　無料トライアルを申し込む →

タグ: ウェブアクセシビリティ WCAG アクセシビリティ対応 LP改善 CVR改善色覚バリアフリーコントラスト比 LP制作 CTAボタンカラーデザイン

この記事の監修者

平井翔吏

株式会社LeanGo 代表取締役CEO / Dejamプロダクトオーナー

CVRを改善するノウハウを体系化するプロフェッショナル。

株式会社リクルートホールディングスに新卒入社、ゼクシィのUXデザインを担当。累計250件以上の施策を実施しCVR改善を140%達成。タグ検索の開発やゼクシィ花嫁割のリブランディングなどのプロジェクトオーナーとして事業を推進した。

株式会社LeanGoを設立。CVR改善ツールDejamのプロダクトオーナー。運用型LPOやセグメントCVRなど独自のメソッドを構築、PDCAハンドスピナーをはじめとするプロモーションも実施している。日本最高峰のダイレクトマーケティングカンファレンス「ダイレクトアジェンダ2025」「ダイレクトアジェンダ2026」のAgenda awardにて2連覇。