Web无障碍：如何判定文本描边与背景的对比度是否合规？

核心问题 #

请问如何判断背景色（background-color）与文本描边之间的对比度是否满足无障碍要求？或者说，是否绝不允许通过文本描边来提升对比度，必须仅依赖文本颜色与背景色的搭配？

1. WCAG规范的核心判定逻辑 #

WCAG（Web内容无障碍指南）对文本对比度的要求，核心是确保文本的可识别区域与背景有足够对比度。文本描边如果是构成文本可读性的关键部分，就需要纳入对比度判定范围。

2. 具体判定规则 #

• 如果文本本身颜色与背景对比度不达标，完全依赖描边来识别文字，那么描边与背景的对比度必须符合WCAG最低标准：
  • 普通文本（18pt以下或14pt以下加粗）：对比度≥4.5:1
  • 大文本（18pt及以上或14pt及以上加粗）：对比度≥3:1
• 如果文本本身颜色已经满足对比度要求，描边仅作为装饰元素，那么描边的对比度没有强制要求，但需保证其不会干扰文本的正常阅读。

3. 关于描边提升对比度的合法性 #

WCAG并未禁止使用文本描边提升可读性，只要最终文本的可识别部分（无论是文本本身还是描边）与背景的对比度达标即可。但需要注意两点：

• 描边宽度不能过细，建议至少1px，避免出现断裂的轮廓，确保低视力用户能清晰识别；
• 优先保证文本本身颜色与背景的对比度达标，描边仅作为辅助增强手段，不要让用户必须依赖描边才能阅读。

内容的提问来源于stack exchange，提问作者flen