web-performance-seo

Web パフォーマンス SEO：アクセシビリティのコントラストエラーを修正

使用するタイミング

• PSI／Lighthouse のアクセシビリティで、数値スコアではなく「!」またはエラーが表示される場合
• color-contrast 監査でエラーが発生する場合、または getImageData の失敗がある場合
• SEO に影響するアクセシビリティのシグナルを改善する必要がある場合

ワークフロー

1. 再現する
   • Lighthouse または PSI を実行し、失敗した監査名を記録します。
2. よくある原因がコードにないかスキャンする
   • CSS フィルター／背景のぼかし、mix-blend-mode
   • OKLCH／OKLAB カラー
   • 不透明度の低い背景（< 0.4）
   • color: transparent を使ったグラデーションテキスト
   • 不透明なオーバーレイのない、画像上のテキスト
3. 優先順位に従って修正する
   • フィルター／ブレンドモードを削除します
   • OKLCH／OKLAB を HSL／RGB に変換します
   • 不透明度のしきい値を上げます
   • グラデーションテキストに単色のフォールバックを追加します
   • 画像上のテキストの背後にオーバーレイを追加します
4. Lighthouse／axe でローカル検証します
5. デプロイ後に PSI で検証します

高速スキャン用コマンド

rg -n "backdrop-blur|filter:|mix-blend-mode" .
rg -n "oklch|oklab" .
rg -n "/10|/20|/30|opacity-25|opacity-0" .
rg -n "background-clip.*text|color.*transparent" .

修正パターン

フィルターを削除する（重要）

// Before
<div className="bg-card/50 backdrop-blur-sm">...</div>
// After
<div className="bg-card/80">...</div>

OKLCH／OKLAB を HSL／RGB に変換する

/* Before */
:root { --primary: oklch(0.55 0.22 264); }
/* After */
:root { --primary: hsl(250, 60%, 50%); }

不透明度のしきい値を上げる

• 背景は 0.4 以上（0.6 以上を推奨）
• /10 -> /40、/20 -> /40、/30 -> /60 に置き換えます

グラデーションテキストのフォールバック

.title { color: #111111; }
@media (prefers-contrast: no-preference) {
  .title.with-gradient {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .title.with-gradient { background: none; color: CanvasText; }
}

画像上のテキスト用オーバーレイ

<div className="relative">
  <img src="/hero.jpg" alt="Hero" />
  <div className="absolute inset-0 bg-black/60"></div>
  <h1 className="relative text-white">Title</h1>
</div>

受け入れ基準

• アクセシビリティスコアが数値である（「!」ではない）
• color-contrast 監査に合格するか、対応可能な項目が一覧表示される
• コントラスト比が、通常のテキストでは 4.5:1 以上、大きなテキストでは 3:1 以上である

備考

• 「!」はスコアが低いのではなく、監査に失敗したことを示します。
• PSI の更新を待つ前に、必ずローカルでテストしてください。