web-performance-seo
修復 Lighthouse 可存取性對比度錯誤
此技能修復因色彩對比度失敗導致的 PageSpeed Insights 和 Lighthouse 可存取性錯誤。它會掃描觸發可存取性審核失敗的 CSS 模式，並提供經過驗證的修復模式以改善您的 SEO 效能。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「web-performance-seo」。 我的網站在 Lighthouse 可存取性中顯示「!」而非分數
預期結果:
「!」表示審核失敗。常見原因包括：CSS backdrop-blur 或 filter、OKLCH/OKLAB 色彩、低透明度背景（< 0.4）、具有透明色彩的漸層文字，或沒有遮罩層的圖片上文字。建議使用以下命令掃描您的程式碼庫：`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+）
- 使用 forced-colors 媒體查詢以支援 Windows 高對比度模式
- 驗證對比度比率符合正常文字 4.5:1 和大文字 3:1 的要求
避免
- 使用 CSS filter 或 backdrop-blur 而未檢查可存取性影響
- 使用 OKLCH/OKLAB 色彩而未在 Lighthouse 中測試
- 在漸層背景上將文字色彩設為透明
- 將文字直接放置在圖片上而沒有適當的遮罩層