SafariがAdaptive Dark Modeを導入

原題: Safari introduces Adaptive Dark Mode in 27.3

なぜ重要か

ブラウザエンジンレベルでのダークモード自動変換は、Web体験の一貫性向上とフロントエンド開発者の実装負担軽減の両面で注目される取り組み。

Appleは2026年11月3日、Safari 27.3 betaにてAdaptive Dark Modeを発表した。ダークモード設定のユーザーが訪れた明るい背景のWebサイトを自動的に暗く変換する機能で、ページ読み込みの約40%がダークモードユーザーによるものだが、対応サイトは10%にとどまるという課題に応える。WebKitエンジンレベルで処理される。

WebKitチームは、Safari 27.3 betaにAdaptive Dark Modeを実装したと発表した。Safariは2019年春にリリースされたSafari 12.1でブラウザとして初めてWebのダークモードをサポートした先駆者だが、今回はその一歩先を踏み込んだ。

Webページ読み込みの約40%はダークモードユーザーによるものだが、実際にダークモードに対応するページはわずか10%。残り90%のサイトを開くと画面が眩しくなる問題が長年放置されてきた。

Adaptive Dark Modeの動作は段階的に設計されている。まず、HTMLの`<meta name="color-scheme" content="light dark">`やCSSの`color-scheme: light dark`でダークモード対応を明示しているサイトは変換の対象外。対応済みサイトには一切手を加えない。残るサイトに対しては、ページの色を分析して背景が明るいかどうかを判定し、明るいと判断された場合のみ変換を適用する。

色変換の中核は、開発チームが構築したカラーマトリクスだ。色相を保ちながら輝度を反転させ、明るい背景を暗く、暗いテキストを明るくする。WCAG 4.5:1のコントラスト比を目標に文字の視認性を確保し、CSSグラデーションも暗く変換する。

画像の扱いには慎重な判断が入る。写真など多くの画像はそのまま維持する一方、SVGアイコンやロゴは背景色の反転でコントラストが失われる場合があるため、ピクセルヒストグラムを分析して白黒ロゴのみ反転する。`mask`や`mix-blend-mode`などのエフェクトが意図しない結果を生む場合は、エフェクト自体を無効化する判断もとる。`<canvas>`の中身は予測が難しいため変換対象外としている。

処理はWebKitエンジン深部で行われるため、速度・電力効率・プライバシー保護を高いレベルで維持できると開発チームは説明している。Safari 27.3 betaで今すぐ試せる。

出典

webkit.org — 元記事を読む →