UIのディバイダー色:なぜ #000000 ではいけないのか
リスト行の間の真っ黒な線は、区切っているはずの文字よりうるさい。ライトでは #C6C6C8、ダークでは #38383A、太さは 1 px、テキストの位置までインセット。そして線を引く前に、まず余白を試そう。
正しいディバイダーの色は、#C6C6C8 のような柔らかいライトグレーで、太さは 1 px、テキストの位置までインセットして引く線です。真っ黒な線ではありません。ディバイダーは行を区切るためにあるのに、黒い線はリストの中でいちばんうるさい存在になってしまいます。ここではライト画面とダーク画面の値つきで、4つの修正を紹介します。
黒いディバイダーはなぜ叫ぶのか
黒いディバイダーを意図して選ぶ人はいません。何も考えずに引いた線は #000000 になり、誰かが直すまでそのままです。
問題はコントラストです。白地に真っ黒は、画面で表現できる最強の組み合わせで、行のテキストは通常それより少し柔らかい色です。つまり、線が言葉より格上になってしまう。目は先に線を読み、そのあとで線の間にある中身を探しに行きます。
ディバイダーはヒントであって、主役ではありません。必要なときに目に見つかり、それ以外は無視される。それが仕事です。
修正1:線を明るくする
#000000 の線
#C6C6C8 の線
iOS は白地のリスト区切りを #C6C6C8 で描きます。これは半透明のシステムセパレーターカラーを白背景に落とし込んだ色です。Material 3 も同じ場所に着地していて、アウトラインバリアントのトークン #CAC4D0 を 1 dp で使います。
黒い線
iOS のセパレーター
Material 3 のディバイダー
白の上の黒 12%
背景が真っ白でない場合は、固定のグレーではなくアルファ値を使いましょう。Material のガイドラインでは、ディバイダーはライトテーマで黒 12%、ダークテーマで白 12% とされています。白の上の #000000 12% は #E0E0E0 になり、色のついた面の上では線にもその色味が乗るので、貼り付けたように見えることがありません。
この修正はリスト以外にも効きます。テーブルの行罫線、カードのフッター、ヘッダー下の線、メニューのグループ間の罫線も同じです。
修正2:テキストの位置までインセットする
全幅
テキストから開始
iPhone の設定アプリを開いて見てみてください。線はアイコンの下ではなく、ラベルから始まっています。Material も同じことを言っています。インセットディバイダーは関連するコンテンツを区切り、アバターのような拠り所になる要素と組み合わせます。
このインセットが、アイコンをその行に結びつけています。アイコンの下を通る全幅の線は、アイコンを切り離してしまい、リストは行ではなくストライプに見えます。
iOS 16 以降、SwiftUI のリストは各セパレーターを、アイコンではなく行のテキストの先頭に揃えるのがデフォルトです。行にアイコンもアバターもないなら、避けて内側に寄せる対象がないので、全幅の線で問題ありません。
修正3:まず余白を試す
全行に線
余白でやる
線に手を伸ばす前に、その線は何のためかを自問してください。多くの場合はグルーピングで、グルーピングは距離でできます。Material は全幅ディバイダーの代替として、余白、サブヘッダー、インセットディバイダーを挙げ、全幅の多用は視覚的ノイズを生むと警告しています。Refactoring UI も「ボーダーを減らす」という項目で同じことを主張しています。余白、背景色、シャドウで区切ろう、と。
簡単なテストがあります。リストの線をすべて消してみることです。それでもグループが見えるなら、その線は装飾でした。
修正4:ダークでも線を落ち着かせる
#1C1C1E の上に #FFFFFF
#1C1C1E の上に #38383A
ルールはダークモードでも変わらず、反転するだけです。ライト画面では線は面より少し暗く、ダーク画面では少し明るくなります。
iOS はダークのリスト背景に #38383A を使います。Material 3 は #141218 のサーフェスの上で、ダークのアウトラインバリアントである #49454F を使います。
真っ白な線は真っ黒な線と同じ問題を抱えています。リストでいちばん明るい要素になって、テキストに勝ってしまうのです。
ディバイダー仕様
チップをタップするとコードをコピーできます。
| プロパティ | 値 | 理由 |
|---|---|---|
| 色(ライト) | #C6C6C8 | 探せば見える、読むときは静か |
| アルファの選択肢 | #000000 の 12% | どんな面にも馴染み、白の上では #E0E0E0 になる |
| 太さ | 1 px(1 dp) | 太い線は図形になってしまう |
| インセット | テキストから開始 | アイコンやアバターを行に結びつけておく |
| 色(ダーク) | #38383A | 面より少し明るい程度、白は絶対に避ける |
| 余白 | 最初に試す | 何も描かずにグルーピングできる |
開発者に渡そう
:root {
--divider: #C6C6C8;
}
@media (prefers-color-scheme: dark) {
:root {
--divider: #38383A;
}
}
.row + .row {
border-top: 1px solid var(--divider);
margin-left: 56px; /* icon width plus gap, so the line starts at the text */
}
.group + .group {
margin-top: 24px; /* try this before adding a line */
}
ボーダーにかかる margin-left がインセットです。線がラベルの始まる位置から始まります。アルファ方式を使う場合は、変数をライトでは rgba(0, 0, 0, 0.12)、ダークでは rgba(255, 255, 255, 0.12) に置き換えてください。
FAQ
ディバイダーは何色にすべき?
ライト画面では、iOS の #C6C6C8 や Material 3 の #CAC4D0 のような柔らかいライトグレーです。ダーク画面では、#38383A のように少しだけ明るいダークグレーを使います。
ディバイダーは黒でもいい?
いいえ。真っ黒な線はリストの中でいちばんコントラストが高い要素なので、目がコンテンツより先に読んでしまいます。ライトグレー、または不透明度 12% 前後の黒を使いましょう。
ディバイダーの太さはどのくらい?
1 px です。Material では 1 dp にあたります。太い線は図形になり、行と張り合ってしまいます。
インセットディバイダーとは?
画面の端ではなく行のテキストから始まるディバイダーで、アイコンやアバターの下を切りません。iOS の設定アプリはすべてのリストでこれを使っています。
すべての行の間にディバイダーが必要?
いつもではありません。グループ間の余白を広げるだけで、何も描かずに内容を区切れることがよくあります。Material も、全幅ディバイダーの多用は視覚的ノイズを生むと警告しています。
ダークモードで使えるディバイダー色は?
iOS のダークのリスト背景では #38383A、Material 3 のダークサーフェスでは #49454F です。白は避けましょう。明るい線はダーク画面でまぶしく見えます。
出典
- Material Design 2, Dividers:ディバイダーは太さ 1 dp で、ライトテーマでは黒 12%、ダークテーマでは白 12%。インセットディバイダーは関連するコンテンツを区切り、アバターなどの拠り所となる要素と組み合わせて使う。全幅ディバイダーの代替は余白、サブヘッダー、インセットディバイダー。全幅ディバイダーの多用は視覚的ノイズを生む。
- Material 3 tokens:ディバイダーはアウトラインバリアントの色を太さ 1.0 dp で使う。ベースライン値はライトスキームで #CAC4D0、ダークスキームで #49454F。#141218 はベースラインのダークサーフェス。
- Apple, listRowSeparatorLeading と Adjust List Row Separator Insets:iOS 16 以降、リストは各セパレーターを行のテキストの先頭に揃えるのがデフォルト。
- iOS のセパレーター色:ライトは rgba(60, 60, 67, 0.29) で、白の上では #C6C6C8 になり、ダークは #38383A。iPhone の設定アプリでインセットを確認できる。
- #FFFFFF の上の #000000 12% は、アルファブレンドの計算で #E0E0E0 になる。
- Refactoring UI、「Use fewer borders」(Adam Wathan と Steve Schoger)。
- WCAG 2.2, 1.4.11 Non-text Contrast:リスト行の間のディバイダーは装飾であり、内容の理解に必要ではないため、最低コントラストの要件は適用されない。
- 設定の行と「デザインレビュー」のイベント詳細は、このページ用に作った架空のものです。
- 最初は UX Brainy でカルーセルとして公開。
Want lists, forms and every other surface designed as one quiet system? Our team designs and builds product UI that holds up in light and dark.
Get Started
