ダークモード

ダークモードは、画面の背景を黒や濃いグレーに、文字やアイコンを白や明るい色にする表示設定です。目の疲労軽減、バッテリー消費の削減 (有機 EL ディスプレイ)、暗所での視認性向上を目的として、iOS、Android、Windows、macOS のすべてが標準対応しています。

QR コードとダークモードの関係で注意すべき点があります。QR コードは「暗いモジュール (通常は黒) と明るいモジュール (通常は白) のコントラスト」で情報を表現します。ダークモードの Web ページに QR コードを表示する場合、ページの背景が暗くなることで QR コードの白い部分 (クワイエットゾーンや明色モジュール) との境界が曖昧になり、スキャン精度が低下する可能性があります。

対策として、QR コードの周囲に十分な白い余白 (クワイエットゾーン) を確保し、ダークモードの CSS で QR コード画像の背景色が反転しないよう明示的に白背景を指定することが重要です。background-color: white; padding: 16px; のように、QR コードの表示領域だけはダークモードの影響を受けない設計にします。

逆に、デザイン QR コードでダークモードを活かす手法もあります。白地に黒のモジュールではなく、暗い背景に明るいモジュールの「反転 QR コード」は、ダークモードのページに自然に溶け込みます。ただし、反転 QR コードは一部の古いスキャナーで読み取れない場合があるため、対象ユーザーのデバイス環境を考慮する必要があります。