对比度达标不能仅在设计稿检查，需在实际渲染色值上验证
别名: 合成色对比 · computed vs rendered color · eyedropper contrast
概念解释
设计稿上的色板是意图，帧缓冲区里的像素才是对比度。半透明、阴影、背景图、浏览器默认外观、系统滤镜都会改掉那两个色值。实际渲染对比（rendered contrast）要求取样发生在用户看见的那一层，而不是发生在样式表或画板色标上。
一对在稿里算过 3.2:1 的图标，叠在 80% 不透明的白蒙版上再抗锯齿一圈，边缘像素可能已经掉到阈值以下。稿过了不等于屏过了。
机制
颜色在管线里被改写多次。样式里写的是 sRGB 意图值；合成时乘上透明度、叠在照片或渐变上、再被 box-shadow 的半透明沿扩一圈。细描边只有一两像素，抗锯齿会掺进邻色，取色器点到的往往是混合物，不是色板。操作系统的夜览、真彩色温、浏览器强制色彩、硬件 P3 与 sRGB 之间的转换，都会让「计算值」和「看见的值」分家。
表单控件若 appearance 仍是系统默认，设计稿里那条边框根本不会被画出来——画出来的是引擎的边。对比度工具若读的是 CSS 计算色，读到的是一个从未成为像素的数字。
怎么研究
用取色器或能截取合成结果的对比工具，点渲染后的像素，对照同一位置的设计稿色标与 CSS 计算值，三列记下来。把半透明叠层、阴影边缘、1 像素描边、系统默认控件单独列为易漂移项。
自变量：透明度、混合模式、背景复杂度、是否启用系统色温或强制色彩。 因变量：稿上比值、计算比值、像素比值三者的差；差值大到跨过阈值的次数。
WCAG-EM 抽样时应在目标浏览器、目标外观（浅色 / 深色 / 高对比）下各取一次像素，而不是只在设计文件里跑一遍自动插件。APCA 同样必须喂渲染色，喂色标没有意义。
边界
纯色、不透明、无阴影、无背景图的大色块，稿和屏通常一致，重复取样的收益低。视频帧、Canvas 动画、WebGL 的对比随时间变，单帧取样不能代表整段。打印样式、电子书导出不走这块屏幕管线。色觉模拟滤镜加在取色器之前，会二次改写像素，测的是滤镜而不是产品。
怎么落地
- 把对比验收放在真机或真实浏览器的合成结果上：浅色、深色、系统高对比各取一次像素，不要只跑设计文件插件。
- 半透明文本与半透明图标按叠完之后的混合物计算；有背景图就在图的最亮和最暗区域各取一次。
- 原生表单、第三方控件、阴影描边这些稿里可能不存在的像素，必须打开实现再量。
- 验证：挑一条主路径，对每个图标、边框、态指示用取色器点渲染像素，记下比值。凡是稿上过、像素上不过的，以像素为准判失败，并回查是透明度、邻色还是系统外观造成的漂移。