視認性を確保するための最小コントラスト比

このガイドラインで目指すこと

視覚的なコントラストを適切に確保することで、弱視や高齢者など、視力に制約のあるユーザーがテキストやUI要素を認識しやすくします。

• 様々な環境（明るい場所や古いディスプレイなど）でもコンテンツを読みやすくする
• 視力に依存せず、すべてのユーザーが情報を取得できる

このガイドラインが達成されないとどうなるか

注意

コントラスト比が低いと、弱視のユーザーや高齢者はテキストを読むのに苦労し、情報を取得できなくなります。

結果的に、重要な情報が読み取れず、サービスの利用を断念することになります。

具体例：ECサイトでの困りごと

Dさんは軽度の弱視があり、特に薄い色のテキストが読みにくいです。 あるECサイトで商品の価格がグレーの薄い文字で表示されており、何度も目を細めて確認する必要がありました。 結局、疲労のため購入を断念してしまいました。

こんなとき、達成されていないかもしれません

• 薄いグレーのテキストを白背景で使用している
• プレースホルダーテキストのコントラストが低い
• 無効状態のボタンのテキストが見えにくい
• 背景画像の上にテキストが乗っていて読みにくい
• デザイン重視で淡い色の組み合わせを使用している

実装例での比較

以下のデモでコントラスト比の違いを確認してください。

悪い例: コントラスト比が不十分

demo.html

demo.css

<div class="card-bad">
  <h3>商品タイトル</h3>
  <p class="price">¥1,980</p>
  <p class="desc">この商品の説明文です。薄い色で読みにくいです。</p>
  <input type="text" placeholder="検索キーワード" />
  <button disabled>購入不可</button>
</div>

Open Sandbox

良い例: 十分なコントラスト比を確保

demo.html

demo.css

<div class="card-good">
  <h3>商品タイトル</h3>
  <p class="price">¥1,980</p>
  <p class="desc">この商品の説明文です。しっかり読めます。</p>
  <input type="text" placeholder="検索キーワード" />
  <button disabled>購入不可</button>
</div>

Open Sandbox

最低限、すぐに取り組めること

要件定義

• デザインガイドラインに最小コントラスト比の要件を明記する
• 通常テキスト：4.5:1以上（色の濃淡差がはっきり見えること。後述のツールで簡単に確認できます）
• 大きなテキスト（24px以上、または18.67px以上の太字）：3:1以上

デザイン

• カラーパレット作成時にコントラスト比を確認する
• 背景色と前景色の組み合わせをドキュメント化する
• プレースホルダーやdisabled状態も基準を満たすようにする

コントラスト比を満たす色の組み合わせ例

demo.html

demo.css

<div class="color-samples">
  <div class="sample" style="background: #fff; color: #333;">
    白背景 × #333<br>コントラスト比: 12.6:1 ✓
  </div>
  <div class="sample" style="background: #fff; color: #767676;">
    白背景 × #767676<br>コントラスト比: 4.5:1 ✓
  </div>
  <div class="sample" style="background: #1a73e8; color: #fff;">
    #1a73e8 × 白<br>コントラスト比: 4.5:1 ✓
  </div>
  <div class="sample" style="background: #000; color: #949494;">
    黒背景 × #949494<br>コントラスト比: 4.5:1 ✓
  </div>
</div>

Open Sandbox

開発

• CSSでカラー変数を使用し、一元管理する
• コントラストチェッカーをCI/CDに組み込む
• 背景画像の上にテキストを置く場合は、オーバーレイを使用する

背景画像上のテキストを読みやすくする方法

.hero {
  position: relative;
  background-image: url('hero.jpg');
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明のオーバーレイ */
}

.hero-text {
  position: relative;
  color: white;
}

QA

• コントラストチェッカーで全ページを確認する（Chrome DevToolsで色をホバーするとOK/NGが出ます。WebAIMなどのツールでも可）
  • 数値の代わりに「薄い灰色文字と白背景など、読みにくくないか」を目視チェックし、迷ったらコントラストチェッカーで確認するのでも十分です
• 実際のデバイスで様々な環境（明るい場所、暗い場所）でテストする
• 弱視シミュレーションツールで確認する

リリース後

• ユーザーからのフィードバックを収集する
• コントラストに関する問題を継続的に改善する

よくある問題と解決方法

プレースホルダーのコントラストが低い

危険

プレースホルダーテキストもユーザーが読む情報です。コントラスト比4.5:1を確保してください。

demo.html

demo.css

<div class="placeholder-demo">
  <label>悪い例（コントラスト比: 1.6:1）</label>
  <input type="text" class="bad" placeholder="メールアドレス" />

  <label>良い例（コントラスト比: 4.5:1）</label>
  <input type="text" class="good" placeholder="メールアドレス" />
</div>

Open Sandbox

背景画像の上にテキストがある

背景画像は場所によって明るさが異なるため、テキストの可読性を低下させることがあります。

解決方法

1. 半透明のオーバーレイを使用する
2. テキストに影を付ける
3. テキスト背景にボックスを追加する

テキストを読みやすくする方法

/* 方法1: オーバーレイ */
.hero::before {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
}

/* 方法2: テキストシャドウ */
.hero-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 方法3: 背景ボックス */
.hero-text {
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 16px;
}

ダークモード対応

ダークモードでもコントラスト比を維持する必要があります。

ダークモードでのコントラスト確保

:root {
  --text-primary: #333;     /* 白背景で12.6:1 */
  --text-secondary: #767676; /* 白背景で4.5:1 */
  --bg-primary: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f0f0f0;  /* 黒背景で15:1 */
    --text-secondary: #b0b0b0; /* 黒背景で7:1 */
    --bg-primary: #1a1a1a;
  }
}

チェックリスト

必須チェック項目

• 通常のテキスト（24px未満）が背景色に対して4.5:1以上のコントラスト比を満たしている
• 大きなテキスト（24px以上、または18.67px以上の太字）が3:1以上のコントラスト比を満たしている
• プレースホルダーテキストが4.5:1以上のコントラスト比を満たしている

推奨項目（中優先度）

• UI要素（ボタン、入力フィールドの境界線など）が3:1以上のコントラスト比を満たしている
• 無効状態の要素も最低限の視認性が確保されている
• ダークモードでもコントラスト比が維持されている

関連するWCAG達成基準

• WCAG 2.2 達成基準 1.4.3 コントラスト（最低限）（レベルAA）

知っておくと便利なこと

コントラスト比の基準

テキストの種類	最小コントラスト比（AA）	推奨コントラスト比（AAA）
通常テキスト（24px未満）	4.5:1	7:1
大きなテキスト（24px以上）	3:1	4.5:1
太字テキスト（18.67px以上）	3:1	4.5:1

テキストサイズの単位について

WCAGではテキストサイズの要件をpt単位（18pt/14pt）で定めています。これをpx単位に換算すると約24px/18.67pxに相当します。 ptは印刷用の単位で、pxは画面上のピクセル単位です。デバイスの解像度によって実際の表示サイズが異なるため、px単位での指定の場合は注意が必要です。

コントラスト比の計算ツール

• WebAIM Contrast Checker - Webベースのコントラストチェッカー
• Chrome DevTools: 要素の色をホバーするとコントラスト比が表示される
• Figma: プラグイン「Contrast」「Stark」などで確認可能

よく使われる安全な色の組み合わせ

コントラスト比を満たす色の組み合わせ

/* 白背景での使用 */
--text-on-white-primary: #333;   /* 12.6:1 */
--text-on-white-secondary: #555; /* 7.5:1 */
--text-on-white-minimum: #767676; /* 4.5:1 */

/* 黒背景での使用 */
--text-on-black-primary: #fff;   /* 21:1 */
--text-on-black-secondary: #ccc; /* 13.1:1 */
--text-on-black-minimum: #949494; /* 4.5:1 */

参考資料

WCAGガイドライン

• WCAG 2.2 達成基準 1.4.3 コントラスト（最低限） - 英語公式ガイド
• 解説書 達成基準 1.4.3: コントラスト（最低限） | WAI | W3C - 日本語版

技術的リソース

• WebAIM Contrast Checker - コントラスト比計算ツール
• MDN: 色のコントラスト - 色とコントラストの解説
• Colorable - 色の組み合わせを探すツール