色を決める

地・文字・強調の3役だけ先に決める。強調は1色で、面積は画面の5%以下。配色の型

:root {
  --color-bg: #fbfaf8;
  --color-text: #1c1a17;
  --color-accent-text: #a1601f;
}

1つの色相を決め、明度で5〜9段の階段を作る。色相を増やすのは、意味が増えるときだけ。配色の型

:root {
  --color-bg: #fbfaf8;
  --color-surface: #f3efe8;
  --color-text: #1c1a17;
  --color-text-muted: #6f6a62;
  --color-accent: #b4713a;
}

面で使うのをやめる。線・小さい面積・文字だけに使い、地は無彩色に近づける。配色の型

.brand { color: var(--color-accent-text); }
.brand-bg { background: var(--color-bg); }

明度差を広げる。彩度や色相をいじっても比率は上がらない。本文4.5:1、大きい文字とUI部品は3:1。コントラストと色覚

body { color: var(--color-text); background: var(--color-bg); }
/* 本文4.5:1以上 */

コントラストと色覚で手順を見る

4.5:1を下回らない範囲まで。白地なら #767676 が4.54:1、#595959 が7.00:1。これより薄いと割る。コントラストと色覚

.muted { color: var(--color-text-muted); } /* #6f6a62 = 5.1:1 */

写真側にスクリムを敷くか、文字側に不透明のパネルを置く。文字色だけで解こうとしない。コントラストと色覚

<div class="hero"><p class="hero__t">見出し</p></div>

.hero {
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent),
              url(photo.jpg);
  color: #fff;
}

CSSの値ではなく、表示された実画素で測る。開発者ツールで拾うか、スクリーンショットから採る。コントラストと色覚

開発者ツールのカラーピッカーで実画素を拾う

コントラストと色覚で手順を見る

色を反転させない。役割ごとの変数を2組持ち、暗い地では彩度を10〜20%落とす。役割で色を持つ

<!-- prefers-color-scheme で変数を切り替える -->

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171614;
    --color-text: #e9e6e1;
    --color-accent-text: #d99356;
  }
}

暗い地では影が見えない。影の代わりに面の明度を上げて手前を表す。役割で色を持つ

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

値ではなく役割で持つ。--color-brand-500 ではなく --color-text-muted や --color-surface。役割で色を持つ

:root {
  --color-text: #1c1a17;
  --color-text-muted: #6f6a62;
  --color-surface: #f3efe8;
}

色だけで区別しない。アイコンか文言を必ず併用する。色は補助と考える。役割で色を持つ

.alert--error {
  color: var(--color-danger);
  border-inline-start: 4px solid var(--color-danger);
  padding-inline-start: var(--space-3);
}

日本人男性のおよそ20人に1人が区別しにくい。形と文言を足せば、色が伝わらなくても通じる。コントラストと色覚

.status--ok::before { content: "✓ "; }
.status--ng::before { content: "✕ "; }

HSLの明度は知覚と一致しない。OKLCHを使うと、同じLの色が同じ明るさに見える。色空間

:root {
  --color-accent: oklch(62% 0.12 55);
  --color-accent-text: oklch(52% 0.14 55);
}

複数の色相が混ざっている。地の色相に彩度を少しだけ残した1系統でグレーを作り直す。色の3属性

:root {
  --color-bg: #fbfaf8;
  --color-text-muted: #6f6a62;
  --color-border: #d8d2c7;
}

画面はRGB、印刷はCMYK。彩度の高い色ほど落ちる。重要な色は印刷見本で確かめる。色空間

@media print {
  body { background: #fff; color: #000; }
  * { box-shadow: none !important; }
}