フォントカラーのおすすめ色はグレー！白背景に真っ黒（#000）は最適ではない！？

白背景におすすめのフォントカラーとは？

Webサイトと言えば、白背景に黒色の文字というのが定番です。
しかし、文章が読みやすいと感じるサイトはこの黒色にも秘密があるんですね…

当サイトは以前までは白背景（#ffffff）に黒色の文字（#000000）を使用していたのですが、他のサイトに比べてどうも文字が読みにくいことに気が付きました。

そこで調べると白背景に真っ黒な文字は目に優しくなく読み疲れするみたいです。

白色に黒色というのはコントラスト比が最大になる組み合わせで、目がチカチカしてしまうようです。フォントサイズや字体については気が回りますが、まさか黒文字が読みにくい原因だとは考えもしませんでした…

では白背景のWebサイトに最適なフォントカラーは何色なのか？
気になったので大手サイトのフォントカラーを調査し、最適なフォントカラーについてまとめました。

大手サイトのフォントカラー調査結果

大手サイトのテキスト部分に使用されているフォントカラーについて調べました。
各サイトの本文にあたるところを検証します。

以下が調査時に大手サイトで使用されていたフォントカラーの一覧です。

各サイトの背景は白色ですが、文字色は黒寄りのグレーが採用されています。
特記すべきは、動画サイトでもECサイトでもSNSでも真っ黒（#000000）は一切使われていないという点でしょう。

画面でぱっと見たところ、ただの黒色にしか見えないところもありますが、実は黒色ではなく黒に近いグレーなんですね！

ブログにおすすめのフォントカラーはグレー

大手サイトで使用されているフォントカラーを見る限り、真っ黒ではなくグレーが良いことが分かりましたが、グレーと言っても各サイトでバラつきがあり、迷います。

そこで迷った時におすすめしたい色が、カラーコード「#333333」のグレーです。
先ほどの調査結果では「日経新聞」や「5ちゃんねる」が採用している色です。
さらにこの色は多くのブロガーさんもオススメしている色でもあります。

うちも「#000000」から「#333333」に変更しましたが、読みやすくなりました！

百聞は一見に如かずとも言いますので、真っ黒（#000000）とグレー（#333333）とグレー（#545454）を比較してみましょう。

【フォントカラー#000000のサンプル文章】
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。

【フォントカラー#333333のサンプル文章】
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。

【フォントカラー#545454のサンプル文章】
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。

黒とグレーでは結構違いますね！黒色の強さは好みですかね…

補足としてあまりにも薄すぎるグレーはオススメしません！
なぜかというとパソコンのモニターなどは経年劣化で色合いが薄くなるからです。
長いこと使っている画面で見るとかえって黒色よりも見にくくなります。

そんな理由もあってフォントカラーは「#333333」あたりがオススメです。
上のサンプル文章だと真ん中に設定しているカラーコードがこれです。

日本経済新聞の電子版が使用しているフォントカラーとか最強でしょ？←

背景色と文字色のコントラスト比について

最後に黒色（#000000）とグレー（#333333）のコントラスト比についてです。
先ほどのサンプル文章のように上下に並べて比較すると黒とグレーの違いが良く分かりますが、全文字グレーだと文字がグレーだという事には多分気づきません。

人の目には黒っぽければ黒に見えますからねぇ…
ではブラウザからはどのように見えているのでしょう？

気になったのでブラウザでコントラスト比を測ってみました。
Chromeの機能で背景色（#ffffff）と真っ黒（#000000）およびグレー（#333333）のコントラスト比を見てみましょう！

まずは白背景（#ffffff）に真っ黒の文字（#000000）の場合のコントラスト比です。

#000000のコントラスト比は21（最大）

コントラスト比が低ければ低いほど、背景色と同色に近く、可視性が低いという事です。白背景に黒文字だとコントラスト比は最大値の21となります。

文章が一番はっきりと見える色の組み合わせではありますが、これは見続けると目が疲れてくる強いコントラストだとも言えます。

#333333のコントラスト比は12.63

一方でグレーの文字（#333333）の場合、コントラスト比は12.63でした。
コントラスト比がほぼ半分になっているにも関わらず、可視性はそれほど悪いようには感じません。これが目が疲れにくいとされる理由です。

今回はフォントカラーについて注目しましたが、フォントカラーが真っ黒でも背景色を変更すれば同じようなコントラスト比にすることも出来そうですね。
ただ、Webサイトは大半が白背景なのでやはり文字色を変更するのが定石でしょう。

フォントカラーの変更方法について

フォントカラーの変更方法ですが、これはサイトによって異なります。

Wordpressの方は「テーマ名　フォントカラー変更」などで検索すれば、自分が使用しているテーマのフォントカラーの変更方法が出てくると思います。
人気のテーマなら一括で本文のフォントカラーを変更する機能があるはずです。

pタグに直接CSSを当てても良いですが、除外設定が少し難しいと思います。

まとめ

以上、白背景のWebサイトにおすすめのフォントカラーについてでした。
真っ黒な文字はハッキリ見えすぎて目に優しくないので、グレーがおすすめです！
迷った時は「#333333」にしましょう。ちなみに「#333」と省略できます。

同じような内容で「最適なリンク色」を調査した時の記事（↓）もあります。
リンク色についても大手サイトを調査したので、是非チェックして下さい！

また「最適なフォントサイズ」についても調査し、まとめています↓

う～ん今まで読みやすい文字を求めて、フォントサイズを変更したり、字体を変えたりしてきたのですが、まさかフォントカラーが黒色だと目が疲れるとは…

ある程度のコントラスト比があればフォントカラーはSEOに直接は影響しないと思いますが、目を疲れにくくするというのも立派なユーザービリティの向上ですね。

ひとこと

僕は長時間パソコンの画面を見るのでグレーが好きなのですが、真っ黒が良いという意見も多いようです。こればかりはサイト運営者次第ですね...。

パソコンやブラウザにハイコントラスト機能はありますが、真っ黒 or グレーの勝負はつきません。