iOSのSafariでDark Mode(ダークモード)の時に透過faviconを使用する場合コントラストをつけたイラストじゃないと勝手にfaviconに白背景がついてしまう件

iOSのSafariでDark Mode(ダークモード)の時に透過faviconを使用する場合コントラストをつけたイラストじゃないと勝手にfaviconに白背景がついてしまう件

2021.01.05 | Staff Diary

上から読んでも下から読んでもなすですな

表題の通りで「iOSのSafariでDark Mode(ダークモード)の時に透過faviconを使用する場合コントラストをつけたイラストじゃないと勝手にfaviconに白背景がついてしまう件」について色々調べたら原因が分かったのでまとめておきますね。

Contents

ico、png、svg、どれもコントラストつけないとアカン

AppleのHuman Interface GuidelinesのVisual DesignにあるDark Modeのページにもそれっぽい事が書いてあるのを発見しましたが、ようはダークモード対応するんなら、白背景・黒背景の時でも見やすい色を使用しないと分かりづらくなるから、よろぴこ!って。

知らなかったけど、このガイドラインiOS 13.0からあったんですね。

Human Interface Guidelines

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

その他の文献でも同じようにな現象が…

Safari favicon incorrectly rendering with white background

https://stackoverflow.com/questions/59233531/safari-favicon-incorrectly-rendering-with-white-background

ダークモード対応とそうじゃないやつ

例えば〜って事で、#0B1F48と、#6699FFの色を使用したfaviconを用意。
ダークモードに設定したiPhoneでチェックチェック。
そうすると…

そうじゃないやつ

 透過のfaviconなんですが、ダークモードに対応していない=コントラストに差がないものはご覧の通りOS側で自動で判断してくれて白背景をつけてくれます。
これが良い時とお節介な時がありますね。

ダークモード対応のやつ

こちらは上記のそうじゃないやつのイラストの色味を調整して明るくしてみたやつ=ダークモード対応です。
だいぶ色は変わったけど、コントラストがつくので透過のままです。

結論

元の色がだいぶ変わってしまうが、同系統の色合いっていう意味合いでは間違ってはいないが…。
印象がだいぶ変わってしまうので、別に白背景ついても良いというのであれば、元のままでも…?

ともあれ白でも黒でも見やすい方が…イイ!

まとめ

人にやさしく、3ピース✌️

辻 元気
Written by
辻 元気
Categories
Written by