このページの中身
色彩
色は伝える手段の1つであって、唯一の手段ではありません。色に頼らずに伝わるかを、いつも一緒に確かめます。
図の中身を文字で読む
- 色彩で決めること 色で何を伝え、何に頼らないか
- 先に決まっていること 基礎
- 言い分ける 色の3属性 色空間
- 決める 配色の型 役割で色を持つ
- 確かめる コントラストと色覚
- ここが効く先 アクセシビリティ デザインスタイル
このページから降りる#
色の3属性色相・彩度・明度で言い分ける
色空間なぜ OKLCH を使うのか
配色の型色相の関係で決める業種別の配色実例
コントラストと色覚読めるかどうかは明度で決まる
役割で色を持つ赤ではなくエラーと名づける
この分野が答えになる場面#
全15件。ほかの分野もまとめて引くなら逆引きへ。
この分野が答えになる場面困り事から引く15 件
| こういうとき | 答え | いますぐ | 詳しくは |
|---|---|---|---|
| 色が決まらない、多すぎる | 地・文字・強調の3役だけ先に決める。強調は1色で、面積は画面の5%以下。 | コードを開く | 配色の型 |
| 配色の組み方が分からない | 1つの色相を決め、明度で5〜9段の階段を作る。色相を増やすのは、意味が増えるときだけ。 | コードを開く | 配色の型 |
| ブランドカラーが強すぎて画面が持たない | 面で使うのをやめる。線・小さい面積・文字だけに使い、地は無彩色に近づける。 | コードを開く | 配色の型 |
| 文字が背景に沈んで読めない | 明度差を広げる。彩度や色相をいじっても比率は上がらない。本文4.5:1、大きい文字とUI部品は3:1。 | コードを開く | コントラストと色覚 |
| 補助テキストをどこまで薄くしてよいか | 4.5:1を下回らない範囲まで。白地なら #767676 が4.54:1、#595959 が7.00:1。これより薄いと割る。 | コードを開く | コントラストと色覚 |
| 写真の上の文字が場所によって読めない | 写真側にスクリムを敷くか、文字側に不透明のパネルを置く。文字色だけで解こうとしない。 | コードを開く | コントラストと色覚 |
| 半透明の要素の上の文字を測りたい | CSSの値ではなく、表示された実画素で測る。開発者ツールで拾うか、スクリーンショットから採る。 | コードを開く | コントラストと色覚 |
| ダークモードで色が破綻する | 色を反転させない。役割ごとの変数を2組持ち、暗い地では彩度を10〜20%落とす。 | コードを開く | 役割で色を持つ |
| ダークモードで影が効かない | 暗い地では影が見えない。影の代わりに面の明度を上げて手前を表す。 | コードを開く | 役割で色を持つ |
| 色の変数名をどう付けるか | 値ではなく役割で持つ。--color-brand-500 ではなく --color-text-muted や --color-surface。 | コードを開く | 役割で色を持つ |
| 状態（成功・警告・エラー）の色を決めたい | 色だけで区別しない。アイコンか文言を必ず併用する。色は補助と考える。 | コードを開く | 役割で色を持つ |
| 赤と緑で区別したが伝わっているか不安 | 日本人男性のおよそ20人に1人が区別しにくい。形と文言を足せば、色が伝わらなくても通じる。 | コードを開く | コントラストと色覚 |
| HSLで明度を揃えたのに揃って見えない | HSLの明度は知覚と一致しない。OKLCHを使うと、同じLの色が同じ明るさに見える。 | コードを開く | 色空間 |
| グレーが濁って見える | 複数の色相が混ざっている。地の色相に彩度を少しだけ残した1系統でグレーを作り直す。 | コードを開く | 色の3属性 |
| 印刷したら色が違った | 画面はRGB、印刷はCMYK。彩度の高い色ほど落ちる。重要な色は印刷見本で確かめる。 | コードを開く | 色空間 |
他の分野へ#
基礎 ／ タイポグラフィ ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索