theme-color の設定がツールバーに適用されないケースの対処法

mk-0A0

2023.5.19

学びの共有

こんにちは、上條（mk-0A0）です。
案件で Safari の theme-color について調査したので、そのときの状況を記事にしたいと思います。

theme-color とは

Safari のツールバー（時間や WiFi が表示されるエリア）の色を変更できる設定です。
iOS 15 から使用可能で、meta タグで theme-color を指定することで色を変更できます。

https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes#HTML

ツールバーの色が白( #ffffff )に変更できない

Safari のツールバーを白に変更する目的で、<meta name="theme-color" content="#ffffff" /> を指定しました。ですが、ツールバーは黒のままです。（画像左）
つぎに、<meta name="theme-color" content="#ff0000" /> を指定しました。こちらは想定通りにツールバーは赤になりました。（画像右）

どちらの画像も theme-color 以外の条件は同一なので、theme-color が #ffffff のときに起こる現象と言えそうです。

現象が発生した環境

iOS 16.4.1(a), Safari 16.4.1(a)
ソースコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="theme-color" content="#ffffff" />
</head>
<body>
  <main>
    <div style="background-color: #000000; height: 50px;"></div>
    <h1>ABOUT</h1>
  </main>
</body>
</html>

発生する条件と起こる現象

theme-color に #ffffff を指定する
ページの先頭に接する要素に「特定の背景色」を指定する

このとき、ツールバーの色には「特定の背景色」が適用され、theme-color の #ffffff は無視されます。

以下のサンプルはどちらも theme-color に #ffffff を指定しているものです。
ページの先頭に接する要素の背景色が blue（左）だと現象が発生し、lightskyblue（右）だと想定通りに白が適用されているのが分かります。

特定の背景色

以下の46色と、これらの近似色が「特定の背景色」にあたり、theme-color の #ffffff はツールバーに設定されません。

上記は、『原色大辞典』よりブラウザで名前が定義されている140色の色名について検証し、現象が発生したものをピックアップしています。
また、近似色とは #ff0000 に対する #ff0001, #ff000e などを指します。どの程度まで近似色とみなせるかは未検証です。

解決方法

theme-color を #ffffff → #fffffe のように微妙に違う色を設定することで解決できました。
以下のサンプルは theme-color に #fffffe を設定したものです。「特定の背景色」として black を指定しました。
想定通り、「特定の背景色」を使用していても theme-color に白を設定できています。

補足

HTML Standard と Apple Developer Design for Safari 15 によると、現象が発生するのはコントラスト比の問題で、ページの先頭に接する要素に「特定の背景色」を指定するとブラウザ側で調整されて theme-color が無視されることがあるそうです。

When using the theme color in UI, user agents may adjust it in implementation-specific ways to make it more suitable for the UI in question. For example, if a user agent intends to use the theme color as a background and display white text over it, it might use a darker variant of the theme color in that part of the UI, to ensure adequate contrast.
UIでテーマカラーを使用する場合，ユーザエージェントは，当該UIにより適合するように，実装に特有の方法でテーマカラーを調整することができる。例えば、ユーザエージェントがテーマカラーを背景として使用し、その上に白いテキストを表示しようとする場合、適切なコントラストを確保するために、UIのその部分においてテーマカラーのより暗いバリエーションを使用するかもしれない。
https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color（日本語訳：DeepL）

ごく一部ですが、Safari が適応できない色があります。
ユーザーの体験を妨げるような色やアクセス不能にする色などです。
これらの場合 Safari は別の処理を行います。
選択した色がうまく適応されない場合、微調整を行ってください。
Apple Developer Design for Safari 15 4:35~ 日本語字幕より引用

まとめ

「特定の背景色」は中〜低明度の色が多い印象があるので、調べきれなかった近似色の目安にできるかな思いました。個人的には deeppink と系統が近い magenta が含まれていないのが意外で、ブラウザ側でどのように判定されているのかが気になります。
もし同様の現象が起こった場合に参考になれば幸いです！