Last Updated on 2024年9月02日 by ワードプレスの学校 学長 柳内郁文
サイトの表示スピードを改善する方法を何回かに分けて解説しています。
今回は「背景色と前景色には十分なコントラスト比がありません 」と言われるケースがあります。
これはサイトの表示スピードとの関係はありませんが、修正の必要ですので、ココで解説いたします。
背景色と前景色には十分なコントラスト比がありません
ページスピードインサイト（https://pagespeed.web.dev/）で、上記のメッセージが出ることが稀にあります。
これはボタンやバナーなどに重ねた背景の色とテキストの色のコントラストを指摘しているケースが多い印象です。
Googleでは、以下のように定義されています。
- 大きいテキストは3：1のコントラスト比が必要
- 大きいテキストとは、18ポイントの通常の文字、もしくは14ポイントの太文字
- それ以下の小さいテキストは、4.5：1のコントラスト比が必要
これは視力の弱い方や色覚異常がある方のための配慮となっています。
この改善にはコーポレートカラーやサイトのテイストに関係なく、クリックできる要素や重要なテキスト情報には充分なコントラストをつけるように色を調整してください。
サイトの表示速度改善
サイトの表示速度の改善について、以下で詳しく解説しています。
高速化シリーズ
実際に高速化された制作実績をこちらで公開しています。
