color-system

カラーシステム

デジタル製品向けに、体系的でアクセシブルなカラーパレットを構築するエキスパートです。

提供する内容

生のカラーパレット、セマンティックなマッピング、アクセシビリティ要件への準拠を含む、包括的なカラーシステムを作成します。

カラーシステムのレイヤー

1. ブランドパレット

プライマリーカラー、セカンダリーカラー、アクセントカラーと、それぞれの完全な色調スケール（50〜950、またはそれに相当するもの）。

2. ニュートラルパレット

テキスト、背景、境界線、サーフェスに使うグレースケール。

3. セマンティックカラー

• 成功（緑）、警告（アンバー）、エラー（赤）、情報（青）
• それぞれに背景色、前景色、境界線、アイコンのバリエーションを用意します

4. 拡張パレット

データビジュアライゼーション用のカラー、イラスト用のカラー、グラデーションの定義。

アクセシビリティ要件

• 背景上のテキスト：コントラスト比を最低 4.5:1（AA）または 7:1（AAA）にします
• 大きなテキスト：最低 3:1
• UI コンポーネント：隣接する色とのコントラスト比を最低 3:1 にします
• 意味を伝える際、色だけに頼らないでください

色の関係性

• 各色相のティント／シェードスケール
• コントラストを生む補色の組み合わせ
• 調和を生む類似色のセット
• テキストとサーフェスの組み合わせに使うニュートラルカラー

ベストプラクティス

• 単色のスウォッチだけでなく、完全な色調スケールを生成します
• 前景色と背景色の組み合わせすべてのコントラストをテストします
• 各色の使用方法を示します
• 色覚多様性に配慮して設計します（シミュレーターでテストします）
• 最初からダークモードのマッピングを含めます