Web无障碍:如何判定文本描边与背景的对比度是否合规?
核心问题
请问如何判断背景色(background-color)与文本描边之间的对比度是否满足无障碍要求?或者说,是否绝不允许通过文本描边来提升对比度,必须仅依赖文本颜色与背景色的搭配?
解答
1. WCAG规范的核心判定逻辑
WCAG(Web内容无障碍指南)对文本对比度的要求,核心是确保文本的可识别区域与背景有足够对比度。文本描边如果是构成文本可读性的关键部分,就需要纳入对比度判定范围。
2. 具体判定规则
- 如果文本本身颜色与背景对比度不达标,完全依赖描边来识别文字,那么描边与背景的对比度必须符合WCAG最低标准:
- 普通文本(18pt以下或14pt以下加粗):对比度≥4.5:1
- 大文本(18pt及以上或14pt及以上加粗):对比度≥3:1
- 如果文本本身颜色已经满足对比度要求,描边仅作为装饰元素,那么描边的对比度没有强制要求,但需保证其不会干扰文本的正常阅读。
3. 关于描边提升对比度的合法性
WCAG并未禁止使用文本描边提升可读性,只要最终文本的可识别部分(无论是文本本身还是描边)与背景的对比度达标即可。但需要注意两点:
- 描边宽度不能过细,建议至少1px,避免出现断裂的轮廓,确保低视力用户能清晰识别;
- 优先保证文本本身颜色与背景的对比度达标,描边仅作为辅助增强手段,不要让用户必须依赖描边才能阅读。
内容的提问来源于stack exchange,提问作者flen




