web-performance-seo
Lighthouse アクセシビリティのコントラストエラーを修正
このスキルは、色のコントラストの失敗が原因で発生する PageSpeed Insights および Lighthouse のアクセシビリティエラーを修正します。アクセシビリティ監査の失敗を引き起こす CSS パターンをスキャンし、SEO パフォーマンスを向上させるための実証済みの修正パターンを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「web-performance-seo」を使用しています。 Lighthouse のアクセシビリティでスコアの代わりに「!」が表示される
期待される結果:
「!」は監査の失敗を示しています。一般的な原因には、CSS backdrop-blur またはフィルター、OKLCH/OKLAB カラー、低い不透明度の背景（0.4 未満）、transparent color を使用したグラデーションテキスト、オーバーレイなしの画像上のテキストなどがあります。次のコマンドでコードベースをスキャンすることをお勧めします：`rg -n "backdrop-blur|filter:|mix-blend-mode" .` などを使用して問題のあるパターンを特定します。
「web-performance-seo」を使用しています。 アクセシビリティのために CSS の OKLCH カラーを修正するにはどうすればよいですか？
期待される結果:
OKLCH を HSL または RGB に変換します。例えば、`--primary: oklch(0.55 0.22 264);` を `--primary: hsl(250, 60%, 50%);` に変換します。カラーピッカーやツールを使用して、Lighthouse が正しく分析できる標準的なカラースペースを使用しながら、視覚的な外観を一致させます。
セキュリティ監査
安全Static analysis detected external_commands patterns and weak cryptographic algorithms. Evaluation reveals these are FALSE POSITIVES. The 'external_commands' are CLI command examples in markdown documentation (ripgrep commands for code scanning), not executable code. The 'weak cryptographic algorithm' detections are OKLCH/OKLAB CSS color space specifications misidentified as crypto algorithms. This skill provides documentation and code patterns for fixing accessibility contrast issues - no security risks present.
中リスクの問題 (1)
低リスクの問題 (1)
品質スコア
作れるもの
失敗したアクセシビリティ監査の修正
Lighthouse のアクセシビリティセクションでスコアの代わりに「!」が表示される場合、このスキルを使用して失敗の原因となっている CSS パターンを特定し修正します。
アクセシビリティによる SEO 改善
アクセシビリティはランキング要因です。このスキルを使用して、検索エンジンのランキングに悪影響を与えるコントラストの問題を修正します。
アクセシビリティコードレビュー
デプロイ前に CSS とコンポーネントをレビューしてアクセシビリティの問題を確認し、コントラストの問題を早期に発見します。
これらのプロンプトを試す
Lighthouse のアクセシビリティ監査でスコアの代わりに「!」が表示されます。color-contrast 監査が失敗しています。この問題の原因となっている CSS パターンを特定して修正するのを手伝ってください。
CSS で OKLCH カラーを使用しており、Lighthouse でアクセシビリティの問題が発生しています。OKLCH をアクセシブルな HSL または RGB の代替手段に変換する方法を示してください。
私のウェブサイトはグラデーションテキストを使用していますが、Lighthouse が color-contrast の問題をフラグ付けしています。アクセシビリティ監査に合格する適切なカラーフォールバックを備えたグラデーションテキストのパターンを提供してください。
画像上にテキストがあり、コントラストがアクセシビリティ監査で失敗しています。十分なコントラスト比を確保するためのオーバーレイを追加する正しいパターンを示してください。
ベストプラクティス
- デプロイ前に Lighthouse または axe で常にローカルテストを行う
- 背景の不透明度を 0.4 以上に上げる（0.6 以上を推奨）
- Windows のハイコントラストモードサポートのために forced-colors メディアクエリを使用する
- 通常テキストで 4.5:1、大規模テキストで 3:1 のコントラスト比を満たすことを確認する
回避
- アクセシビリティへの影響を確認せずに CSS フィルターや backdrop-blur を使用する
- Lighthouse でテストせずに OKLCH/OKLAB カラーを使用する
- グラデーション背景の上でテキストカラーを transparent に設定する
- 適切なオーバーレイなしに画像の上にテキストを配置する