taste-color

taste-color

色はインターフェースで最も感情に訴える要素であり、エージェントに最も乱用される要素でもあります。解決策は構造です。小さなパレットを、規律を持って使います。

1. パレットの設計（60-30-10）

完成されたインターフェースのパレットは、次の要素で構成されます。

• 60% ニュートラル — 面とテキストです。暖色系か寒色系のどちらか一方の色調にそろえます。2～4種類の面（bg、panel、raised）＋3段階のテキスト（primary/secondary/muted）を用意します。
• 30% 構造 — 境界線、細線、区切り線です。色ではなく、色味を帯びたニュートラルを使います。
• 10% アクセント — 役割を持つ、彩度の高い色を1色だけ使います。主要なCTA、リンク、アクティブ状態、1つのデータ系列に使います。2色目のアクセントを使う場合は、明確に異なる役割（例：ステータス表示用の成功を示す緑）を持たせ、画面を占める割合を2%未満にします。

1つのビューポートで「意味のある」色が3色を超えると、ページが伝えるメッセージはなくなります。アクセントがあちこちに現れると、何も指し示さなくなります。

2. 色のランプを作る（RGBではなくOKLCH）

• すべての色のランプをOKLCH（知覚的に均等な明度）で作ります。HEX値同士を何も考えずに補間してはいけません。
• ニュートラル：9～11段階（50～950）で、彩度はほぼ0にします。アクセント：9～11段階で、色相を固定し、50では彩度を低く、500～600で最大にし、900に向けて再び下げます。
• ページで最もよく使われる2つの値は、アクセントの500～600段階（ボタン）と、ニュートラルの50～100段階（背景）です。
• スタックが対応している場合は、コード内でOKLCHに変換します。対応していない場合はHEXを使いますが、OKLCHから値を算出します。

3. コントラスト（WCAG 2.2 — 正確な数値）

要素	最小比率
本文テキスト（通常）	4.5:1
大きなテキスト（≥24px、または太字で≥18.66px）	3:1
UI コンポーネント（境界線、アイコン、入力欄の縁）	隣接する要素に対して3:1
フォーカスインジケーター	隣接する要素に対して3:1、最小2px

• 目視で判断してはいけません。出荷前に、コントラスト関数（WCAG相対輝度の計算式）またはツールで計算します。
• 「高級感」のある低彩度の見た目は、低コントラストの言い訳にはなりません。彩度を下げるのは背景であり、テキストではありません。
• アクセントボタン上のテキスト：白いテキストを使う場合は、アクセントの輝度比が約4.6:1以下になる必要があります。必ず確認してください。明るいアクセントには、暗いテキストが適切なことがよくあります（#FFD100の黄色＋インク色のテキストは正解、黄色に白いテキストは不合格です）。
• 不透明度が0.5以下のプレースホルダーテキストは装飾的な要素です。プレースホルダーラベルだけをラベルにしてはいけません（フローティングラベル、常時表示されるラベルを使います）。

4. セマンティックマッピング（名前に役割を持たせる）

• --color-surface、--color-surface-raised、--color-text、--color-text-muted、--color-border、--color-accent、--color-success、--color-danger、--color-warningを、必要に応じてそれぞれ3～4段階用意します（例：--color-danger-bg、--color-danger-border、--color-danger-text）。
• 意味が名前からわかるようにします。--color-red-700ではなく、--color-danger-textとします。
• 危険、成功、警告の色はステータス表示専用です。装飾に使ってはいけません。
• ダークモードでは、セマンティックな役割を再マッピングします（--color-surfaceを反転させます）。コンポーネントに生の色を散りばめた第2のパレットを作ってはいけません。

5. 色覚多様性への配慮（安全な組み合わせをデフォルトに）

• 赤と緑だけで情報を表現してはいけません。形、位置、パターン、ラベルを追加します：✓ / ✕、↑/↓、実線/破線。
• 青紫は最も安全な色相です（1型2色覚と2型2色覚により配慮されています）。オレンジはニュートラルに対して最も強い安全なアクセントです。
• データ可視化では、虹色のデフォルト設定ではなく、色覚多様性に配慮したカテゴリカルな配色セット（例：Okabe-Ito）を使います。

6. チェックリスト（該当したらページを不合格にする項目）

• 隣り合うテキストと背景の組み合わせに、通常のテキストで4.5:1未満のものがある。
• 1つのビューポートで、意味を持つアクセントカラーが複数使われている。
• 単色で十分なのにグラデーションを使っている。
• 成功と失敗を示す唯一の手がかりとして、赤と緑を使っている。
• トークンではなく、コンポーネントに生のHEX値を使っている。
• 黄色または淡いアクセントの上に白いテキストを載せている。
• 実際には同じ色を暗い背景に載せただけの「ダークテーマ」になっている（コントラストを再計算する必要があります）。

1つのアクセントを1つのビューポートで2回使うと、意味が伝わります。同じアクセントをあちこちに使うと、ノイズになります。