メールのダークモードプレビュー

ダークモードは1つではなく3種類

ウェブサイトでは、ダークモードの見た目はあなたが決めます。メールでは、読む側のプログラムが代わりに決め、プログラムの系統ごとにやり方が違います。

つまり1通のメッセージに4つの見た目があります。明るい元の状態と、この3つです。このページでは4つすべてをパソコンまたはスマートフォンの幅で表示します。

プレビューの作り方

ツールはHTML内で見つけたすべての色を書き換えます。インラインのstyle属性にあっても、<style>ブロックにあっても、bgcolorのような古い属性にあっても同じです。各色を色相、彩度、明度に変換し、色相はそのままで明度を変えます。

• 部分的な反転：相対輝度が0.35を超える背景は暗くなります。明度の暗い側半分にある文字と枠線は明るくなります。それ以外はそのままです。
• 完全な反転：すべての色の明度を鏡のように反転させます。白はほぼ黒に、黒はほぼ白になります。
• 変更なし：何も書き換えません。メッセージがcolor-schemeでdarkを宣言していれば、@media (prefers-color-scheme: dark)のルールを有効にします。色をまったく指定していないメッセージには、アプリ標準の暗い背景が付きます。

[data-ogsc]と[data-ogsb]セレクターを使ったOutlook.com向けのルールは、部分的な反転のプレビューに適用します。各プレビューはスクリプトが実行できないサンドボックス化されたフレーム内で表示します。

指摘の意味

コントラスト不足

各バージョンで、見えている文字をすべてその背後にある最も近い背景と組み合わせ、コントラスト比を計算します。4.5:1未満の組み合わせを、悪いものから順に一覧にします。3:1未満ならそのモードをエラーとします。非表示のプリヘッダーテキストは対象外です。

中間のグレーの文字

彩度が低く、明度が45〜70％のグレーは、スケールの真ん中にあります。反転してもほぼ同じグレーになり、背景だけが逆になります。補足的な文字には#555555かそれより暗い色を使ってください。

透明背景の暗いロゴ

ツールは最大15枚の画像を読み込み、ピクセルを調べます。不透明なピクセルのほとんどがとても暗く、縁が透明なら、そのロゴは暗い背景に溶け込んでしまいます。不透明な白い背景の画像も報告します。白い四角として表示されるからです。

要確認の透明部分

画像のサーバーが、他のサイトからピクセルを読むことを許可していませんでした。ダークモードのプレビューを自分の目で確認する必要があります。

ダークモードの設定

メッセージがダークモード対応を宣言しているか、ダーク用の色を用意しているかを示します。色を用意せずに対応だけ宣言するのは、何も宣言しないより悪い結果になります。

画像と文字

実際の文字が120文字未満のメッセージは、ほとんどが画像です。画像の中の文字は決して色が変わりません。alt属性のない画像も数えます。

どのアプリでも崩れない対策

まずはコードが要らない選択から始めましょう。とても暗い文字ととても明るい背景、またはその逆という、はっきりした組み合わせを使います。反転で台無しになるのは中間の色調だからです。暗いロゴには2〜3ピクセルの白い縁取りを付けるか、画像ファイルの中で白い角丸の図形の上に置きます。言葉は画像にせずHTMLのテキストのままにします。

ニュースレターなら、それに対応するアプリ向けにダーク用のスタイルを追加できます。

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

署名にはこの手段がありません。貼り付ける先のエディターが<meta>と<style>を取り除いてしまうので、残る手段ははっきりした色と、どちらの背景でも見えるロゴだけです。メール署名作成ツールなら、作った結果をこのページに直接送れます。