藍 — 読ませる色
リンク・強調文字・見出しラベル。京都の藍染につながる色でもあります。#165e83
配色の設計
このサイトの色は、感覚ではなく理論と数値で決めています。 その設計をそのまま公開します。お客様のサイトも、同じ手順で配色を設計します。
骨格 — 藍を軸にした「補色の両隣」
とわラボの配色は3色で組んでいます。藍（読ませる色）・金（見せる色）・朱（締めの一点）。 色相環の上では、藍（205°）の真向かいに橙（25°）があり、その両隣にあたる 金（46°）と朱（5°）を使っています。 これはスプリットコンプリメンタリー配色と呼ばれる型で、 補色をそのままぶつけるより穏やかに、それでいて対比のきいた画面になります。
役割 — 色は「何をする色か」で選ぶ
金 — 見せる色
ロゴ・ボタン・図形・線。ブランドの顔。白地の文字には使いません（読めなくなるため）。#c9a227
朱 — 締めの一点
ハンコの色。強調したい一点だけに使い、多用しません。#b7332b
明暗 — 色相は固定し、トーンだけ動かす
ヘッダーの「配色」ボタンで明るい配色と暗い配色を切り替えられます。 切り替えても使っている色相（藍・金・朱）は変わりません。動かしているのはトーン（明度と彩度）だけです。
明るい配色では、金の文字は白地に沈んで読めないため、読ませる色を藍に譲ります。 暗い配色では逆に金がいちばん映えるので、読ませる色も明るめの金に戻します。 同じ人格のまま、昼の顔と夜の顔を持つ——これがこの配色の設計です。
明るい配色（昼）
本文は墨色で読ませ、リンクや強調は藍。
ボタンと図形は金のまま。
朱は一点だけに。
暗い配色（夜）
本文は生成り色で読ませ、リンクや強調は明るい金。
図形の金と響き合う。
朱はやわらげて一点だけに。
読みやすさの数値根拠
文字色はWCAG（ウェブアクセシビリティの国際基準）のコントラスト比で検証しています。 基準は本文4.5:1以上。本サイトの文字色はすべて6:1以上を確保しています。
| 用途 | 色 | 背景 | コントラスト比 |
|---|---|---|---|
| 明・読ませる藍 | #165e83 | 白 / 生成り | 7.1:1 / 6.6:1 |
| 明・藍のホバー | #0f4666 | 白 | 10.1:1 |
| 暗・読ませる金 | #e5c968 | 墨 #14130f | 11.4:1 |
| 暗・金のホバー | #f0da88 | 墨 #14130f | 13.4:1 |
| 金ボタン＋墨文字 | #c9a227地 | — | 7.7:1 |
白地の黄色は、明るくするほど読めなくなります。暗い背景の黄色は、明るくするほど読みやすくなります。 この非対称があるため、明るい配色の文字は藍へ、暗い配色の文字は明るい金へ、と振り分けています。