ワードプレスサイトで背景色と前景色には十分なコントラスト比がありません　とページスピードテストで表示されるときの対処方法

Google Page Speed Insights で背景色と前景色には十分なコントラスト比がありません　と警告が出る場合の対処方法をご紹介いたします。

「背景色と前景色には十分なコントラスト比がありません」の意味

Google PageSpeed Insights はサイトのページ速度や、ユーザビリティー(サイトの使い勝手)を機械的に判定してくれるサイトです、

こちらのサイトは検索エンジンがどのようにサイトを認識しているかともいえる為できるだけ警告を解決することで検索順位にも良い影響を与えるものと考えられます。

「背景色と前景色には十分なコントラスト比がありません」は、文字がその下の入っている要素と濃さの比が低く、見にくい可能性がある　という警告になります。

この警告は、その下の下の要素との濃さの比ではなく、直下の要素とそれに含まれる文字の濃さの比を指摘しますので見た目がちゃんと白地に黒の文字でも警告が出てくることがあります。

例

①body 白　＞　②次のDIV　透明　＞　文字　黒

となっている場合、①ではなく②で判定してきます！

https://dequeuniversity.com/rules/axe/4.7/color-contrast にて、十分なコントラスト比のある色を作成することができます。

①文字色を指定します
②その背景の色を指定します
③小さいテキストの場合の濃淡判定です
④大きなテキストの場合の濃淡判定です
⑤Passは合格を意味します

サイトの文字色や、その背景色を指定するにはスタイルシートというデザインを制御する仕組みを利用します。
この為のコードは下記のようになります。

.背景の要素のクラス{
    background-color:背景色;
    color:文字色;
}
/*pタグにすでに色が指定されている場合は下記の記載が必要な場合もございます*/
.背景の要素のクラス p{
    color:文字色;
}

ワードプレスのスタイルシートは、テーマに含まれるstyle.cssというファイルに記載します。
style.cssを編集するには、ワードプレスの管理画面＞外観＞テーマファイルエディター(テーマの編集)＞style.cssを選択の上編集できます。

もしくはワードプレスの管理画面＞外観＞カスタマイズ　の追加CSSに記載することもできる場合がございます。

CSSを編集した場合は、プラグインやブラウザーのキャッシュを削除して編集結果を確認してみてください