Chromeのテキストの色化けをCSSで解決する方法

デザイナーの方なら、おそらく一度は悩んだことがあるであろう、Chromeのおかしな色化け。
Windows版でもMac版でもこの色化けは発生します。

ネットを探してもそれらしい情報は見つからず、たぶん直す方法は無いんだろうな … と諦めていました。

たとえばこのブログ記事。

一見、何もおかしいところは無いように見えますが …

ん？
よく見ると文字とアイコンで全然色が違う …

… 文字の周りだけ灰色く滲んでいる！！

ちなみに、この現象、なぜか青系の色以外では起きません。
試しにピンクの場合を見てみましょう。

文字の周りもピンクで、何の問題もありませんね。

解決法1：font-smoothing

なんとか灰色の滲みを解消する方法はないのか？と考えて、まず文字と違ってアイコンは綺麗なままであることに着目しました。

今回の矢印アイコンには、Webフォントを利用しています。

つまり、WebフォントのCSSと同じものを、文字にも適用すれば、それだけで解決するのでは … ！？

いろいろ検証した結果、Webフォントだけが綺麗なのは、フォントの描画にアンチエイリアスをかけて滑らかに表示するための｢font-smoothing: antialiased」のおかげだと判明！

やったー、これで解決！

と思いきや …

何か全体的に薄くないですか …

適用前と比べてみましょう。

明らかに薄い！文字が読み難い！！

これでは、解決したとは言えません。
文字の色が少々おかしくても、ユーザーのことを考えると読みやすさのほうを優先すべきでしょう。

残念ながら、font-smoothing: antialiased を適用するのは諦めることにします …

解決法2：perspective

次に、Webフォントとはまた別に、3D風の回転アニメーションをさせているグローバルメニューの文字色も綺麗なことに気づきました。

3D表現をするためのCSSのどれかが原因かも！

検証していくと、奥行きの深さを指定する「perspective」のおかげだとわかりました。

色化けが起きるのはChromeだけですので、ベンダープレフィックスの「-webkit-perspective: 1」を適用してみると …

文字が読みやすいままで、文字色も綺麗にすることができました！

拡大したものを、適用前と比べてみましょう。

色が全然違う！
灰色の滲みもなく、綺麗になりました。

長年の悩みが解決できたので個人的にはすごく嬉しいです 😀

Chromeにて、青系の文字の色がおかしくなってしまった場合は、ぜひ「-webkit-perspective」をお試しください。