用CSS覆盖浏览器原生文本选择器的无障碍合规性及问题问询

问题1：使用CSS覆盖浏览器原生文本选择器是否符合WCAG规范？ #

符合，但需满足两个核心前提：

• 满足WCAG 1.4.3 最低对比度要求：选中状态的文本与背景色对比度至少达到4.5:1（常规文本）或3:1（大文本，字号≥18pt或加粗≥14pt），保证低视力用户能清晰识别选中内容。
• 保留清晰的选中状态提示：自定义样式不能让选中文本与未选中文本、页面背景混淆，必须让用户能直观区分选中范围。只要做到这两点，自定义::selection样式完全符合WCAG规范。

问题2：是否会引发WCAG未涵盖的其他无障碍问题？ #

会，主要集中在特殊用户配置和认知适配场景：

• 高对比度模式冲突：部分浏览器（如Chrome、Firefox）在系统开启高对比度模式时，会强制用系统预设样式替换自定义::selection，但如果代码用!important提升优先级，可能会覆盖系统样式，导致依赖该模式的用户无法识别选中文本。
• 认知习惯冲突：依赖原生选中样式的用户（尤其是认知障碍群体）已形成固定视觉认知，若自定义样式与原生样式差异过大（比如从蓝底白字改成黑底白字），可能增加他们识别选中状态的认知负担。
• 色彩反转/滤色适配问题：用户开启系统色彩反转或滤色模式后，自定义的颜色组合可能失去足够对比度。例如浅蓝底深灰字反转后，可能变成深蓝底浅灰字，对比度跌破合规标准。

你的代码示例与注意事项 #

你的SASS实现代码：

body *::selection {
    color: $white;
    background: $primary-color-main; /* WebKit/Blink Browsers */
}
  
body *::-moz-selection {
    color: $white;
    background: $primary-color-main; /* Gecko Browsers */
}

对应的纯CSS最简可复现示例：

body *::selection {
    color: white;
    background: black; /* WebKit/Blink Browsers */
}
  
body *::-moz-selection {
    color: white;
    background: black; /* Gecko Browsers */
}

注：上述代码会修改<body>下所有后代元素的文本选中样式

针对这段代码的额外提醒：

• 务必验证$primary-color-main与$white的对比度符合WCAG要求，避免因变量值变化导致合规性失效。
• 谨慎覆盖<input>、<textarea>等表单元素的选中样式，这类元素的原生样式通常已适配无障碍需求，自定义后可能破坏原有适配。
• 不要添加!important强制样式优先级，给系统和浏览器的无障碍配置留足生效空间。

内容的提问来源于stack exchange，提问作者Alejandro Suárez