🎨
← ガイド一覧に戻る

アクセシブルな色のコントラスト：デザイナーのためのWCAGガイドライン解説

· タグ: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

アクセシブルな色のコントラスト：WCAGガイドライン解説

色のコントラストは、Webアクセシビリティの最も重要な側面の1つです。ユーザーがコンテンツを読めるか、インターフェースを操作できるか、タスクを完了できるかに直接影響します。それでも、コントラストの失敗はWeb上で最も一般的なアクセシビリティ問題の1つであり続けています — 多くの場合、デザイナーが比率を検証せずに自分の画面で見栄えのする色を選ぶからです。

このガイドでは、WCAGの色のコントラスト要件について知っておくべきすべて、その満たし方、そして視覚的な品質を犠牲にせずにアクセシブルなインターフェースをデザインする方法を解説します。

色のコントラスト比とは？

色のコントラストは、2つの色（通常は前景（テキスト）と背景）の間の知覚される輝度の差の尺度です。コントラストは、1:1（同一の色、見えないテキスト）から21:1（白背景の黒テキスト、理論上の最大値）までの比率で表されます。

コントラスト比は相対輝度を使って計算され、人間の目が異なる波長の光をどのように知覚するかを考慮します。公式は次のとおりです：

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

ここで L1 は明るい方の色の相対輝度、L2 は暗い方の色の相対輝度です。人間の目は赤や青よりも緑の光に敏感なため、輝度の計算ではチャンネルに異なる重みが付けられます。

これを手動で計算する必要はありません。 当社のカラーコンバーターを含むすべてのコントラストチェッカーツールが、即座に計算します。

WCAGのコントラスト要件

Web Content Accessibility Guidelines（WCAG）は、適合レベルの3段階を定義しています：A、AA、AAA。色のコントラスト要件はAAとAAAレベルに適用されます。

WCAG AAレベル（推奨される最低基準）

AAはほとんどのWebサイトの最低基準であり、多くの法域（欧州アクセシビリティ法、米国・カナダ・オーストラリアのアクセシビリティ規制を含む）で法律で義務付けられています。

| テキストのカテゴリ | 最低比率 | 白の上で準拠するグレーの例 | |---------------|--------------|-------------------------------------| | 通常テキスト（18px未満 / 14pxの太字） | 4.5:1 | 白の上の #767676 | | 大きなテキスト（18px以上の太字、または24px以上の通常） | 3:1 | 白の上の #9A9A9A | | UIコンポーネント（ボーダー、アイコン、フォームフィールド） | 3:1 | コンポーネントのボーダー、フォーカスインジケーター | | 装飾ではないグラフィック | 3:1 | チャート、インフォグラフィック、アイコン |

WCAG AAAレベル（強化）

AAAは、特に弱視やコントラスト感度の問題があるユーザーにとって、より良い読みやすさを提供する高い基準です。

| テキストのカテゴリ | 最低比率 | 白の上で準拠するグレーの例 | |---------------|--------------|-------------------------------------| | 通常テキスト | 7:1 | 白の上の #595959 | | 大きなテキスト | 4.5:1 | 白の上の #777777 |

AAAはほとんどの規制への適合には必要ありませんが、高齢者や視覚障害のあるユーザーにサービスを提供するサイトには推奨されます。

これらの要件がカバーするもの

WCAGのコントラスト要件は以下に適用されます：

  • テキスト — すべての本文テキスト、見出し、ラベル、キャプション、リンクテキスト
  • 画像内のテキスト — 画像の一部であるテキスト（装飾用テキストを除く）
  • UIコンポーネント — ボタン、フォームフィールド、スライダー、トグルスイッチ、およびそれらのボーダー
  • アイコン — 情報を伝える重要なアイコン（装飾的でないもの）
  • フォーカスインジケーター — キーボードフォーカスの輪郭は、隣接する背景に対して3:1のコントラストが必要

これらの要件がカバーしないもの

  • ロゴ — ブランドロゴや会社名の一部であるテキスト
  • 装飾要素 — 機能的目的のない純粋に装飾的な画像
  • 非アクティブなUI — 無効なボタンやフォームコントロール（ただし、認識可能である必要はあります）
  • 感覚的テキスト — 背景画像の一部であり、必須ではないテキスト

よくあるコントラストの失敗とその修正方法

1. 薄いグレーのテキスト

白背景の薄いグレーのテキストは、圧倒的に最も一般的なコントラストの失敗です。白の上の #CCCCCC のようなシェードのコントラスト比はわずか1.6:1で、4.5:1の最低基準を大きく下回ります。

修正： グレーのテキストを暗くします。白の上の本文テキストには、少なくとも #595959（AAA準拠）を目指します。#767676（14pxテキストのAA最低基準）でさえ、ほとんどの「控えめな」グレーの選択よりも明らかに暗いです。

2. 本文テキストに使われるブランドカラー

ブランドカラーは、テキストとして適用すると明るすぎることがよくあります。白の上の #3366CC のようなミディアムブルーは、約3.5:1の比率で、4.5:1の基準を下回ります。

修正： ブランドカラーは見出しとアクセント用に取っておきます。本文テキストにはほぼ黒（#1A1A1A から #333333）を使用します。色付きテキストが比率を満たしているか確認します。

3. 色のみのリンクインジケーター

本文テキストと色だけが異なるリンクは、WCAG成功基準1.4.1（色の使用）に違反します。色覚異常のユーザーはその違いを知覚できない可能性があります。

修正： リンクには常に色以外のインジケーターを提供します。一般的な方法：

  • リンクに下線を付ける（最も堅牢な解決策）
  • アイコンを追加する（矢印や外部リンク記号）
  • インラインリンクに太字を使用する
  • 背景のハイライトを提供する

4. 背景画像の上のテキスト

写真やグラデーションの上に配置されたテキストは、画像全体で十分なコントラストを持つことはほとんどありません。

修正：

  • 画像とテキストの間に半透明のオーバーレイを追加する
  • 微妙な輪郭効果のためにtext-shadowを使用する
  • テキストを無地の色のボックスオーバーレイに配置する
  • テキストの背後に表示される可能性のある画像の部分が最低比率を満たしていることを確認する

5. 低コントラストのプレースホルダーテキスト

白の上の #BDBDBD（1.9:1）のようなフォームのプレースホルダーは一般的ですが、コントラスト要件を満たしていません。

修正： プレースホルダーを少なくとも #757575（4.6:1）に暗くします。さらに良いのは、プレースホルダーの代わりにラベルを使用することです — ラベルは常に表示され、ユーザーが入力を開始しても消えることはありません。

色のコントラストのテスト

自動化ツール

  • ブラウザのDevTools — ChromeとFirefoxのDevToolsには組み込みのコントラストチェックがあります。要素を検査し、「Styles」または「Accessibility」パネルでコントラスト比を確認します。
  • オンラインのコントラストチェッカー — 2つの色を入力すると、AAとAAAの合格/不合格ステータスが即座に得られます。
  • デザインツールのプラグイン — Stark、A11y、ContrastがFigma、Sketch、Adobe XDで利用できます。これらはデザインファイル内で直接コントラストをチェックします。
  • Lighthouse — GoogleのLighthouse監査はコントラストの失敗を自動的に報告します。

手動テスト

自動化ツールはテキストのコントラストしかチェックできません。完全なアクセシビリティレビューには：

  1. モニターを消す — すべてのインターフェース要素を区別できますか？
  2. グレースケールフィルターを使用する — 色がなくても情報が正しく伝わりますか？
  3. 色覚異常シミュレーターでテストする — Colorblindly（Chrome拡張機能）のようなツールは、さまざまなタイプの色覚異常を持つユーザーにサイトがどのように見えるかを示します。
  4. 直射日光の下でテストする — 周囲光が高いと知覚されるコントラストが低下します。

色覚異常のためのデザイン

およそ男性の12人に1人（8%）と女性の200人に1人（0.5%）が、何らかの形の色覚異常を持っています。最も一般的なタイプは次のとおりです：

  • 第二色盲（デューテラノピア）（緑色盲、男性の6%）— 赤と緑の区別が難しい
  • 第一色盲（プロタノピア）（赤色盲、男性の2%）— 赤が暗く見え、緑と混同する
  • 第三色盲（トリタノピア）（青色盲、まれ）— 青と黄の区別が難しい

デザイン戦略

  1. 色だけに頼らない — 色を通じて伝えられる情報（エラー状態、ステータスインジケーター、チャートのカテゴリ）は、テキスト、アイコン、パターン、または位置を通じても伝えなければなりません。

  2. 問題のある組み合わせを避ける — 赤/緑、青/紫、緑/茶色、緑/青が最も一般的に混同されるペアです。

  3. パターンとテクスチャを使用する — チャートやグラフでは、色に加えて点線、ハッチングの塗りつぶし、異なる形状を使用します。

  4. ラベルを直接追加する — データ可視化では、色分けされた凡例に頼るのではなく、データポイントに直接ラベルを付けます。

  5. シミュレーターでテストする — すべてのデザインは、リリース前に第一色盲と第二色盲のシミュレーターでテストする必要があります。

アクセシブルなカラーシステムの構築

ステップ1：アクセシブルなベースカラーを選ぶ

自然に良いコントラストを提供する色から始めます。深い青、濃い緑、豊かな赤は、適切に組み合わせればすべてアクセシブルなベースカラーになり得ます。

ステップ2：準拠したスケールを生成する

各ステップが明るい隣接色と暗い隣接色の両方と十分なコントラストを維持する明度スケールを作成します。OKLCHは明度チャンネルが知覚的に均一であるため、これに最適です：

--text-primary: oklch(10% 0.01 0);    /* ほぼ黒、白で約19:1 */
--text-secondary: oklch(35% 0.02 0);  /* 濃いグレー、白で約9:1 */
--text-muted: oklch(45% 0.02 0);      /* ミディアムグレー、白で約5.5:1 */
--text-disabled: oklch(60% 0.02 0);   /* 薄いグレー、白で約3:1 */

ステップ3：すべての組み合わせを検証する

デザインシステム内のすべての前景-背景ペアを検証する必要があります：

  • サーフェス上のプライマリテキスト — 4.5:1以上（7:1推奨）
  • サーフェス上のセカンダリテキスト — 4.5:1以上
  • サーフェス上のミュートテキスト — 3:1以上（必須ではないテキストのみ）
  • インタラクティブ要素 — ステータスで3:1以上
  • フォーカスインジケーター — 3:1以上

開発者のための実践チェックリスト

  • [ ] すべての本文テキストが4.5:1のコントラスト比を満たすか上回る
  • [ ] すべての大きなテキストが3:1のコントラスト比を満たすか上回る
  • [ ] リンクに色以外のインジケーターがある（下線、アイコン、または太さの変更）
  • [ ] フォーム入力に表示可能なボーダーまたは背景がある（プレースホルダーテキストのみではない）
  • [ ] フォーカスインジケーターが隣接する背景に対して3:1のコントラストを持つ
  • [ ] エラー状態が色とテキストまたはアイコンを組み合わせている
  • [ ] チャートとグラフが色に加えてパターンまたは直接ラベルを使用している
  • [ ] プレースホルダーテキストが4.5:1の最低基準を満たす
  • [ ] 無効な要素が視覚的に区別可能でありながら認識可能である
  • [ ] デザインが色覚異常シミュレーターでテストされている

まとめ

アクセシブルな色のコントラストはオプションではありません — インクルーシブなWebデザインの基本的な要件です。WCAG AA基準を満たすことで、視覚障害のあるユーザーがコンテンツにアクセスできるようになり、すべての人の読みやすさが向上し、多くの場合、よりクリーンで意図的なデザインにつながります。ワークフローにコントラストチェックを取り入れ、色を他の視覚的インジケーターの補完として — 代替としてではなく — 使用し、常にアクセシビリティのレンズを通してデザインをテストしてください。

組み込みのコントラストチェック付きの当社の無料オンラインカラーコンバーターを使って、色の組み合わせをWCAG AAおよびAAA基準に対して検証してください。