ライトモードの背景色：#FFFFFFでは足りない理由と、使うべき8色
真っ白な画面には奥行きを置く場所がありません。代わりに使いたいライトモードの背景色(白いカードの後ろに #F2F2F7)、やわらかいテキスト色、深いアクセント、そして開発者に渡す8つのコードを紹介します。
最適なライトモードの背景色は #FFFFFF ではありません。ページを #F2F2F7 のようなやわらかいグレーにして、白はその上に載るカード用に取っておきましょう。そうすれば、サーフェスが浮き上がる土台ができます。ここでは、真っ白な画面が失敗する理由、3つの対処法、そして開発者に渡す8色を紹介します。
なぜ真っ白な画面はのっぺりするのか
ほとんどのデザイナーは、ライトモードをすべて白で塗ることから始めます。どのデザインツールでも初期の塗りは白で、どのブラウザでも初期の背景は白。だから中立に感じます。でも違います。奥行きを見せる手段を奪う、唯一の選択なのです。
カードは、載っているページと違って見える必要があります。両方が #FFFFFF だと、分ける手段は枠線か影しか残らず、この2つがすべての仕事を背負うことになります。カードを数枚足せば、画面は輪郭線だらけのグリッドになります。
ダークモードはすでにこれを解決しています。そこでは明るいサーフェスほど高い層を意味し、各レイヤーは下のレイヤーより一段明るくなります。そのランプについてはダークモードのカラーシステム、パレットの残りについてはダークモードのデザインで解説しています。ライトモードには白より明るい段がないので、別の手が必要です。床を下げるのです。
対処法1：ページを #F2F2F7 から始める
ページもカードも #FFFFFF
ページ #F2F2F7、カード #FFFFFF
#F2F2F7 は、iOS がグループ化リストの背後に敷くグレーです。ライトモードでの Apple のシステムグレー6で、Apple 自身もグループ化されたテーブルビューにはグループ背景色を使うよう案内しています。典型例は「設定」アプリ。淡いグレーのページに、白い行が並びます。
この1つの変更で、床と天井ができます。ページが床、カードやシートが天井で、その間の差は線を1本も引かなくても見えます。
適用する場所：
- ページの背景。カード、リスト、セクションのある画面すべての背後。
- グループ化リストと設定画面。行は白、すき間はグレー。
- 白いカード内の入力欄。ページのグレーにすると、くぼんで見えます。
画面がカードのない1本の長い白い記事なら、白で問題ありません。このルールは、サーフェスで構成されたインターフェース向けです。
対処法2：持ち上げるのは影に任せる
ダークモードでは、高さは明るい色で表します。ライトモードではサーフェスは白のまま、代わりに影が大きくなります。静止したカードには小さくやわらかい影、その上に浮くメニューやダイアログには、より大きくやわらかい影を付けます。
自然に見せるコツは2つ：
- 影は純黒ではなく、インク色で染める。 テキスト色の影(この投稿では深いバイオレットの #1B1530)は、インターフェースの一部に見えます。純黒は汚れに見えます。
- 大きいほど高い、にする。 小から大まで4段階の短いスケールを作り、各段階に役割(カード、浮いたカード、メニュー、ダイアログ)を割り当てます。5つ目は決して作らないこと。
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
これが機能するのはグレーのページのおかげです。白いページではやわらかい影はほぼ見えず、濃い影や枠線で補うことになります。#F2F2F7 の上なら、薄い影で十分です。
対処法3：黒をやわらげ、アクセントを深くする
白や白に近いページ上の純粋な #000000 のテキストは、必要以上にきつく、ほかの色まで弱く見せてしまいます。Material 3 は、ライトのテキストを一段やわらかく設定しています。
テキスト
補助テキスト
無効、38%
- #1D1B20 はテキスト用。Material 3 の on-surface 色で、わずかにバイオレットを含んだ黒に近い色。白にもグレーにもなじみます。
- #49454F は、キャプション、補助行、タイムスタンプなどの補助テキスト用。十分読みやすく、本文よりはっきり控えめです。
- 同じインクの38% は、無効状態のラベルとアイコン用。白の上では #A9A8AA になり、Material はまさにこの不透明度を使います。無効テキストは低コントラストこそが狙いの唯一の場所で、WCAG でも対象外です。
アクセントには、逆の補正が必要です。暗い画面で映えた明るいブランドカラーは、白の上では消えてしまいます。
白の上の明るいアクセント
白の上の深いアクセント
#BB86FC は、Material のダークテーマ用ベースライン紫です。白の上ではほぼ消えてしまい、ボタンやリンクとして読ませたいものには問題です。
#6200EE は、Material のライトテーマ用ベースライン紫で、同じファミリーのまま十分に深く、存在感があります。ライトテーマを作るときは、ダークテーマのアクセントを使い回さないこと。同じ色相から、より深い段を選びましょう。
ライトモードの8色
チップをタップするとコードをコピーできます。
| 役割 | 値 | 用途 |
|---|---|---|
| ベース | #F2F2F7 | ページ、カードやグループ化リストの背後 |
| カード | #FFFFFF | カード、シート、メニュー、行 |
| 区切り線 | #E5E5EA | 行間の線。入力欄の枠線には使わない |
| テキスト | #1D1B20 | 見出しと本文 |
| 補助 | #49454F | キャプション、補助テキスト、タイムスタンプ |
| 無効 | #A9A8AA | 無効状態のラベルとアイコン(38%のテキスト) |
| プライマリ | #6200EE | ボタン、リンク、選択状態 |
| エラー | #B00020 | エラーのテキスト、枠線、アイコン |
#E5E5EA は iOS のシステムグレー5で、区切り線に向いているのは、区切り線は気づかれれば十分で、読まれる必要がないからです。入力欄の枠線にはそれ以上が必要です。代わりに使う枠線の色は、プレースホルダーとラベルで紹介しています。
これを開発者に渡そう
同じ8色を CSS カスタムプロパティにしたものです：
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
ダークテーマも出すなら、これらすべての名前に @media (prefers-color-scheme: dark) の下で2つ目の値を与えます。ダークモードのトークンマップの通りです。名前は同じまま値だけが変わるので、ライトモードが「反転したダークモード」になるのを防げます。
「見やすい」の裏付けとなる数字
この投稿では「見やすい」「見にくい」と言ってきました。レビューで選択を擁護する人のために、数字を示します(白の上で計算した WCAG 2 のコントラスト比)。
| ペア | コントラスト | 評価 |
|---|---|---|
| #FFFFFF 上の #1D1B20 テキスト | 17.1 対 1 | 最小値 4.5 対 1 を大きく上回る |
| #FFFFFF 上の #49454F テキスト | 9.3 対 1 | 補助テキストとして十分 |
| #FFFFFF 上の #A9A8AA 無効 | 2.4 対 1 | 対象外。無効は控えめで良い |
| #FFFFFF 上の #BB86FC | 2.65 対 1 | ボタン形状に必要な 3 対 1 未満 |
| #FFFFFF 上の #6200EE | 7.63 対 1 | 見やすい |
もう1つ知っておく価値のある事実：Material 3 自身のライトサーフェスも #FFFFFF ではありません。ほんのり色づいた白の #FEF7FF です。多くのチームが標準として扱うデザインシステムでさえ、画面を純白で塗ってはいないのです。
FAQ
ライトモードに最適な背景色は？
ページには #F2F2F7 のようなやわらかい明るいグレー、その上のカードには #FFFFFF。グレーが白いサーフェスの引き立て役になるので、枠線や影を減らせます。
#FFFFFF は悪い背景色ですか？
常にそうとは限りませんが、真っ白な画面には奥行きを見せる手段がありません。カードはページに溶け込み、枠線と影がすべての仕事を担うことになります。白は画面全体ではなく、サーフェスの色として使うのが最適です。
#F2F2F7 とは？
ライトモードでの iOS システムグレー6で、Apple が「設定」アプリのようなグループ化リストの背後に使うグレーです。Apple は、グループ化されたテーブルビューにはグループ背景色を推奨しています。
白い背景にはどのテキスト色を使うべき？
テキストには #1D1B20、補助テキストには #49454F のような、やわらかい黒に近い色。どちらも Material 3 の色で、白でも #F2F2F7 でも読みやすいです。
ライトモードで高さ(エレベーション)はどう表現する？
影です。ダークモードでは明るいサーフェスが高い層を意味しますが、ライトモードには白より明るい段がないので、サーフェスは白のまま、高さに応じて影が大きくなります。
アクセントカラーはライトとダークで変えるべき？
はい。#BB86FC のような明るいアクセントは暗い画面では映えますが、白の上ではほぼ消えます。ライトのサーフェスには、同じ色相のより深い段、たとえば #6200EE を使いましょう。
Sources
- Apple Human Interface Guidelines, Color：#F2F2F7 はライトモードの systemGray6(R242 G242 B247)で、グループ背景色はグループ化されたテーブルビュー向けです。
- Material 3 のカラーロール。androidx Compose の ColorLightTokens と PaletteTokens から確認：on surface #1D1B20(Neutral10)、on surface variant #49454F(NeutralVariant30)、ライトサーフェス #FEF7FF。Material color roles を参照。
- 無効ラベルとアイコンの不透明度 0.38 は、Material 3 のコンポーネントトークンによるもの。#FFFFFF 上の #1D1B20 の38%は #A9A8AA です。
- #BB86FC と #6200EE は、Material のベースラインのダーク用とライト用のプライマリ。#B00020 は Material のベースラインのライト用エラー。#E5E5EA はライトモードの iOS システムグレー5です。
- WCAG 2.2, 1.4.3 Contrast (Minimum) と 1.4.11 Non-text Contrast。比率は WCAG の相対輝度の式で計算。無効テキストは最小値の対象外です。
- 影のインク色 #1B1530 と4段階の影は、プラットフォームの値ではなく、私たち独自の推奨です。
- 最初は UX Brainy のカルーセルとして公開されました。
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
