color-accessibility

色のアクセシビリティ

目次

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

概要

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

使用する場面

• カラーパレットの作成
• データの可視化
• インターフェースデザインのテスト
• ステータスインジケーターとアラート
• フォームの検証状態
• チャートとグラフ

クイックスタート

最小限の動作例：

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/ ディレクトリを参照してください。

ガイド	内容
色のコントラスト基準	色のコントラスト基準
色覚特性のシミュレーション	色覚特性のシミュレーション
アクセシブルな色の使い方	アクセシブルな色の使い方
テストと検証	テストと検証

ベストプラクティス

✅ 推奨事項

• コントラスト比を最低 4.5:1 にします（WCAG AA）
• 色覚シミュレーターでテストします
• 色と併せてパターンやアイコンを使用します
• 状態は色だけでなく、テキストでも示します
• 色覚特性のある実際のユーザーにテストしてもらいます
• デザインシステムに色の使い方を記録します
• アクセシブルなカラーパレットを選びます
• 順序のあるデータには段階的な色を使用します
• すべての色の組み合わせを検証します
• フォーカスインジケーターを含めます

❌ 非推奨事項

• 情報を伝えるために色だけを使う
• コントラストの低いテキストを作成する
• ユーザーが色を正しく認識できると思い込む
• 赤と緑の組み合わせを使う
• フォーカス状態を忘れる
• 色を使いすぎる（5～8 色超）
• 純粋な赤と純粋な緑を同時に使う
• コントラストのテストを省略する
• AA で十分だと思い込む（AAA のほうが望ましい）
• テストで色覚特性を考慮しない