PageSpeed Insightsの「背景色と前景色には十分なコントラスト比がありません」は、文字色と実際の背景色の組み合わせを確認して直します。文字色だけから合否は決まりません。
通常文字と大きな文字の基準
WCAG 2.2のレベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上が基準です。大きな文字は通常ウェイトで18pt（24 CSS px）以上、太字で14pt（約18.67 CSS px）以上を指します。境界値は四捨五入して合格にしません。4.499:1は4.5:1未満です。
白背景を前提に色を比較する
背景が白（#ffffff）の場合、#b18e37は約3.091:1、#94712cは約4.509:1です。後者は通常文字の基準をわずかに上回ります。背景が変わると結果も変わるため、淡い背景や透明度がある場合はこの数値を流用しません。
.waza-contrast-sample {
color: #94712c;
background-color: #ffffff;
padding: 1em;
font-size: 16px;
font-weight: 400;
}子テーマのCSSなどへ追加し、対象の段落ブロックの追加CSSクラスへ waza-contrast-sample を指定します。サイト全体の文字色を一括変更する例ではありません。
白い背景に、文字色 #94712c を指定した表示例です。
実際の要素を調べて再測定する
指摘された要素を開発者ツールで選び、計算後のcolorと背景を確認します。背景が透明なら親要素、画像やグラデーションなら文字の背後の色も調べます。hover・focus時やスマートフォン幅で背景が変わる箇所も確認してください。
変更後は対象URLを再測定し、同じ要素の指摘が解消したか確認します。コントラストが改善しても、ページ全体のアクセシビリティやPageSpeedスコアの合格を保証するものではありません。戻す場合は追加クラスと今回のCSSを外します。
基準：W3Cのコントラスト（最低限）。文字の太さとフォント指定はWebフォントの指定方法で扱っています。
よくある質問：PageSpeed Insightsの「背景色と前景色には十分なコントラスト比がありません」を解決する方法
「背景色と前景色には十分なコントラスト比がありません」と指摘されたら、どうしますか？
記事では、文字色と実際の背景色の組み合わせを確認して直します。文字色だけから合否は決まりません。
合格の基準は、どれくらいですか？
記事では、WCAG 2.2のレベルAAで、通常の文字は4.5:1以上、大きな文字は3:1以上が基準です。大きな文字は通常ウェイトで18pt（24 CSS px）以上、太字で14pt（約18.67 CSS px）以上を指します。境界値は四捨五入して合格にしません。4.499:1は4.5:1未満です。
具体的な色の例を教えてください。
記事では、背景が白（#ffffff）の場合、#b18e37は約3.091:1、#94712cは約4.509:1で、後者は通常文字の基準をわずかに上回ります。背景が変わると結果も変わるため、淡い背景や透明度がある場合はこの数値を流用しません。
CSSは、どこに追加しますか？ サイト全体の文字色が変わりますか？
記事では、子テーマのCSSなどへ追加し、対象の段落ブロックの追加CSSクラスへ専用クラスを指定します。サイト全体の文字色を一括変更する例ではありません。
指摘された要素は、どう調べますか？
記事では、指摘された要素を開発者ツールで選び、計算後のcolorと背景を確認します。背景が透明なら親要素、画像やグラデーションなら文字の背後の色も調べます。hover・focus時やスマートフォン幅で背景が変わる箇所も確認してください。
変更したあとは、どうしますか？
記事では、変更後は対象URLを再測定し、同じ要素の指摘が解消したか確認します。コントラストが改善しても、ページ全体のアクセシビリティやPageSpeedスコアの合格を保証するものではありません。
元に戻すには、どうしますか？ 基準は今も同じですか？
記事では、戻す場合は追加クラスと今回のCSSを外します。基準はW3Cのコントラスト（最低限）で、文字の太さとフォント指定はWebフォントの指定方法の記事で扱っています。基準やPageSpeed Insightsの表示は変わる可能性があるため、最新は公式で確認してください。
