カラーアクセシビリティ

目次

• 概要
• 使用場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

アクセシブルなカラーデザインにより、色覚異常を含むすべてのユーザーが情報にアクセスして理解できるようになります。

使用場面

• カラーパレットの作成
• データビジュアライゼーションの設計
• インターフェースデザインのテスト
• ステータスインジケーターとアラート
• フォームの検証状態
• チャートとグラフ

クイックスタート

最小限の動作例:

WCAG Contrast Ratios:

WCAG AA (Minimum):
  - Normal text: 4.5:1
  - Large text (18pt+): 3:1
  - UI components & graphical elements: 3:1
  - Focus indicators: 3:1

WCAG AAA (Enhanced):
  - Normal text: 7:1
  - Large text: 4.5:1
  - Better for accessibility

---
Testing Contrast:

Tools:
  - WebAIM Contrast Checker
  - Color Contrast Analyzer
  - Figma plugins
  - Browser DevTools

Formula (WCAG): Contrast = (L1 + 0.05) / (L2 + 0.05)
  Where L = relative luminance

// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリの詳細な実装:

ガイド	内容
Color Contrast Standards	カラーコントラスト基準
Color Vision Deficiency Simulation	色覚異常シミュレーション
Accessible Color Usage	アクセシブルなカラー使用法
Testing & Validation	テストと検証

ベストプラクティス

✅ すべき項目

• 最小限 4.5:1 のコントラストを確保 (WCAG AA)
• 色覚異常シミュレーターでテストする
• 色とパターンまたはアイコンを組み合わせて使用する
• テキストのみではなく、テキストで状態をラベル付けする
• 色覚異常を持つ実際のユーザーでテストする
• デザインシステムでカラー使用法を記録する
• アクセシブルなカラーパレットを選択する
• 順序付きデータに対して連続的な色を使用する
• すべてのカラーの組み合わせを検証する
• フォーカスインジケーターを含める

❌ すべきでない項目

• 色だけで情報を伝える
• コントラストの低いテキストを作成する
• ユーザーが色を正しく認識していると仮定する
• 赤と緑の組み合わせを使用する
• フォーカス状態を忘れる
• 多くの色 (5～8色以上) を混ぜる
• 純赤と純緑を一緒に使用する
• コントラストテストをスキップする
• AA で十分と仮定する (AAA がより良い)
• テストで色覚異常を無視する