Safari 27.3 BetaでWebサイトを自動変換する「Adaptive Dark Mode」が登場
Appleは2026年11月4日、WebKitのブログでSafari 27.3ベータ版に新しい機能「Adaptive Dark Mode」が導入されることを発表しました（WebKit公式ブログ）。この機能は、システム設定でダークモードを有効にしているユーザーが、ダークモードに対応していないライトテーマのWebサイトを閲覧する際に、Safariが自動的にWebサイトの表示をダークテーマに変換するというものです。
Webサイトの約40%のアクセスがダークモードユーザーからにもかかわらず、ダークモード対応サイトは10%に留まっており、Adaptive Dark Modeはこのギャップを埋めることを目的としています。
Safariは2019年春にWebサイトのダークモードを初めてサポートしましたが、すべてのWebサイトが対応しているわけではありません。今回の機能は、ユーザーに一貫したダークモード体験を提供するために開発されました。iOS 27.3ベータ版はすでに開発者向けにシードされており、中国ではApple Intelligence機能も利用可能になっています（MacRumors）。
Adaptive Dark Modeの仕組み：色変換と要素の扱い
Adaptive Dark Modeの核となるのは、色の変換技術です。単なる装飾的な色と、意味を持つ色を区別し、要素の視認性を保ちながら色を反転させるタイミングを判断します。具体的には、色の輝度を反転させつつ色相を維持するカラーマトリクスを開発し、これを用いて明るい背景を暗く、暗いテキストを明るく変換します（WebKit公式ブログ）。
変換時には、WCAG（Web Content Accessibility Guidelines）で定義されている4.5:1のコントラスト比を確保し、十分なコントラストを持たせるよう設計されています。また、ライトなCSSグラデーションもダークなものに変換されます。ボタンのコントラストや画像上のテキストの視認性、ホバーメニューの表示など、変形されたコンテンツが見やすく使いやすいように慎重な判断が下されます。
| 項目 | Adaptive Dark Modeの挙動 |
|---|---|
| ダークモード対応サイト | 変更なし（<meta name="color-scheme" content="light dark">などで明示されている場合） |
| ライトテーマサイト | ページの配色を分析し、自動でダークテーマに変換 |
| テキスト | 輝度反転、WCAG 4.5:1コントラスト比を維持 |
| CSSグラデーション | ライトからダークへ変換 |
| SVG画像 | 必要に応じて色を変換しコントラストを保持 |
| ビットマップ画像 | シンプルな白黒ロゴは反転、その他のほとんどは変更なし |
<canvas>コンテンツ |
変更なし（多様なコンテンツ予測が困難なため） |
画像に関しては、ほとんどの画像はそのまま維持され、その整合性が保たれます。しかし、アイコンやロゴは背景色が反転するとコントラストが失われる可能性があるため、SVG画像は色を変換し、ビットマップ画像の場合はピクセルヒストグラムを分析してシンプルな白黒ロゴを反転させます（WebKit公式ブログ）。マスクや mix-blend-mode といったエフェクトは、色変換された要素で予期せぬ結果を生む可能性があるため、場合によっては無効化されることもあります。
Webサイト開発者への影響と推奨される対応
このAdaptive Dark ModeはWebKitブラウザエンジンの深層で動作するため、高い処理速度と電力効率でユーザーのプライバシーを保護しながら変換を適用できるとされています。Webサイト開発者にとっては、現代的なWeb開発プラクティスに従っていれば、一般的にAdaptive Dark Modeはうまく機能するとのことです。
しかし、古い技術を使用しているサイトでは、いくつか更新を行うことでより良い体験を提供できる可能性があります。
- ロゴやアイコン: ビットマップ画像からSVG画像への置き換えを推奨。
- 背景画像: タイル状の背景画像ではなく、CSSの単色またはグラデーションを使用。
- 画像スプライト: 丸い角、影、ボタンの状態にはモダンなCSSを使用。
- コンテンツ画像: ページの背景色を埋め込むのではなく、透明な背景の画像を使用。
- コンテナ: コンテンツの密集を防ぐためにパディングを追加。
特定のページの特定の部分で独自のダークモード体験を提供したい場合は、その要素に color-scheme: light dark を適用し、独自のダークスタイルを追加することも可能です（WebKit公式ブログ）。
エンジニア目線で見ると：コストをかけずにUX改善が見込める画期的な機能
SafariのAdaptive Dark Modeは、Webサイトのダークモード対応において、これまでの開発者の負担を大幅に軽減する画期的な機能だと感じます。多くのWebサイトがダークモードに未対応である現状をブラウザ側で解決しようとするアプローチは、非常に合理的ではないでしょうか。特に個人プロダクトを運営している開発者の方にとっては、既存サイトへの対応コストをかけずに、ダークモードユーザーのUXを改善できる大きなメリットがあります。
しかし、完全に自動であるため、意図しない色の反転や視認性の低下が発生する可能性も考慮しておく必要があります。例えば、デザイン的に特定のコントラストを意図して設定している画像や図などが、Adaptive Dark Modeによって予期せぬ形で変換されてしまうケースはありそうです。サイトの品質を重視するなら、最終的には <meta name="color-scheme" content="light dark"> を設定し、自前でCSSでダークモードを実装するのが最も確実でしょう。
私の個人プロダクトでも、まずはこのAdaptive Dark ModeをSafari 27.3ベータで試し、もし大きな問題がなければ、積極的にユーザーにこの機能の利用を促すようなメッセージを出すことも検討したいです。既存のサイト資産を活かしつつ、アクセシビリティを向上させる一歩として、これは非常に期待できる機能だと感じます。
