PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
必须用工具量化验证对比度，chrome devtools 的数值源于渲染后调用无障碍api执行wcag算法；webaim contrast checker最可靠，需输入叠加后的十六进制色值；color-contrast()函数全浏览器不支持，动态配色须用js+wcag算法。
不能靠“看起来清楚”来判断，必须用工具量化验证；CSS本身不提供自动检测能力，所有合规性确认都发生在渲染后或运行时。
Chrome DevTools 里看到的对比度数值是怎么来的
它不是 CSS 解析时算出来的，而是浏览器在元素渲染完成后，调用内部无障碍 API 对 color 和直接包裹它的 background-color（已解析变量、叠加 opacity、应用 filter 后）执行 WCAG 算法得出的实际比值。
- 必须选中真实文本节点（如
<p></p>、<span></span>），不能只看类名或:root变量定义 - 如果颜色来自继承、伪元素（
::before）或currentColor，DevTools 显示的是 “(computed)”，需手动查父级或伪元素的getComputedStyle - 遇到
rgba(255,255,255,0.9)叠在深色容器上，DevTools 显示的仍是半透明白底，但视觉对比可能极低——此时要自己算叠加后的背景色再测
WebAIM Contrast Checker 是最可靠的入门工具
它免费、无需登录、支持透明色解析，输入两个最终渲染出的十六进制值（如 #333 和 #f8f9fa），立刻返回是否满足 4.5:1（普通文本）或 3:1（大文本）。
- 常见错误：把
rgba(0, 0, 0, 0.7)直接输进去，工具会按“半透明黑”处理，但实际对比取决于底层背景——应先在 DevTools 的 Computed 面板复制 resolved 的 rgb 值 - 设计师给的
#666配#eee，理论值看似可用，实测仅2.9:1，完全不达标 - 禁用态（
:disabled）、悬停态（:hover）、暗色模式（@media (prefers-color-scheme: dark)）需单独导出颜色再测，不能只验默认态
为什么 color-contrast() 函数不能用
color-contrast() 目前只是 CSS Color Module Level 5 草案，在 Chrome、Firefox、Safari 全系都不支持。你写上去不会报错，但会被忽略，样式直接回退到前一个声明。
- 错误示例：
color: color-contrast(#333 vs #fff, #000);渲染结果就是默认文本色或继承色 - PostCSS 也没有成熟插件能安全转译它；MDN 和 Can I Use 均标为 “No support”
- 真正在项目里做动态配色（如主题切换、按钮悬停换字色），得靠 JS + WCAG 算法，推荐用
@deque/busybuddy或color-contrast（npm 包，和 CSS 函数同名但无关） - 注意 alpha 通道：半透明色必须先叠加到预期背景上，再算最终对比度，不能直接对
rgba值运算
真正容易被忽略的点是：字体粗细、字号、抗锯齿和子像素渲染会影响人眼识别效果，即使工具显示 12.6:1，小字号 #333 在 #fff 上仍可能被低视力用户读错。所以工具数值只是底线，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
