GoogleのPageSpeed InsightsやLighthouseのユーザー補助の項目で背景色と前景色には十分なコントラスト比がありませんと指摘されることがあります。
このコントラスト比は具体的にどのようなものかを解説いたしますと、以下になります。
通常テキストつまり太字でないフォントサイズ24px未満のテキストには4.5 : 1(文字/前景色 : 背景色) 以上のコントラスト比が必要です。
本記事ではこのコントラスト比を改善する具体的な方法を解説いたします。
目次
PageSpeed Insightsで背景色と前景色には十分なコントラスト比がありませんを解決する方法
対応方法は簡単です。
コントラスト比を調べるサイトがあるので、そこで調整して4.5:1以上を目指します。
まずは指摘された色を入力してみました。
結果は3.09:1でした。#b18e37
スライダーで調整して、4.5:1のコントラスト比率をみつけます。
#94712C
が良さそうです。
あとはサイトの概要箇所の色を修正して、再度調査してみましょう。
合格するはずです。