「背景色と前景色には十分なコントラスト比がありません」と言われた時

新しいPageSpeed Insights 対策．

PageSpeed Insights で ユーザー補助 という種別の中に「背景色と前景色には十分なコントラスト比がありません」という文言が出てくるときがある．

「背景色と前景色には十分なコントラスト比がありません」と指摘を受けた時

要はコントラスト比が足りなくて見にくいと言われているわけである．
「文字と背景の色が似ているよ」と言われている．

詳細のリンクを押すとText elements must have sufficient color contrast against the background(テキスト要素は、背景に対して十分な色のコントラストを持っている必要があります)に飛べる．

コントラスト判定ツールを使う

便利なことにこのページでは背景と文字の色を選択すると判定してくれるスクリプトが動いている．

この色だと結構はっきり文字読めるなと思うが，このレベルでもダメということが分かる．

ここに現在の文字と背景の色を入れてやれば FAIL(日本語だと「失敗します」) と言われるので，PASS (パス)になるまでスライダーを動かせば簡単に問題ないコントラストの配色が分かる．

上の画像で指摘を受けたものに関してはテキストが #FFF(白) だったのだが，背景が #C63 だとダメだと指摘されたのでスライダーを動かして，パスになる #8B4623 に変更したところ，PageSpeed Insights でも警告されなくなった．

PageSpeed Insights 対策

• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• FID (First Input Delay) とは
• Youtube での複数動画を埋め込みページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 第三者コードの影響を抑えてください
• 静的なアセットと効率的なキャッシュポリシーの配信
• FCP (First Contentful Paint) とは
• テキスト圧縮の有効化
• タップ ターゲットのサイズが適切に設定されていません
• 不適切なアスペクト比の画像が表示されています
• リンクはクロールできません
• リンクに識別可能な名前が指定されていません
• 適切なサイズの画像
• ページ上で視認性の高い動画は検出されませんでした
• 「INP の問題」の改善方法