色以外の情報伝達手段の確保

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

色覚特性の違いや、モノクロ表示などの環境においても、情報の伝達や操作の実行が可能であることを保証します。

• 色のみに依存した情報提供を避ける
• 色以外の手段（テキスト、アイコン、パターンなど）でも情報を伝える

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

注意

色のみで情報を伝えると、色覚特性の違いを持つユーザーや、モノクロ表示の環境では情報が伝わりません。

結果的に、必要な情報を得られず、誤操作や混乱の原因になります。

具体例：フォーム入力での困りごと

Cさんは色覚特性があり、赤と緑の区別が困難です。 フォームの必須項目が赤色のアスタリスクのみで示されているため、どの項目が必須なのか分かりません。 送信後にエラーが出ても、エラー箇所が赤枠で示されているだけでは、どこを修正すべきか判断できませんでした。

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

• 必須項目を赤色のみで示している
• エラーメッセージを赤色のみで表示している
• グラフやチャートで色のみで情報を区別している
• リンクテキストを色のみで識別させている（下線なし）
• ステータスを色のみで示している（緑=成功、赤=失敗など）

実装例での比較

以下のデモで色のみの情報伝達と、色以外の手段を併用した場合の違いを確認してください。

悪い例: 色のみで情報を伝えている

demo.html

demo.css

<form>
  <div class="form-group">
    <label>名前 <span class="required-bad">*</span></label>
    <input type="text" />
  </div>
  <div class="form-group error-bad">
    <label>メールアドレス <span class="required-bad">*</span></label>
    <input type="email" value="invalid" />
  </div>
  <div class="status-bad">
    <span class="success">●</span> 完了
    <span class="error">●</span> エラー
    <span class="pending">●</span> 処理中
  </div>
</form>

Open Sandbox

良い例: 色以外の手段も併用している

demo.html

demo.css

<form>
  <div class="form-group">
    <label>名前 <span class="required-good">*（必須）</span></label>
    <input type="text" />
  </div>
  <div class="form-group error-good">
    <label>メールアドレス <span class="required-good">*（必須）</span></label>
    <input type="email" value="invalid" aria-invalid="true" aria-describedby="email-error" />
    <span id="email-error" class="error-message">⚠ 有効なメールアドレスを入力してください</span>
  </div>
  <div class="status-good">
    <span class="success">✓ 完了</span>
    <span class="error">✕ エラー</span>
    <span class="pending">◐ 処理中</span>
  </div>
</form>

Open Sandbox

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

要件定義

• 機能要件に「色のみに依存しない情報伝達」を明記する
• ステータス表示やエラー表示の仕様に、色以外の表現方法を含める

デザイン

• 必須項目には「*（必須）」などのテキストを併記する
• エラー状態にはアイコンとテキストを併用する
• グラフやチャートには凡例やラベルを付ける
• リンクには下線を付けるか、アイコンを併用する

ステータス表示の良い例

demo.html

demo.css

<div class="status-list">
  <div class="status success">
    <span class="icon">✓</span>
    <span class="label">完了</span>
  </div>
  <div class="status error">
    <span class="icon">✕</span>
    <span class="label">エラー</span>
  </div>
  <div class="status warning">
    <span class="icon">!</span>
    <span class="label">警告</span>
  </div>
  <div class="status info">
    <span class="icon">i</span>
    <span class="label">情報</span>
  </div>
</div>

Open Sandbox

開発

• フォームのバリデーションエラーにはテキストメッセージを表示する
• aria-invalid属性とエラーメッセージを組み合わせる
• リンクにはtext-decoration: underlineを維持する

QA

• グレースケール表示で情報が区別できるか確認する
• 色覚シミュレーションツールで確認する
• テキストやアイコンのみで情報が伝わるか確認する

リリース後

• 色覚特性のあるユーザーからのフィードバックを収集する
• 問題が見つかった箇所を改善する

よくある問題と解決方法

グラフやチャートで色のみで区別している

危険

円グラフや棒グラフで色のみでデータを区別すると、色覚特性のあるユーザーは判別できません。

解決方法

• 直接ラベルを付ける
• パターン（斜線、ドットなど）を併用する
• 凡例に数値を含める

グラフの改善例

<!-- 悪い例：色のみで区別 -->
<div class="legend">
  <span style="color: red">●</span> カテゴリA
  <span style="color: green">●</span> カテゴリB
</div>

<!-- 良い例：パターンと数値を併用 -->
<div class="legend">
  <span style="background: repeating-linear-gradient(45deg, red, red 2px, white 2px, white 4px)">▨</span> カテゴリA (45%)
  <span style="background: repeating-linear-gradient(90deg, green, green 2px, white 2px, white 4px)">▤</span> カテゴリB (55%)
</div>

リンクが色のみで識別される

通常のテキストとリンクを色のみで区別していると、リンクを見逃す可能性があります。

demo.html

demo.css

<p class="bad-link">
  詳細は<a href="#">こちら</a>をご覧ください。
</p>
<p class="good-link">
  詳細は<a href="#">こちら</a>をご覧ください。
</p>

Open Sandbox

チェックリスト

必須チェック項目

• 色のみで情報を伝えていない
• 必須項目は色以外の手段（テキスト、アイコン）でも示されている
• エラーメッセージは色以外の手段でも識別できる
• リンクは下線やアイコンで識別できる

推奨項目（中優先度）

• グラフやチャートにはパターンやラベルが併用されている
• ステータス表示にはアイコンとテキストが併用されている
• グレースケール表示で情報が区別できる

関連するWCAG達成基準

• WCAG 2.2 達成基準 1.4.1 色の使用（レベルA）
  • 色覚シミュレーションやグレースケールで見ても情報が取れるかを目視確認するだけでOKです

知っておくと便利なこと

色覚特性の種類

種類	特徴	注意が必要な色の組み合わせ
P型（1型）色覚	赤が見えにくい	赤と緑、赤と茶色
D型（2型）色覚	緑が見えにくい	赤と緑、緑と茶色
T型（3型）色覚	青が見えにくい	青と黄色

グレースケールでの確認方法

CSSでグレースケール表示にする方法

/* 開発時の確認用 */
body {
  filter: grayscale(100%);
}

色覚シミュレーションツール

• Chrome DevTools：RenderingからEmulate vision deficienciesを選択
• Firefox：Accessibility InspectorからSimulateを選択
• Figma：Visionプラグイン

参考資料

WCAGガイドライン

• WCAG 2.2 達成基準 1.4.1 色の使用 - 英語公式ガイド
• 解説書 達成基準 1.4.1: 色の使用 | WAI | W3C - 日本語版

技術的リソース

• MDN: 色のアクセシビリティ - 色とアクセシビリティの解説
• WebAIM: 色覚特性のシミュレーション - 色覚特性の理解と対応