coastdigitalgroup/coastai-skills

アクセシブルカラーシステム

目的

アクセシブルカラーシステムスキルは、視覚的にまとまりがあり、機能的にアクセシブルなカラーパレットを作成するための方法論を提供します。美的な色選択を超え、段階的なスケール、コントラスト安全な組み合わせ、セマンティックな適用の構造化システムへと導き、視覚障害のあるユーザーを含むすべての人がコンテンツを知覚できることを保証します。

ユースケース

• 新規ブランドのデジタルカラープレゼンスの確立
• 既存ウェブサイトの色に関するアクセシビリティ問題の監査と修正
• ダーク/ライトモードテーマの設計
• フィードバック用セマンティックカラー (成功、エラー、警告) の定義

使用すべきでないケース

• アート主導の体験: 色が純粋に表現のために使用され、機能的な情報を伝えない場合（ただしアクセシビリティは依然として推奨されます）。
• ハードコードされたレガシーアプリ: 変数システムの実装を不可能にする技術的負債がある場合（代わりに個別対応に集中します）。
• 純粋に装飾的な要素: テキストやインタラクティブコンポーネントを含まない背景パターンなどの要素（WCAG 1.4.3 は適用されません）。

入力

アクセシブルカラーシステムを生成するには、以下が必要です。

1. プライマリブランドカラー: ブランドを識別するコアカラー（例: #0055FF）。
2. ニュートラルベース: グレー/ブラックの開始点（例: #1A1A1A、または着色されたニュートラル）。
3. アクセシビリティ目標: WCAG レベル AA (標準) または AAA (強化)。
4. 使用コンテキスト: 高密度ダッシュボードか、マーケティングランディングページか、ユーティリティファーストのアプリケーションか。

出力

1. カラースケール: プライマリ、セカンダリ、ニュートラル、セマンティックカラーのトーンパレット（通常10段階スケール）。
2. コントラストマトリックス: どの前景色がどの背景色で安全に使用できるかを示すマップ。
3. セマンティックマッピング: 色の役割を定義（例: --color-action-primary, --color-surface-muted）。
4. CSSカスタムプロパティ: プロダクション対応のCSS変数ブロック。オプションで color-mix() を使用し、各状態の色を手動で選ぶ代わりに単一のベーストークンからホバー/アクティブティントを導出します。

ワークフロー

1. トナルスケールの生成

ベースカラーをスケール（例: 50 から 900）に拡張します。一貫した明度ステップを維持するツールまたは式を使用します。HSL ではなく OKLCH 色空間で作業することで、色相間でより知覚的に均一な明度ステップが得られ、テスト前のコントラスト予測が容易になります。ヒント: Primary 500 または 600 が「ブランド」バージョンであることを確認してください。

2. ニュートラルの定義

ニュートラルスケールを作成します。ニュートラルに少量（例: 2-5%）のプライマリカラーを「着色」して、よりまとまりのある外観にすることを検討してください。

3. セマンティックロールの確立

色を機能的な役割に割り当てます。

• Action: ボタン、リンク、アクティブ状態用のプライマリカラー。
• Surface: 背景、カード、区切り線（ニュートラル）。
• Content: テキストとアイコン（高コントラストニュートラル）。
• Status: Success (緑)、Warning (黄/オレンジ)、Error (赤)、Info (青)。

4. コントラスト検証の実行

WCAG 計算式 (1.4.3, 1.4.11) を使用して組み合わせをテストします。

• 通常テキスト: AA で 4.5:1、AAA で 7:1。
• 大きなテキスト (>18pt): AA で 3:1、AAA で 4.5:1。
• UI コンポーネント/アイコン: AA で 3:1 (非テキストコントラスト、1.4.11)。
• フォーカスインジケーター: 隣接色に対して 3:1、かつインジケーターがスティッキーヘッダーや他のコンテンツで隠されてはならない (WCAG 2.2 SC 2.4.11、フォーカスが隠れていないこと)。

5. 組み合わせルールの作成

どのテキスト色がどの背景で使用できるかを文書化します。例: 白色テキスト (#FFFFFF) は Primary 600 以上でのみ安全に使用できます。

決定ルール

• 読みやすさ優先: 機能（可読性）が常に美学に優先します。ブランドカラーがテキストに薄すぎる場合は、テキストには暗いバリアントを使用し、装飾要素にはブランドカラーを維持します。
• 色単独の回避: 情報を伝える唯一の手段として色に依存しないでください（例: エラーメッセージにはアイコンやテキストラベルを含めます）。
• 一貫した明度: 同じスケールレベルで異なる色相間の明度値を類似させます（例: Red 500 と Blue 500 は同程度の知覚輝度を持つべき）。

制約

• レスポンシブ性: モバイル画面ではグレアや低品質ディスプレイが視認性を低下させる可能性があるため、色はコントラストを維持する必要があります。
• アクセシビリティ: フォーカスインジケーターが可視で隠されないことを求める 2.4.11 要件を含め、すべての機能要素に対して少なくとも WCAG 2.2 AA 基準を満たす必要があります。
• 階層: 色の彩度とコントラストを使用して視線を誘導します。より重要な要素（CTA）は視覚的に高い重みを持つべきです。

よくある失敗パターン

• 不十分なコントラスト: 白背景に明るい灰色テキスト、または薄いブランド色に白テキストを使用する。
• 色の振動: 視覚的な負担を引き起こす高彩度の色（赤と緑など）の組み合わせ。
• 色の多用: ブランドアイデンティティを希薄化し階層を混乱させる「虹」効果の作成。
• セマンティックの誤用: 装飾要素に「エラーレッド」を使用し、ユーザーに不安を与える。

検証基準

• すべての機能的なテキスト要素のコントラスト比が、背景に対して少なくとも 4.5:1 であること。
• UI コンポーネント（境界線、アイコン）のコントラストが少なくとも 3:1 であること。
• システムにプライマリカラーとニュートラルカラーの明確なスケールが含まれていること。
• 情報が色のみで伝えられることがないこと。
• システムが移植性のために CSS カスタムプロパティを使用して文書化されていること。