ユーザにとって意味のある色を決める。
| 役割 | 名称 |
|---|---|
| 背景色 | ベースカラー。 |
| 文字色 | メインカラー。 |
UIの状態によって色を変える。
| 場合 | 色パターン |
|---|---|
| 平時 | ベース＆メインカラー |
| :focus(),:hover() | アクセントカラー１ |
| :checked(),:selected() | アクセントカラー２ |
各色はルールに従って決まる。
| 役割 | ルール |
|---|---|
| 背景色 | ユーザに入力させる |
| 文字色 | 白／黒のうち見やすいほう。または文字色の反対色にする |
文字色は白／黒いずれかにする。
| 場合 | ルール |
|---|---|
| :focus(),:hover() | 背景色と文字色を入れ替える＋影（影の色は背景色＋文字色の中間） |
| :checked(),:selected() | 背景色と文字色を入れ替える |