CSS変数によるアクセシブルコントラストパレット

アクセシブルコントラストパレットの構築

アクセシビリティは後付けではなく、デザイン要件です。WCAG 2.1は最小コントラスト比を定義しています：通常テキストで4.5:1（レベルAA）、強化コントラストで7:1（レベルAAA）。CSS変数パレットにはこれらの制約をエンコードすべきです。

ペアリング戦略

各背景シェードに保証されたコントラストのテキストシェードをマップします：

:root {
  /* 背景 + 保証されたテキストペアリング */
  --bg-light:   #ffffff;  /* text: --text-dark (21:1) */
  --bg-surface: #f4f4f5;  /* text: --text-dark (18.1:1) */
  --bg-dark:    #18181b;  /* text: --text-light (17.4:1) */

  --text-dark:  #18181b;
  --text-light: #fafafa;
  --text-muted: #71717a;  /* --bg-light上: 5.7:1 ✓ AA */
}

コントラスト比のドキュメント化

CSSコメントとしてコントラスト情報を埋め込みます：

:root {
  --primary-500: #3b82f6;  /* 白上: 3.1:1 ✗ (大きなテキストのみ) */
  --primary-700: #1d4ed8;  /* 白上: 6.4:1 ✓ AA */
  --primary-800: #1e40af;  /* 白上: 8.5:1 ✓ AAA */
}

一般的な落とし穴

1. ミューテッドテキストが薄すぎる — 白上のGray-400はAAに失敗することが多い。少なくともgray-500（5:1+）を使用。
2. カラーテキストonカラー背景 — ダークブルー背景上のブルーテキストは区別できるように見えてもコントラストに失敗する場合がある。
3. フォーカスインジケーター — フォーカスリングは隣接するカラーに対して3:1のコントラストが必要（WCAG 2.4.11）。
4. ダークモードの仮定 — ダーク背景上の白テキストが常に十分とは限らない。各ペアリングをチェック。

自動テスト

axe-coreやChrome Lighthouseなどのツールを使用してコントラストを監査します。最初からアクセシビリティを考慮してパレットを定義すれば、これらの監査は確認作業になります。

アクセシビリティ用セマンティックトークン

明示的なアクセシブルペアリングを作成します：

:root {
  --text-on-primary: #ffffff;    /* --primary-600上: 4.9:1 ✓ */
  --text-on-success: #ffffff;    /* --success-600上: 4.6:1 ✓ */
  --text-on-error:   #ffffff;    /* --error-600上: 4.5:1 ✓ */
}