業種別の配色実例
型を選んだあとに残る仕事は、その型を実際のトークンと面積に落とすことです。3件を、値と実測値ごと置きます。
3件とも、地・面・アクセントの3層に、状態の色を足しただけの構成です。色数を増やして解決した箇所はひとつもありません。
図の中身を文字で読む
- 3件とも、地がいちばん広く、アクセントがいちばん狭い
- 珈琲店 単色（琥珀） 夜の店。暗い地に、灯りの色をひとつ
- 地 #17120f 面 #241d18 #c8813a
- 整体室 類似色（青緑） 淡い地と、締めに使う深い面
- 地 #e8eeef 面 #dde5e7 #24343a #417280
- 会計事務所 単色＋無彩色（金茶） 紙のような白。色は罫と数字だけ
各件の末尾に、値の組ごとのコントラスト比を実測値で載せています。数字はこの資料の道具（コントラストと色覚の「測ってみる」）で1組ずつ測ったものです。
珈琲店｜暗い地に、灯りの色をひとつ#
夜だけ開ける自家焙煎の店です。昼の写真がなく、店内も暗い。明るい地に置くと、写真だけが黒い四角として浮きます。地のほうを店に寄せます。
型は単色で、琥珀の色相（22〜33度）から一歩も出ません。緑や青を足したくなる場面は、彩度と明度で作り分けます。
このコードで動いている見本です
| 組み合わせ | 地 #17120f | 面 #241d18 |
|---|---|---|
--color-text | 14.22:1 | 12.71:1 |
--color-text-muted | 6.98:1 | 6.24:1 |
--color-accent-text | 8.45:1 | 7.56:1 |
--color-accent（図形は3:1） | 5.89:1 | 5.27:1 |
--color-success-text | 9.85:1 | 8.81:1 |
--color-danger | 6.89:1 | 6.16:1 |
ボタンは地の色 #17120f をアクセント面 #c8813a の上に抜いて 5.89:1 です。暗いテーマで白抜きにすると、面が眩しくなります。
整体室｜淡い青緑と、締めに使う深い面#
寒色で静かにまとめたい業種です。ただし淡い色だけで進めると、料金や予約の行き先が地に埋もれます。同じ色相の深い面を1枚だけ持ち、そこに料金と予約を置きます。
型は類似色です。地から文字までが189〜200度に収まり、状態の緑（141度）だけが外へ出ます。外へ出るのは、色で意味を変える必要がある1色だけです。
このコードで動いている見本です
| 組み合わせ | 地 #e8eeef | 面 #dde5e7 |
|---|---|---|
--color-text | 10.08:1 | 9.26:1 |
--color-text-muted | 5.21:1 | 4.78:1 |
--color-accent-text | 6.01:1 | 5.52:1 |
--color-accent（図形は3:1） | 4.54:1 | 4.17:1 |
--color-success-text | 5.25:1 | 4.82:1 |
--color-danger | 6.06:1 | 5.56:1 |
深い面の上は別に測ります。--color-on-panel が 11.00:1、--color-on-panel-accent が 7.23:1。ボタンは白抜きで 7.05:1 です。
淡い地では、補助の文字が下限に近づきます。--color-text-muted は面の上で 4.78:1 しかありません。ここからさらに薄くすると割ります。
会計事務所｜白い紙面に、罫と数字だけ色を残す#
紙の資料に近い見え方が要る業種です。地は純白のままにし、色を持たせるのは罫線と金額だけにします。面積で言えば1%あるかどうかです。
型は単色＋無彩色です。文字は無彩色の墨、色は金茶（34〜42度）だけ。金茶を面で使わないので、彩度を落とさずに済みます。
このコードで動いている見本です
| 組み合わせ | 地 #ffffff | 面 #f5f2eb |
|---|---|---|
--color-text | 17.40:1 | 15.57:1 |
--color-text-muted | 7.00:1 | 6.27:1 |
--color-accent-text | 6.80:1 | 6.08:1 |
--color-accent（図形は3:1） | 4.22:1 | 3.78:1 |
--color-success-text | 6.54:1 | 5.85:1 |
--color-danger | 6.70:1 | 5.99:1 |
ボタンは白抜きで 6.80:1 です。金額の色 --color-accent-text は本文と同じ大きさで使うので、罫の色 --color-accent より一段暗くしてあります。
3件に共通していること#
- 色相は1つか2つだ。3つ目が要るのは、意味が増えるときだけだ
- 面と文字でアクセントを分けている。
--color-accentは3:1、--color-accent-textは4.5:1 が目安だ - 状態の色（成功・エラー）は型の外に出す。ここだけは調和より区別を優先する
- 数値は組ごとに測る。地で足りていても、面の上で割ることがある