PageSpeed Insights│背景色と前景色には十分なコントラスト比がありませんを解決する方法

GoogleのPageSpeed InsightsやLighthouseのユーザー補助の項目で背景色と前景色には十分なコントラスト比がありませんと指摘されることがあります。

このコントラスト比は具体的にどのようなものかを解説いたしますと、以下になります。

通常テキストつまり太字でないフォントサイズ24px未満のテキストには4.5 : 1(文字/前景色 : 背景色) 以上のコントラスト比が必要です。

本記事ではこのコントラスト比を改善する具体的な方法を解説いたします。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

PageSpeed Insightsで背景色と前景色には十分なコントラスト比がありませんを解決する方法

対応方法は簡単です。

コントラスト比を調べるサイトがあるので、そこで調整して4.5:1以上を目指します。

まずは指摘された色を入力してみました。

結果は3.09:1でした。#b18e37

スライダーで調整して、4.5:1のコントラスト比率をみつけます。

#94712Cが良さそうです。

あとはサイトの概要箇所の色を修正して、再度調査してみましょう。

合格するはずです。

  • URLをコピーしました!

サービス

Service

WordPressの内部構造調査のサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次