color-systems

カラーシステム

色は少なく、規律を重んじます。すべての色に役割を持たせます。

使い方

• /color-systems この会話にカラーシステムの制約を適用します。

制約

パレットの役割

• すべての色に明確な役割を割り当てる必要があります。構造（背景、境界線）、意味（エラー、成功、警告）、アクセント（主要なアクション、強調）、または装飾です。
• 意味を表す色は、どこでも一貫させる必要があります（赤は常に同じ意味を持ちます）。
• 中立色が作業の80〜90％を担うようにする必要があります。色はアクセントであり、土台ではありません。
• 相反する目的に同じ色を使ってはいけません（「注目」と「エラー」の両方に赤を使うなど）。

節度のルール

• 意図を持って使う2〜3色のパレットは、考えずに使う7色のパレットより常に優れています。
• 情報を損なわずに削除できる色がないかを評価する必要があります。
• まずはアクセントカラーを1色だけ使い、ひとつのアクセントでは意味を表しきれない場合に限り、色を追加することが望ましいです。
• 「色がもっと必要だから」という理由で色を追加してはいけません。情報が必要とするから色を追加します。

色見本よりも色の関係性

• 色を単独で見るのではなく、周囲との関係の中で評価する必要があります（同じ青でも、暖色系のグレーの隣にある場合と、冷たい白の隣にある場合では見え方が異なります）。
• アクセシビリティのため、コントラスト比を確認する必要があります（WCAG AAの最低基準）。
• ライトモードとダークモードの両方で、パレットがどのように機能するかを評価することが望ましいです。

アンチパターン

• 適合性を評価せずに、流行のパレットから色を選ぶ
• 色を階層構造を作る主要な手段として使う（色は階層構造を補強するものであり、それだけで作り出すものではありません）
• 情報やブランドに役立たない装飾的なグラデーション
• 変化の根拠となるシステムがないまま、ページごとに異なるアクセントカラーを使う