Safari 27.3のベータに「Adaptive Dark Mode」（明るいサイトを、見る人が選べば暗く表示。誰に関係するか・サイトを持つ人の確かめ方）

スマホやパソコンを、画面全体が暗い「ダークモード」にして使う人がいます。一方で、サイトの多くは白い背景のままです。暗い画面に慣れた目で開くと、白いページがまぶしく感じることがあります。

2026年11月3日、Safariのもとになっている WebKit（ウェブキット）の公式ブログで、Safari 27.3のベータに「Adaptive Dark Mode（アダプティブ・ダークモード）」が入ったと発表されました。見る人がオンにすると、ダーク表示に対応していない明るいサイトを、Safariが暗くして表示する機能です。サイトを作った側が何もしていなくても、Safariの側で色を変えます。この記事では、何が変わるのか・誰に関係するのか・サイトを持っている人が確かめておくことを、順番にまとめます。

この記事の要点

Safari 27.3のベータで、見る人がオンにすると、ダーク表示に対応していない明るいサイトをSafariが暗くして表示します。
関係するのは白い背景のサイトを持つ人で、すでにダーク表示に対応しているサイトは、Safariは何も変えません。
今は書き換えを急がず、ロゴや背景の画像が暗い表示でどう見えるかを確かめてから、任せるか自分で作るかを決めます。

次に読む

ダークモードにCSSで対応する

自分のサイトでダーク表示を作るときの、prefers-color-scheme・color-scheme・light-dark() の使い方をまとめています。

ダークモードのCSSを見る →

何が変わる？

WebKitのブログによると、ダークモードで使っている人のページの表示は40%近くあるのに、ダーク表示に対応しているページの表示は10%にとどまっています。Safariは2019年春のSafari 12.1で、サイトのダーク表示に最初に対応したブラウザです。今回の Adaptive Dark Mode は、このすき間をSafariの側で埋めようとする機能です。

しくみは、ページの色を読み取って、明るさだけを反対にし、色合いは残すというものです。白い背景は暗く、黒い文字は明るくなりますが、青いボタンは青のままです。文字は、読みやすさの目安として知られる「背景との明るさの差 4.5対1」（WCAGというアクセシビリティの基準）に近づけるように調整されます。明るいグラデーションも暗いものに変わり、ボタンと背景の見分け、写真の上の文字、マウスを乗せたときのメニューが読めるかもSafariが確かめます。

画像の扱いも決まっています。

写真などの画像は、ほとんどそのまま
SVG（線や図形で描く画像）のアイコンやロゴは、見えるように必要なときだけ色を変える
ふつうの画像でも、白黒だけの簡単なロゴは反転することがある
canvas（地図やグラフを描くときに使う部品）の中身は変わらない
うまくいかないときは、マスクや mix-blend-mode（色の重ね方の指定）を止めることがある

どのサイトでも暗くするわけではありません。Safariは、次の3つを分けて扱います。

「color-scheme: light dark」と書いて、ダーク表示に対応していることを示しているサイトは、Safariは何も変えません。もともと背景が暗く文字が明るいページも、そのままです。暗くするのは、ダーク表示に対応していない、明るいページだけです。

サイトの側で何もしなくても、見る人の画面では色が変わることがある。今回いちばん大事なのは、そこだと思います。

いつから・誰に関係する？

2026年11月4日の時点で、この機能があるのは Safari 27.3 のベータ（試験版）だけです。正式版がいつ出るかは、ブログには書かれていません。どの機器（iPhone・iPad・Mac）で使えるかも、ブログには書かれていません。

また、最初からオンになっているわけではありません。ブログに書かれている手順は、次のとおりです。

本体の見た目（外観）をダークにしておく
背景の明るいサイトを開く
SafariがAdaptive Dark Modeのお試しを見せるので、「Try」を押す

つまり、暗く見えるのは、見る人が自分で選んだときだけです。ダークモードを使っていない人や、お試しを選ばなかった人には、今までどおりのサイトが表示されます。

関係するのは、白や明るい色を背景にしたサイトを持っていて、ダーク表示には対応していない人です。ブログの数字では、ダーク表示に対応しているページの表示は10%なので、多くのサイトがここに入ります。反対に、すでに自分でダーク表示を作っているサイトには、今回の話は関係ありません。

もう1つ知っておきたいのは、サイトの側からは、変換されているかどうかを見分けられないことです。Safariはそれをサイトに知らせず、JavaScriptでページの色を読んでも、もとの色が返ります。そのため、サイトの側で「何人が暗い表示で見たか」を数えることはできません。

何をすればいい？

サイトを持っている人・Web担当の人がすることは、次の4つです。どれも、急いで書き換えるための手順ではなく、決める前に確かめるための手順です。

1. 自分のサイトが「ダーク表示に対応ずみ」か見る

パソコンのブラウザでサイトを開き、右クリックの「ページのソースを表示」で、「color-scheme」という言葉があるかを検索します。次のどちらかが書かれていれば、ダーク表示に対応していると示しているサイトです。

<meta name="color-scheme" content="light dark">
:root { color-scheme: light dark; }

見つからなければ、白い背景のサイトは Adaptive Dark Mode の対象になります。WordPressのサイトでは、使っているテーマによって書かれているかどうかが変わります。

2. ロゴと画像の「白い背景」を見る

暗い表示で目立ちやすいのは、白い背景がついたままの画像です。ロゴや商品写真を、背景ごと四角い画像にしていると、暗いページの中に白い四角が浮いて見えます。ブログでは、ロゴやアイコンはSVGにする、写真の背景は透明にしておく、といった書き方がすすめられています。まずは、ヘッダーのロゴ・トップページの画像・バナーの3つを見ておくと十分です。

3. 背景に敷いた画像と、地図・グラフを見る

背景に模様の画像を敷いているページは、画像がそのまま残り、文字の色だけが変わることがあります。ブログでは、背景の模様は画像ではなくCSSの色やグラデーションにすることがすすめられています。また、canvasで描いた地図やグラフは変換されないので、まわりだけ暗くなります。お問い合わせページの地図や、料金のグラフがあるサイトは、ここも見ておきます。

4. 任せるか、自分で作るか、明るいままにするかを決める

選べるのは3つです。何もせずSafariに任せる、自分でダーク表示を作る（color-scheme: light dark と、暗いときの色を自分で決める）、明るいままにする（color-scheme: light only）です。明るいままにしたいページや部分には、次のように書きます。

<meta name="color-scheme" content="light only">
:root { color-scheme: light only; }

ただし、この「only」は、Safari 27.3 のベータ1ではまだ効きません。ブログでも、ベータが進むのを待つように書かれています。また、ダーク表示に対応していると示すときは、ページの最初（headの中か、:root・bodyのCSS）に書き、あとからJavaScriptで足さないように、とされています。

ベータの段階で書き換えるより、まずは自分のサイトがどう見えるかを知っておく。それだけで、正式版が出たときに落ち着いて決められます。

KAKERUならこう考える

KAKERUとしては、今すぐ「light only」を書いて止める必要はないと考えています。理由は2つあります。1つは、暗く表示するかを選んでいるのが見る人自身だということです。まぶしさを避けたくて選んだ人に、明るいまま見せることが、いつもよいとは限りません。もう1つは、ベータ1では「only」がまだ効かず、正式版の時期も決まっていないことです。

そのうえで、白い背景つきのロゴや画像は、次にサイトを直すときに、背景の透明な画像やSVGに替えておくのがよいと考えています。これは Adaptive Dark Mode のためだけでなく、背景の色が違うページや、ほかの人のサイトに載せてもらうときにも、そのまま使えるからです。

自分でダーク表示を作るのは、色を一つずつ決めるので手間がかかります。ブランドの色を大事にしている会社や、写真の見え方にこだわるお店は検討する価値がありますが、それも暗い表示での見え方を確かめてから決めれば十分です。