ブログの文字色は黒がNG！WordPressの文字色を変更して読みやすくする方法を解説

「ブログの文字色は黒一択」だと思い込んでいる人が多いですが、実は文字色を黒にするのはNGです。

この記事では、ブログの文字色に黒がNGな理由と、文字色を変更する方法について解説します。

ブログの文字色に黒がNGな理由

ブログの文字色に黒がNGな理由はこれに尽きます。

ブログの背景色が白（#ffffff）、文字色は黒（#000000）だと、コントラストが強すぎてユーザーの目に負担がかかります。

記事を読むとすぐ目が疲れてしまうというのは、ユーザビリティーの点から大きな問題です。

いくら記事の内容が面白くても、目が疲れるとユーザーは早々に離脱してしまいます。

離脱率（直帰率）が高い状態が継続すると、Googleの検索エンジンの評価が下がって検索順位が落ちるリスクがあります。

つまり、ブログの文字色を黒にするのは、ユーザビリティーとSEOの両方でNGです。

ベースカラーを含むブログの色については、下の記事で詳しく解説しています。

ブログの色：ベースカラー（背景色）・メインカラー・アクセントカラーの決め方

企業サイトも黒は使っていない

大手企業のサイトで使われている文字色を確認してみました。

Amazon

楽天市場

Google検索結果

Yahoo!ニュース

ブログの文字色はグレーが読みやすい

結論から書くと、ベースカラー（背景色）が白（#ffffff）の場合に読みやすい文字色はグレーです。

グレーと言ってもたくさんの色がありますが、ブログの文字色として使いやすいのは次の５つです。

いずれも濃いグレーで限りなく黒に近いです。

でも、黒（#000000）と比べると白とのコントラストが弱まり、文章を読んだときの目の負担が軽くなります。

その他の目が疲れにくい色

上に書いたのは私が本業ブログで使うことの多い色です。

本業のコンサル生に聞いてみたところ、他にも様々な色を使っていることが分かったので参考に書いておきます。

WordPressブログの文字色を変更する方法

WordPressブログの文字色を変更する方法について書いていきます。

文字色を確認する

実はブログの文字色は、テーマによって黒以外が使われていることがあります。

例えば、WordPress有料テーマ「STORK」の場合、本文の文字色はグレー（#545B63）がデフォルトです。

そのため、まずは使用中のテーマに設定されている文字色を確認します。

文字色の確認にはGoogle Chromeの「ColorPick Eyedropper」という拡張機能を使います。

ColorPick Eyedropperのページに移動し、「Chromeに追加」を押します。

すると「ColorPick Eyedropperを追加しますか」という表示が出るので、「拡張機能を追加」を押します。

アドレス欄の横に色相マークが表示されれば完了です。

色相マークをクリックすると、下の画像のような表示が出てきます。

この状態でマウスの「←（カーソル）」を文字に合わせると、文字色が表示されます。

WordPressブログの文字色を変更する

①外観→②カスタマイズと進みます。

カスタマイズ画面が開くので、③「追加CSS」を開きます。

（使用しているテーマによって「追加CSS」の位置は異なります。）

④任意のカラーコードを入力して「公開」を押します。

任意のカラーコードを入力するときのコードは次のとおりです（コピペOK）。

body{
 color: 【任意のカラーコード】;
}

ブログの文字色のまとめ

ブログの文字色は、ベースカラー（背景色）が白（#ffffff）の場合は黒（#000000）はNGです。

コントラストで文字が読みにくくなるからです。

濃いグレーに変更することで読みやすさが向上し、ユーザーにとって居心地の良いブログになります。

WordPressブログなら簡単なコードをコピペするだけで文字色を変更できるので、使用中のテーマの文字色が黒なら早めに変更しておきましょう。

もし、ベースカラー（背景色）を白以外にする場合は、コントラストの問題がなければ黒でもOKです。

ただし、実際に記事を読んでみて目が疲れたり読みにくかったりする場合は、読みやすいように調節することが大切です。