明るい背景に暗い配色

ダークモード、ダークテーマ、またはナイトモードとしてよく知られている、暗い背景に明るい色のテキスト、アイコン、およびグラフィカルユーザーインターフェイス要素を使用する配色です。これは、コンピューターのユーザーインターフェイス設計やWeb デザインの観点からよく議論されます。最近の多くの Web サイトやオペレーティングシステムでは、ユーザーにオプションの暗い背景に明るい表示モードを提供しています。

一部のユーザーはダークモードのディスプレイの方が視覚的に魅力的だと感じており、目の疲れを軽減できると主張しています。^[1] OLEDディスプレイを搭載した2016年のGoogle Pixelで白を最大輝度で表示すると、純粋な黒を表示する場合の約6倍の電力を消費します。^[2]しかし、従来のLEDディスプレイでは消費電力削減のメリットが得られません。^[3]最新のオペレーティングシステムのほとんどは、オプションの明るい色の配色をサポートしています。^[4]

現代のコンピュータ画面の前身であるブラウン管オシログラフやオシロスコープなどは、グラフをプロットしたり、その他のコンテンツを黒い背景に光る跡として表示したりする傾向がありました。

コンピュータ画面の導入により、当初はオシログラフやオシロスコープに使用されていたようなブラウン管 (CRT)上にユーザー インターフェイスが形成されました。蛍光体は通常非常に暗い色で、電子ビームが当たると明るく点灯し、モノクロ画面に塗布された蛍光体に応じて、黒の背景に白、緑、青、または琥珀色に見えます。RGB画面も同様に動作し続け、すべてのビームを「オン」に設定して白を形成します。

テレテキストの出現により、この新しい媒体に最適な原色と二次光の色と組み合わせについての研究が行われました。^[5]黒、赤、緑、黄、青、マゼンタ、シアン、白のパレットから、黒地にシアンまたは黄色が最適であることが通常わかりました。

反対の色セット、つまり明るい色の上に暗い色の配色は、もともと紙の上のインクをシミュレートするためにWYSIWYG ワードプロセッサで導入され、標準になりました。

マイクロソフトは2016年にWindows 10のAnniversary Updateでダークテーマを導入した。 ^[6] 2018年にAppleはmacOS Mojaveで追随した。^[7] 2019年9月にはiOS 13とAndroid 10の両方でダークモードが導入された。^{[8] [9]}一部のオペレーティングシステムでは、日没や日の出時にダークモードの状態を自動的に変更するツールが提供される。^[10]

FirefoxとChromiumには、すべての内部画面にオプションのダークテーマがあります。サードパーティの開発者が独自のダークテーマを実装することもできます。^[11]また、システムテーマに合わせて、Webサイトのテーマをダークカラースキームに変更できるさまざまなブラウザアドオンもあります。^[12]

2019年には、フロントエンドウェブ開発者向けに「prefers-color-scheme」オプションが作成されました。これは、ユーザーがシステムで明るい色のテーマを使用するか暗い色のテーマを使用するかを選択することを示すCSSプロパティです。^[13]

2024年7月、Wikipediaのモバイルウェブサイトはダークモードを導入しました。^[14]デスクトップウェブサイトも後にダークモードを導入しました。^[15]

明るい色調と暗い色の配色は、OLEDディスプレイに表示するために必要なエネルギーが少なくなります。これはバッテリー寿命に良い影響を与え、エネルギー消費を削減します。^[16]

OLEDは主に黒の画像を表示する場合、LCDの約40％の電力を消費しますが、文書やウェブサイトなど、白い背景の画像を表示する場合は3倍以上の電力を消費します。^[17]これにより、暗い背景に明るい色彩スキームを使用しない限り、バッテリー寿命が短くなり、エネルギー使用量が増える可能性があります。長期的な電力使用量の削減により、バッテリー寿命やディスプレイとバッテリーの耐用年数が延びる可能性もあります。

明暗の配色を使用することで実現できるエネルギー節約は、OLED 画面の仕組みによるものです。OLED 画面では、各サブピクセルが独自の光を生成し、光を生成するときにのみ電力を消費します。これは LCD の仕組みとは対照的です。LCD では、サブピクセルが常時オン (点灯) のLED バックライトからの光を遮断するか、通過させます。

「AMOLEDブラック」カラースキーム（ダークグレーの代わりに純粋な黒を使用）は、AMOLED 画面の電力消費が表示ピクセルの平均輝度に比例して減少するため、黒の代わりにダークグレーを使用する他の明暗のカラースキームよりも必ずしも多くのエネルギーを節約できるわけではありません。AMOLED ブラックはダークグレーよりも多くのエネルギーを節約するのは事実ですが、追加のエネルギー節約は多くの場合無視できるほど小さいです。たとえば、AMOLED ブラックは、Google の公式 Android アプリのダークテーマで使用されているダークグレーと比較して、1% 未満の追加のエネルギー節約しか提供しません。^[18] 2018 年 11 月、Google はAndroid のダークモードがバッテリー寿命を延ばすことを確認しました。^[19]

暗い背景に明るい文字の配色の方が、全体的な明るさが低いため目の疲れが少なくなり、画面上で読みやすいと主張する人もいます。一方^{、[20] [21] [22]}は反対の意見を述べています。ウェブ上のページの中には白い背景用にデザインされているものもあります。Dark Readerなどのプラグインを使用してダークモードを（設計ではなく）強制すると、画像アセット（GIF、PNG、SVG、WOFFなど）が不適切に使用され、視覚的なアーティファクトが発生する可能性があります。

CSSには、ユーザーが明るい配色か暗い配色かを検知し、要求された配色を提供するprefers-color-schemeメディア機能がある。これは、ユーザーのオペレーティングシステムの設定またはユーザーエージェントから指定することができる。^{[13] [23]}

CSSの例:

@ media ( prefers-color-scheme : dark ) { body { color : #ccc ; background : #222 ; } }   
     
         
         
    

< span style = "背景色: light-dark(#fff, #333); 色: light-dark(#333, #fff);" ></ span > 

JavaScriptの例: ^[24]

if ( window . matchMedia ( '(prefers-color-scheme: dark)' ). matches ) { dark (); }  
    

• アモルファス
• ブラックル
• ナイトシフト（ソフトウェア）
• 有機EL
• Solarised（カラースキーム）