アクセシブルカラートークン — WCAG準拠カラーシステム

アクセシブルなカラートークンの設計

デザイントークンシステムを構築する際、アクセシビリティは後付けではありません。コントラスト要件をトークン構造に直接組み込むことで、これらのトークンで構築されたすべてのコンポーネントがWCAGガイドラインを満たすことが保証されます。

On-Colorパターン

最も効果的なパターンは、すべての背景カラーにコントラストが保証された前景カラーを対にします：

:root {
  --colors-primary: #2563eb;
  --colors-on-primary: #ffffff;      /* 8.6:1 ratio */

  --colors-surface: #f4f4f5;
  --colors-on-surface: #18181b;      /* 16.5:1 ratio */

  --colors-error: #dc2626;
  --colors-on-error: #ffffff;        /* 4.6:1 ratio */
}

WCAGコントラスト要件

• AA通常テキスト（4.5:1）： 本文テキスト、ラベル、入力値
• AA大テキスト（3:1）： 見出し18px以上またはボールド14px以上
• AAA通常テキスト（7:1）： 強化されたアクセシビリティ目標

インタラクティブ状態トークン

ホバー、フォーカス、無効状態も忘れないでください。それぞれにコントラスト検証済みのトークンペアが必要です。

自動検証

すべてのトークンペアをWCAG閾値に対して検証するCIステップを含めてください。axe-coreやカスタムスクリプトがトークンファイルを解析し、4.5:1を下回るペアをフラグできます。