如何为柔和配色方案提供符合WCAG标准的高对比度无障碍实现方案

核心问题原因说明 #

你最初将低对比度样式作为基础样式、通过prefers-contrast: more切换高对比度的写法无法通过无障碍审计，核心原因是：所有主流无障碍检测工具（包括axe）默认检测无媒体查询生效时的基础样式，也就是无任何特殊偏好设置的普通用户场景下加载的样式，不会主动触发高对比度媒体查询分支，只要基础样式对比度不满足WCAG 2最低要求，就会直接判定不合规。

1. 合规的CSS兜底代码写法 #

正确的实现逻辑必须遵循可访问性兜底优先原则，代码结构如下：

/* 基础层：默认加载符合WCAG 2 AA级标准的高对比度样式（普通文本对比度≥4.5:1，大文本≥3:1）
   兼容不支持prefers-contrast媒体查询的旧浏览器，保证所有场景下的兜底样式合规 */
p {
  background-color: #aa3300;
  color: #ffffff;
}

/* 分支1：用户明确偏好低对比度时，加载柔和低对比度主题 */
@media (prefers-contrast: less) {
  p {
    background-color: #f26600;
    color: #eeeeee;
  }
}

/* 分支2：用户明确偏好更高对比度时，加载强化版高对比度主题 */
@media (prefers-contrast: more) {
  p {
    background-color: #7a2200;
    color: #ffffff;
  }
}

这种写法下基础样式本身满足合规要求，无障碍检测不会报错，同时能根据用户偏好切换对应主题。

2. 用户对比度偏好的传递路径 #

用户可以通过两层设置传递对比度偏好，网站需要同时适配：

• 系统级设置：Windows、macOS、iOS、Android等主流系统的无障碍菜单中，均提供增强对比度/高对比度开关，2022年之后更新的系统版本也基本支持降低对比度选项，这些设置会被浏览器自动读取，通过prefers-contrast媒体查询暴露给网页
• 站点级手动开关：仅靠系统设置覆盖范围有限，需要在网站的无障碍工具栏、页脚或设置菜单中提供显式的主题切换控件，提供「默认合规主题/柔和低对比度主题/强化高对比度主题」三个选项，用户选择结果存储在本地缓存中，页面加载时优先读取用户手动选择的配置，覆盖系统默认的媒体查询结果，这也是WCAG规范明确推荐的实现方式。

3. 对比度自动适配的实现方式 #

• 原生自动适配：目前主流现代浏览器均已完整支持prefers-contrast媒体查询，会自动同步系统层面的对比度设置、深浅色主题配置；支持环境光传感器的设备，系统会根据环境光强度自动调整对比度偏好，网页无需额外对接硬件，只要正确编写媒体查询逻辑就能自动生效。
• 自定义自动逻辑：如果需要更灵活的适配规则，可以在获取用户授权的前提下调用环境光传感器API，结合时段、系统主题状态等参数，动态切换对比度主题（比如户外日光强烈时自动提升对比度，夜间暗光环境下自动切换柔和低对比度主题）。注意所有自动适配逻辑必须保留手动切换入口，允许用户随时覆盖自动选择的结果。

关于高对比度为默认值的写法说明 #

你测试时将高对比度样式作为基础样式的写法本身是合规的，完全可以正常加载低对比度版本：只要在prefers-contrast: less媒体查询分支中编写低对比度样式即可。
低对比度偏好的识别路径和高对比度一致：一是读取系统无障碍设置中降低对比度的开关状态，二是读取用户在网站内手动选择的低对比度主题配置，目前主流系统和浏览器对低对比度偏好的识别支持覆盖率已经超过85%，不存在无法识别的问题。

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