You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

核心问题

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


解答

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

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

2. 具体判定规则

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

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

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

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

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

火山引擎 最新活动