このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
スクリーンタイポグラフィの歴史の大部分において、読書面はひとつしかありませんでした。紙を模した、明るい地に濃い文字です。ダークモードがそれを変えました。わずか数年のうちに、一部の開発者の好みから、あらゆる主要オペレーティングシステムのシステムレベル設定へと変わり、いまや読者は、どちらの極性を望むかをデバイスにすでに伝えたうえでページにやって来ます。タイポグラフィは両方の面で応えなければなりません。
極性の研究が示していること
表示極性 — テキストが明るい地に暗い文字(ポジティブ極性)か、暗い地に明るい文字(ネガティブ極性)か — はCRTの時代から研究されており、その知見はかなり一貫しています。通常の照明下での持続的な読書では、一般にポジティブ極性のほうが良い測定結果を示します。校正作業、視力、読書速度の研究は、明るい背景に濃い文字を支持する傾向があります。有力な説明は生理学的なものです。明るい面は瞳孔を収縮させ、瞳孔が小さいほど網膜像は鮮明になり、被写界深度も深くなります。暗い地に明るい文字は瞳孔を拡張させ、像を柔らかくぼかします。
ただしこれは一般的な場合であって、普遍的な場合ではありません。ダークモードは、少なくとも次の3つの状況でその存在価値を発揮します。
- 暗い環境光。 暗い部屋での真っ白なページはまぶしく、暗順応を妨げ、実際に不快なことがあります。薄暗い環境では、ネガティブ極性は画面と周囲との落差を減らします。
- 羞明と光過敏。 片頭痛に関連する光過敏、脳震盪後の特定の症状、あるいは明るい視野が苦痛となる状態を持つ読者は、そもそも読むためにダークテーマに頼っていることが少なくありません。
- 一部のロービジョンの状態。 光の散乱の影響を受ける読者 — たとえば白内障や中間透光体の混濁による — は、ページが発する光の総量が減ることで、より明瞭に見える場合があります。画面拡大鏡やハイコントラスト表示のユーザーの中に、まさにこの理由から暗い地に明るい文字を選ぶ層が昔から存在してきました。
ハレーションと乱視の問題
ダークテーマに特有の失敗はハレーションです。暗い地の上の明るい文字は光って見え、外側ににじんで字形をぼやけさせます。この効果は純黒に純白で最も強く、乱視 — 非常に一般的な屈折異常 — のある読者にとって最悪です。焦点の合いきらない光学系が、明るいストロークをさらに引き伸ばしてしまうのです。細い書体が最も大きな被害を受けます。光のもやがストロークに占める割合が大きくなるためです。
対策は明快です。
- 純黒の上に純白の文字を決して使わないこと。 両端を和らげます。非常に濃いグレーの上のライトグレーは、十分なコントラストを保ちながら、にじみを劇的に軽減します。
- 見かけのウエイトを補正すること。 暗い地の上の明るい文字は、同じ書体を反転させたものより太く見えます。明るいストロークが広がるからです。ダークテーマの文字は、多くの場合ウエイトをわずかに軽くしてもよく、バリアブルフォントであればグレード(次章参照)で調整すれば、補正によるリフローも起こりません。
- ライトパレットを単純に反転しないこと。 反転によって作られたダークテーマは、たいてい文字のコントラストが強すぎ、インターフェイスのコントラストが弱すぎます。ダークテーマは独自の構成として、独自に検証したコントラスト値を持つよう設計されるべきです。
読者の選択を尊重する
prefers-color-scheme メディアクエリは読者のオペレーティングシステムでの設定を報告し、これを尊重することが現代の基本姿勢です。システムレベルでダークモードを選んだ読者は、好み — ときには医学的な必要 — を表明したのであり、真っ白なページを浴びせるサイトはそれを覆したことになります。逆もまた同じです。ライトを選んだ読者にダークテーマを強制するのも、同じくらい傲慢です。ページ内での切り替え手段を提供するのは構いませんが、デフォルトはOSの設定に従い、両方のテーマを完全に定義することを忘れないでください。暗い面に暗い文字が継承されるような中途半端にスタイルされたダークモードは、何もないより悪いのです。
ページの下にあるハードウェア
ディスプレイそのものも読書面の一部です。OLED画面では黒のピクセルは単に消灯しているため、真の黒を使ったテーマはバッテリーを節約します — これは正当な利点です。しかしピクセル単位のスイッチングは、一部のパネルでスクロール中に明るい文字がかすかに尾を引く現象を生むことがあり、これも絶対黒ではなくほぼ黒を使うべきもうひとつの理由です。電子ペーパー(Eインク)ディスプレイは対極にあります。紙のように反射型で、光を発せず、ほぼポジティブ極性でしかまともに表示できません。電子書籍リーダーで読まれる可能性の高いコンテンツは、判読性をダークテーマに依存させるべきではありません。
この章が新しく設けられた理由
2005年には、暗い画面は端末とSFのものであり、ウェブは白く、極性は決着済みの問題でした。読者に好みを表明する手段がなかったからです。システム全体のダーク設定も、prefers-color-scheme も、読者のポケットの中のOLEDもありませんでした。主流の、ユーザーが制御する読書面としてのダークモードはこの10年の産物であり、極性を歴史の脚注から現在進行形のデザイン上の責任へと変えました。
CSSでは
/* Design the dark theme; don't just invert the light one */
@media (prefers-color-scheme: dark) {
:root {
--paper: #171310; /* near-black — never #000 */
--ink: #ece5d6; /* off-white — never #fff (halation) */
}
img { filter: brightness(0.9); } /* dim plates to the surface */
}推奨事項
- 長文の読書のデフォルトの面は明るい地に濃い文字を維持すること。持続的読書の証拠はこれを支持しています。
prefers-color-schemeを双方向で尊重すること — OSの設定を読者の決定として扱います。- ダークテーマでは純黒に純白を避けること。両方の値を和らげてハレーションを抑えます。
- ダークテーマでは見かけの太りを打ち消すため、文字のウエイトをわずかに軽くする(またはグレードを下げる)こと。
- ダークパレットは独立して設計し、そのコントラスト比を検証すること。ライトテーマを反転させないこと。
- バッテリー節約が明確な目的でない限り、OLEDではスクロール時の尾引きを抑えるため、絶対黒よりほぼ黒の面を選ぶこと。
- 電子ペーパーの読者はポジティブ極性で見るものと想定し、ダークモードに判読性を依存させないこと。