Web、UI与CSS

黑字也难读？检查含透明度的对比度

使用工具

辅助文字底色同为黑却淡，可能因 alpha 降低而与背景混合。白字置于半透明卡片，还受卡片后方影响。应分别填前景、背景、最终底色，不把单色结果扩展到整张照片或变化背景。

不透明前景与背景

foreground: #000000
background: #FFFFFF
ratio: 21:1

黑前景、白背景得比率 21，先建立不透明基准。比率描述相对亮度对比，不单独评估字体、显示分辨率或实际字号。

前景改 #777777，对白约 4.478。自行舍入 4.5 不代表达到普通文字 4.5:1。工具用未显示取整值判断，不能把边界失败舍入成通过。

带 alpha 的前景

foreground: rgba(0, 0, 0, 0.5)
background: #FFFFFF
composited RGB: 127.5, 127.5, 127.5
ratio: approximately 3.977:1

填 rgba(0,0,0,0.5)，黑与白各半合成灰，约 3.977:1，低于普通文字 AA 4.5。应看 finalForeground，不能仅凭未合成色是黑判断。

同前景置黑背景，合成仍黑，比率一。alpha 0.5 没有脱离背景的固定可读性结论。每个主题都需含透明度检查完整组合。

半透明卡片条件

foreground: #FFFFFF
background: rgba(0, 0, 0, 0.5)
backdrop: #FFFFFF → approximately 3.977:1
backdrop: #000000 → 21:1

白字置半透明黑卡，后方白则卡变灰，后方黑则保持黑。两色不足，需指定实际不透明底色。工具拒绝最终底色仍透明，避免未知条件下编造数值。

父元素 opacity 可能将文字背景作为组整体合成，分别给两色同 alpha 不保证等价。需确认透明度施加层级并检查渲染颜色。

WCAG AA 普通字 4.5:1、符合条件大字 3:1。大字按字号和粗细定义，不凭感觉。工具显示两者但不检查字体，大字通过不能直接用于小辅助文字。

对比通过不等于整页无障碍审核完成。焦点、链接、放大和非颜色提示仍需另查。目的是可读可操作，而不是增加通过标签。

单一采样色不能代表照片或渐变上全部文字。需查字下不同区域及悬停、选中、主题状态，可用不透明文字底板固定条件。工具不扫图或全状态，应记录具体测了哪组。