# Web 性能 SEO：可访问性对比错误修复 ## 何时使用 * PSI/灯塔可访问性显示“！”或错误而不是数字分数 * 颜色对比度审核错误或 getImageData 失败 * 需要改善影响 SEO 的可访问性信号 ## 工作流程 1. 再现 * 运行 Lighthouse 或 PSI；捕获失败的审核名称。 2.扫码了解常见触发 * CSS 滤镜/背景模糊、混合混合模式 * OKLCH/OKLAB 颜色 * 低不透明度背景 (< 0.4) * 渐变文字颜色：透明 * 图像上的文字，没有不透明的覆盖层 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 "背景剪辑.*文本|颜色.*透明" 。 ## 修复模式 ### 删除过滤器（关键） // 之前

// 之后

...

### 将 OKLCH/OKLAB 转换为 HSL/RGB /* 之前 */ :root { --primary: oklch(0.55 0.22 264); } /* 之后 */ :root { --primary: hsl(250, 60%, 50%); } ### 提高不透明度阈值 * 背景 >= 0.4（首选 >= 0.6） * 替换 /10 -> /40、/20 -> /40、/30 -> /60 ### 渐变文本后备 .title { 颜色：#111111; } @media（偏好对比：无偏好）{ .title.with-gradient { 背景：线性渐变（90deg，#0ea5e9，#6366f1）； -webkit-background-clip：文本；背景剪辑：文本；颜色：透明； } } @media（强制颜色：活动）{ .title.with-gradient { 背景：无；颜色：画布文本； } } ### 在图像上叠加文本

标题

## 验收标准 * 辅助功能分数是数字（不是“！”） * 颜色对比审核通过或列出可操作项目 * 普通文本的对比度 >= 4.5:1，大文本的对比度 >= 3:1 ## 注释 *“！”表明审核失败，而不是低分。 * 在等待 PSI 更新之前始终在本地进行测试。

网络性能搜索引擎优化

包含技能