Googleが提供するサイト診断ツール「PageSpeed Insights」で“背景色と前景色には十分なコントラスト比がありません”が出た時の対処法です。
これはユーザー補助の項目に出る改善案で、文字色と背景色のコントラスト比が不十分であり、色合いが薄く見にくい表示がページにある時に出る問題です。
この問題はCSSで文字色（背景色）を変更することで簡単に解決できます。
当サイトでも一部分が指摘されたので、色合いを変更して対処しました。
この記事の目次
「背景色と前景色には十分なコントラスト比がありません」の対処法
自サイトにある問題個所を指摘してくれる「PageSpeed Insights」ですが、2022年末ごろに仕様変更があり、より細かい内容の改善案が表示されるようになりました。
そこで早速当サイトもチェックしてみると、新しい指摘が見つかりました。
PageSpeed Insightsで当サイトを検証した結果
背景色と前景色には十分なコントラスト比がありません
低コントラストのテキストを使用すると、多くのユーザーは読むことが困難または不可能になります。
とあります。
ここで言う「前景色」とは多くのサイトの場合「文字色」になるかと思います。
指摘内容は説明の通りで、ページ内のどこかにコントラスト不足で読みにくい箇所が存在しており、ユーザビリティ的に良くないよ！という内容です。
サイトの視覚に関する改善案ということですね・ｗ・
ご存じの通り、コントラスト比が一番高くなるのは白に黒といった組み合わせです。
コントラスト比が低くなるのは、黒にグレー、赤にピンクといったパターンです。
“背景色と前景色には十分なコントラスト比がありません”の対処法は至ってシンプルで、背景色または前景色（文字色）をCSSで変更し、コントラスト比を上げて今よりも見やすい色合いに変更すればOKです。
では早速、対処方法を見ていきましょう・ｗ・
対処法．該当コンテンツの色合いを変更する
作業の前にページ上のどの部分が指摘されているのか？を確認します。
「PageSpeed Insights」でページを検証し、結果画面を確認しましょう。
「PageSpeed Insights」で指摘された部分を確認する
当サイトでは、ソースコードの表示時に使用しているpreタグのst-pre-textというCSSのクラス部分が指摘されていました。
コントラスト比が低いと指摘された部分
ここです。別にそんなに見にくいこともなさそうですが...意外と厳しい。
とはいえ、確かに「グレー背景」に「白文字」の組み合わせは見にくいかも...。
特にモニターが劣化していると上手く色が出なかったりもしますので、対処します。
CSSを変更して文字色（背景色）を変更する
当サイトはWordPressで運営しているので、テーマのCSSを変更するために「style.css」というファイルを編集します。
WordPressの場合「style.css」は以下の場所にあります。
/wp-content/themes/子テーマ/style.css
このファイルを開いて問題の「st-pre-text」というCSS（クラス）を探します。
今回は「背景色」を黒寄りのグレーに変更した
文字色は真っ白（#fff）から変更する気はないので背景色の方を変更します。
/*変更前のコード*/
pre.st-pre .st-pre-text {
background: #B0BEC5;
}「#B0BEC5;」というカラーコードを使用していたので、これを少し黒くします。
/*変更後のコード*/
pre.st-pre .st-pre-text {
background: #6D767A;
}変更したら、キャッシュクリアを行ってから確認します。
背景色を少し黒くしてみた
コントラスト比を上げたことで、思ったよりも見やすくなりました。
色合いを決める時はチェッカーを使うと便利
どれくらいの色にしたら良いのか分からない時は、PageSpeed Insightsの該当項目の「詳細」からコントラスト比のチェッカー（↓）を開くことが出来ます。
外部リンク
【Color Contrast Analyzer】
テキスト要素は、背景に対して十分な色のコントラストを持っている必要があります | Deque University | Deque Systems
上記のチェッカーを使って色をチェックし、結果が「パス」になればOKです。
見たところ文字サイズが小さい場合は、その分可視性が悪くなるのでコントラスト比がより高めになる色合いにしないと合格にならないみたいです。
ただ、これくらいなら色変更→PageSpeed Insightsで確認→ダメなら色変更...という作業を繰り返してもそれほど時間はかかりません。
対処したらPageSpeed Insightsで確認する
CSSを編集し、色合いを変更できたらPageSpeed Insightsで確認します。
背景色と前景色には十分なコントラスト比があります
OKですね！
複数の箇所が指摘されている場合は、それぞれの箇所に当てているCSSクラスを編集して対処していきましょう。
普通のサイトならページごとに使用しているCSSが異なるはずなので、今回のページの対処が済んだら別のページもPageSpeed Insightsでチェックし、同じ指摘が出ないか確認しておくと良いです。
個人的には奇麗な色合いで見にくい文字よりも、シンプルな色合いでハッキリ見えるサイトの方が好印象です←
まとめ
以上、PageSpeed Insightsで「背景色と前景色には十分なコントラスト比がありません」が出た時の対処法でした。
SEOにどの程度影響するのかは分かりませんが、サイトコンテンツの見やすさ、読みやすさに関係する内容なのでSEOに関係なく対処しておきたい内容ですね。
過去の記事（↓）で読みやすいフォントカラーについても検証しています。
-
- フォントカラーのおすすめ色はグレー！白背景に真っ黒（#000）は最適ではない！？
続きを見る
「Chromeでコントラスト比を測る方法」についても書いていますので、こちらの記事も是非参考にしてくださいネ！ではではこのへんで・ｗ・
