PageSpeed Insights│リンクは色に依存して識別可能ですを解決する方法

PageSpeed Insightsでリンクは色に依存して識別可能ですと指摘されることがあります。

この解説方法を解説します。

著者

motoki

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

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

MOTOKI合同会社

カスタマイズの依頼・相談

PageSpeed Insightsのリンクは色に依存して識別可能ですを解決する方法

解決方法は非常に簡単です。

まず色ですが、4.5:1のコントラスト比にしましょう。

やり方は下記の記事が参考になります。

あわせて読みたい

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

しかしコントラスト比があっても指摘されることがあります。

その場合はリンクに下線を入れることで解決します。

SWELLであればカスタマイズ＞「投稿・固定ページ」＞コンテンツのデザイン＞テキストリンクの項目のテキストリンクにアンダーラインを付けるにチェックします。

SWELLじゃないテーマの場合はaタグに下線をつけるCSSで解決します。

a {
    text-decoration: underline;
}

以上です。