色の3属性
色は3つの軸でできています。読めるかどうかを決めるのは、そのうち明度だけです。
図の中身を文字で読む
- 色相 色味の種類。0〜360度の円環
- 0 120 240 360
- 彩度 鮮やかさ。0で無彩色になる
- 0（無彩色＝地に使う） 高彩度は1点だけに
- 明度 明るさ。読めるかどうかはここで決まる
- 文字と背景のコントラストは、色相でも彩度でもなく「明度差」で決まる。彩度を上げても読みやすくはならない。
ひと目で#
- 色相
- 赤、青、緑といった色味の種類。0〜360度の円環
- 彩度
- 鮮やかさ。0で無彩色（グレー）になる
- 明度
- 明るさ。読めるかどうかはここで決まる
- クロマ
- 知覚上の色味の強さ。彩度と違い、明度を変えても基準がずれない
- ティント／シェード／トーン
- 白、黒、灰を混ぜた階調
- 同時対比
- 同じ色でも、隣の色によって違って見える現象
使い分け#
| こうしたい | 動かす軸 |
|---|---|
| 色味はそのままで落ち着かせたい | 彩度を下げる |
| 明るくしたい | 明度を上げる。彩度ではない |
| 文字が読みにくい | 明度差を広げる。彩度を動かしても比率は変わらない |
| 系統色を1か所で変えたい | 色相を変数に持つ |
| 背景の薄い塗り | ティント。白寄り |
| hover で押した感じを出す | シェード。黒寄り |
| 無効状態を後ろへ下げたい | トーン。彩度を落とす |
間違えやすいところ#
- 無効状態をシェード（濃く）で作る濃くなるとかえって目立つ。トーンで彩度を落とす
- 彩度を上げてコントラストを取る比率はほとんど変わらない
- ダークモードで彩度をそのまま使う暗い背景の上でにじむ。落とす
- グレーを完全な無彩色にするブランドの色相を数パーセント混ぜると、全体がなじむ
- 色を単独で選ぶ同時対比がある。必ず隣に来る色と並べて確かめる
図の中身を文字で読む
- 読みにくい文字を直すのは、彩度ではなく明度
- #ba7336 白地に 3.75:1
- アクセント色の文字 hsl(28 55% 47%) 通常文字の 4.5:1 に届かない
- ✕ 彩度を 55%→90% に上げる ○ 明度を 47%→37% に下げる
- 鮮やかにはなった #e4710c 読める濃さになった #925b2a
- 3.75:1 → 3.15:1 比は上がらない 3.75:1 → 5.60:1 4.5:1 を満たす
- コントラスト比は相対輝度＝明度の差で決まる。彩度と色相を動かしても、比はほとんど動かない。
- 目立たせたいときに動かすのが彩度と面積、読ませたいときに動かすのが明度。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、工房のサイトで「ブランドカラーをもっと鮮やかに」と言われました。#ba7336 の彩度を 55% から 90% へ上げ、#e4710c にします。画面は確かに華やぎました。翌週、別の人から「本文中のリンクが読みにくい」と連絡が来ます。
測ると、白地に対して 3.75:1 だった比が 3.15:1 へ下がっていました。鮮やかにするほど、明度は中央へ寄っていきます。直すのは彩度ではありません。同じ色相と彩度のまま明度を 47% から 37% へ落とすと #925b2a になり、5.60:1 で通ります。
動かす軸を取り違えると、この往復が何度も起きます。目立たせたいときに動かすのは彩度と面積、読ませたいときに動かすのは明度です。
図の中身を文字で読む
- 読みにくい文字を直すのは、彩度ではなく明度
- #ba7336 白地に 3.75:1
- アクセント色の文字 hsl(28 55% 47%) 通常文字の 4.5:1 に届かない
- ✕ 彩度を 55%→90% に上げる ○ 明度を 47%→37% に下げる
- 鮮やかにはなった #e4710c 読める濃さになった #925b2a
- 3.75:1 → 3.15:1 比は上がらない 3.75:1 → 5.60:1 4.5:1 を満たす
- コントラスト比は相対輝度＝明度の差で決まる。彩度と色相を動かしても、比はほとんど動かない。
- 目立たせたいときに動かすのが彩度と面積、読ませたいときに動かすのが明度。
確認する#
- 「読みにくい」への対処が、彩度ではなく明度の変更になっている
- 面用と文字用でアクセントを2つ持ち、文字用のほうが暗い
- 無効状態がシェード（濃く）ではなくトーン（彩度を落とす）で作られている
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字5 語
語の名前から引くなら用語索引へ。
- 色
- 光の波長分布が視覚に引き起こす知覚。デザインでは色相・彩度・明度の3属性で扱う。
- ティント
- シェード
- トーン
- 色温度
- 光の色味を絶対温度で表した指標。低いほど赤みを帯び、高いほど青みを帯びる。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
複数の色相が混ざっている。地の色相に彩度を少しだけ残した1系統でグレーを作り直す。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は色を決めるにまとめてある。逆引きには全188件。
アクセントを作る#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 色と階段
つまみは色相・彩度・明度の3本です。動かした色は白地のカードに即時に載り、面・図形用の --color-accent と、明度だけを下げて 4.5:1 に届かせた文字用の --color-accent-text が、実測の比と一緒に並びます。カードの地は、測る相手に合わせて白（#ffffff）で固定しています。
:root {
--color-accent: #ba7336; /* 白地に 3.75:1 面・図形用 */
--color-accent-text: #965d2c; /* 白地に 5.39:1 文字とリンク用 */
}この道具は JavaScript で動きます。無効の場合は、白地に 4.5:1 を満たす暗さまで明度を下げた色を文字用に使ってください。