色彩アクセシビリティ設計ガイド:コントラスト・色覚特性への対応とWCAG準拠の実践

ユーティリティ

色彩アクセシビリティ:「見た目が良い」だけではない

世界中で男性の約8%、女性の約0.5%が色覚特性を持っています。つまり12人に1人のユーザーが、特定の色を正常に識別できません。

色覚特性のタイプ 有病率 識別が難しい色
1型2色覚(プロタノピア) 1% 赤-緑
2型2色覚(デュテラノピア) 5% 赤-緑
3型2色覚(トリタノピア) 0.003% 青-黄
全色盲(アクロマトプシア) 極めて稀 すべて

一、WCAGコントラスト基準

3つのレベル

レベル 通常テキスト 大きなテキスト UIコンポーネント
AA ≥ 4.5:1 ≥ 3:1 ≥ 3:1
AAA ≥ 7:1 ≥ 4.5:1 —

大きなテキストの定義:≥ 18pt(24px)または ≥ 14ptの太字(18.66px bold)。

コントラストの計算

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

L1 = 明るい色の相対輝度
L2 = 暗い色の相対輝度

相対輝度 L:
  sRGB ≤ 0.03928 の場合: L = sRGB / 12.92
  sRGB > 0.03928 の場合: L = ((sRGB + 0.055) / 1.055)^2.4

  sRGB = R/255, G/255, B/255 (各チャンネル個別に計算)

よくある配色のコントラスト

前景色 背景色 コントラスト AA 通常テキスト AA 大きなテキスト
#000000 #FFFFFF 21:1 ✅ ✅
#333333 #FFFFFF 12.6:1 ✅ ✅
#666666 #FFFFFF 5.7:1 ✅ ✅
#767676 #FFFFFF 4.5:1 ✅(ぎりぎり) ✅
#999999 #FFFFFF 2.8:1 ❌ ❌
#FF0000 #FFFFFF 3.99:1 ❌ ✅
#0000FF #FFFFFF 8.59:1 ✅ ✅

二、ToolsKuでコントラストを検証する

操作手順

  1. カラーコントラストチェッカーを開く
  2. 前景色と背景色を入力(HEX、RGB、HSLに対応)
  3. 結果を確認:
    • コントラスト比
    • WCAG AA / AAA 準拠状況
    • 通常テキスト / 大きなテキストの個別判定
  4. 準拠するまで色を調整

三、色覚シミュレーション

CSS filterによるシミュレーション

/* 1型2色覚(赤色盲) */
.protanopia { filter: url('#protanopia'); }

/* 2型2色覚(緑色盲) */
.deuteranopia { filter: url('#deuteranopia'); }

/* 3型2色覚(青色盲) */
.tritanopia { filter: url('#tritanopia'); }

SVGフィルターマトリックス

<svg style="display:none">
  <!-- 1型2色覚シミュレーションマトリックス -->
  <filter id="protanopia">
    <feColorMatrix type="matrix" values="
      0.567  0.433  0      0  0
      0.558  0.442  0      0  0
      0      0.242  0.758  0  0
      0      0      0      1  0
    "/>
  </filter>

  <!-- 2型2色覚シミュレーションマトリックス -->
  <filter id="deuteranopia">
    <feColorMatrix type="matrix" values="
      0.625  0.375  0      0  0
      0.7    0.3    0      0  0
      0      0.3    0.7    0  0
      0      0      0      1  0
    "/>
  </filter>
</svg>

四、色覚特性への対応戦略

戦略1:色だけに頼って情報を伝えない

<!-- 悪い例:色だけで状態を区別 -->
<span class="status-error" style="color: red">失敗</span>
<span class="status-success" style="color: green">成功</span>

<!-- 良い例:色 + アイコン -->
<span class="status-error" style="color: red">
  <svg>✕</svg> 失敗
</span>
<span class="status-success" style="color: green">
  <svg>✓</svg> 成功
</span>

戦略2:色覚特性に配慮した配色を使う

避けるべき組み合わせ 代替の組み合わせ
赤 + 緑 赤 + 青、または オレンジ + 青
薄い赤 + 薄い緑 濃い赤 + 薄い緑
緑の成功 + 赤のエラー 青の情報 + オレンジの警告

Wongの色覚バリアフリーパレット

#000000 黒
#E69F00 オレンジ
#56B4E9 スカイブルー
#009E73 青緑
#F0E442 黄
#0072B2 青
#D55E00 朱赤
#CC79A7 赤紫

このパレットは、すべての色覚特性タイプで識別可能です。

戦略3:グラフにテクスチャ/パターンを使う

/* データ系列ごとに異なるテクスチャを使用 */
.series-a { background-image: url('stripes.svg'); }
.series-b { background-image: url('dots.svg'); }
.series-c { background-image: url('crosshatch.svg'); }

五、ダークモードのアクセシビリティ

ダークモードのコントラストの落とし穴

落とし穴 説明 解決策
真っ黒背景に真っ白な文字 コントラスト21:1だが目が疲れやすい 濃いグレー背景(#1a1a2e)を使う
彩度の低下 ダークモードで高彩度は眩しい 彩度を適度に下げる
影が見えない 暗い背景でシャドウが消える ボーダーや輝度差で代替
画像のコントラスト不足 ダークモードで画像の細部が失われる CSS filterで調整

ダークモードの配色推奨

:root {
  /* ライトモード */
  --bg: #ffffff;
  --fg: #1a1a2e;
  --muted: #6b7280;
  --accent: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --fg: #e0e0e0;
    --muted: #9ca3af;
    --accent: #60a5fa; /* コントラストを保つため明るい青に */
  }
}

六、コンポーネントレベルのアクセシビリティチェック

フォームのエラー表示

<!-- 悪い例:赤いボーダーだけでエラーを表示 -->
<input style="border: 1px solid red" />

<!-- 良い例:ボーダー + テキスト + aria -->
<input
  style="border: 1px solid red"
  aria-invalid="true"
  aria-describedby="error-msg"
/>
<span id="error-msg" role="alert" style="color: #dc2626">
  有効なメールアドレスを入力してください
</span>

リンクと周囲テキストのコントラスト

リンクは背景との十分なコントラストに加えて、周囲のテキストとの視覚的な区別も必要です:

/* リンクは色だけでなく下線でも区別 */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

七、自動化テスト

axe-coreの導入

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('色彩アクセシビリティ', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Lighthouse監査

npx lighthouse https://example.com --only-categories=accessibility

CIへの統合

- name: Accessibility check
  run: npx pa11y https://staging.example.com

八、ベストプラクティスチェックリスト

  1. テキストのコントラスト ≥ 4.5:1(AAレベルの通常テキスト)
  2. 色だけに頼らずに状態情報を伝える
  3. 色覚バリアフリーのパレットを使う(Wongのパレットなど)
  4. グラフにテクスチャ/パターンを追加して区別を助ける
  5. ダークモードでもコントラストを維持し、真っ黒背景を避ける
  6. リンクに下線など色以外の区別をつける
  7. エラー表示にテキストの説明を添え、赤色だけに頼らない
  8. 自動化されたアクセシビリティテストをCIに統合する
#无障碍#WCAG#对比度#色盲#色彩设计