媒体查询偏好：在网页界面中尊重用户选择
将减少动态效果、对比度、强制颜色和配色方案偏好作为无障碍默认值，同时提供清晰、可见的用户控制。
CSS 媒体特性可以让网页适应操作系统、浏览器或其他用户代理所暴露的无障碍和外观偏好或默认状态。prefers-reduced-motion、prefers-contrast、forced-colors 和 prefers-color-scheme 等查询能帮助网站从一开始就采用符合这些状态的呈现方式。应将它们视为打造易用设计的输入，而不是可读默认样式、语义化控件或明确外观选择方式的替代品。
实用原则很简单：尊重偏好、保留任务流程，并让任何网站级覆盖项都容易找到和撤销。对动态效果敏感的用户仍应能理解状态变化；使用系统配色的用户仍应能分辨控件；偏好深色界面的用户也不应被迫接受对比度不足的全站深色主题。指针交互指南介绍了适应用户的另一种方式，浏览器交互验证和以隐私为先的浏览器工作流设计则阐述了更广泛的测试与选择原则。
偏好是设计输入，而不是完整的无障碍解决方案
媒体查询是 CSS 中的条件规则。查询会检测某项媒体特性，例如用户偏好的配色方案，或浏览器是否正在应用强制颜色调色板，然后让样式表选择相应声明。这与根据视口宽度调整布局的机制大体相同，不过此处条件代表的是呈现偏好，而不是实体屏幕尺寸。浏览器会评估查询，并在相关环境变化时应用匹配的规则。
这些特性只报告 Web 平台定义的一组有限取值。它们不会说明用户为何选择某项设置、使用何种辅助技术，也不会告诉应用在所有情境下哪种呈现最适合对方。应用不应试图推断这些私人信息。它可以响应浏览器公开的偏好，并提供连贯的界面，而不必给用户贴上标签或判定其能力。偏好是有用的设计信号，不是用户档案。
这一差别很重要，因为媒体查询无法修复所有无障碍问题。减少动态效果的规则无法为控件补上缺失的标签。深色配色方案本身并不能保证文字易读。适配强制颜色也不能取代有意义的 HTML 语义。无论采用哪种呈现方式，都需要足够的对比度、清晰可见的焦点、易懂的状态，以及用户能通过产品所支持的交互方式操作的控件。
应将媒体查询作为渐进式适配手段。从完整的默认体验出发，只调整需要响应偏好的部分。无论主题如何变化，都要保持内容、层级和任务完成方式一致。例如，如果动画传达进度，减少动态效果后就不应让进度消失；静态指示器或简短状态文字可以承载相同信息。如果某种颜色标识错误，也应通过消息和图标让错误含义清晰可辨。
视觉变化优先使用 CSS，因为浏览器无需等待应用代码就能重新评估样式。如果偏好必须影响 CSS 无法控制的应用行为，例如是否启动可选动画序列，则可以使用 JavaScript。应将这类行为限制在明确范围内，并让用户能够停止或更改它。不要用 JavaScript 重建 CSS 可直接处理的偏好，也不要把从浏览器读取的选择持久化保存，仿佛那是用户在网站设置中主动做出的选择。
减少动态效果时仍应保留含义与控制权
当用户请求减少界面中的非必要动态效果时，prefers-reduced-motion 媒体特性可以匹配。样式表可以使用 @media (prefers-reduced-motion: reduce)，移除或缩短过渡、视差效果、动画滚动、自动播放的动态内容，以及其他并非完成任务所必需的动效。对应的 no-preference 值表示用户代理没有要应用的减少动态效果请求；这并不代表可以让所有交互都带动画，也不意味着每个人都觉得动态效果舒适。
首先应区分哪些动效只是装饰，哪些承载必要信息。若卡片弹跳只是为了吸引注意，通常可以改为静止状态。加载过程可能需要稳定的进度指示器或文字状态来取代循环动画。图表过渡可以直接更新到新值，同时保留标签和先前的上下文。可折叠面板可以不使用长时间滑动动画就展开，同时继续以程序可识别的方式提供其展开状态。目标不是隐藏变化，而是在不使用多余动效的情况下传达变化。
全局应用规则可能是有用的基线，但组件不应只依赖单个全局时长覆盖作为唯一适配方式。动效可能来自 CSS 过渡、关键帧、JavaScript 动画库、嵌入式媒体或自动播放的内容。应检查完整体验，并在需要时采用组件级规则。将所有动画时长设为几乎为零，仍可能留下令人分心的逐帧更新、闪烁或脚本造成的移动，也可能意外移除帮助用户感知交互的时序。应测试最终效果，而不只是检查选择器是否匹配。
有些动态效果是用户直接请求的，例如通过播放按钮启动视频，或主动打开图表动画。减少动态效果偏好不应悄悄让必要控件无法使用。可以改为静态呈现、默认暂停，或提供明确的播放操作，并配备可见的停止或暂停控件。WCAG 2.2 成功标准 2.2.2 适用于自动开始、持续超过五秒且与其他内容并列呈现的移动、闪烁或滚动内容：除非该动态属于必要部分，否则应提供暂停、停止或隐藏的方法。
如果产品提供自己的动态效果设置，选项应让用户容易理解，例如“减少动态效果”或“允许界面动画”。应在设置附近说明实际影响，而不是展示实现术语。用户不应为了停止网站中的可选效果而被迫打开系统设置面板；反过来，网站设置也不应悄悄覆盖操作系统的请求。较为审慎的优先级是默认遵从系统的减少动态效果偏好，同时让明确的网站选项只影响网站的可选行为，并提供简单方式恢复系统设置。
对比度偏好需要清晰的视觉替代方案
prefers-contrast 特性允许样式响应用户代理发出的指示，表明用户偏好更高对比度、更低对比度或特定的对比度处理方式。浏览器支持的具体取值取决于平台和实现；依赖特定取值前，作者应先查看当前兼容性。更重要的设计责任不止是针对某一项查询：页面支持的条件下，普通文字和控件都应保持清晰可辨，信息也不应只依靠细微的色调差异来传达。
对于 more 偏好，有用的适配包括加大文字与背景的区分度、为控件增加更清晰的边框、让焦点指示更加醒目，以及更明确地区分相邻状态。选中标签不应只用细微的色相变化表示；还应搭配下划线、形状、字重或其他明显的状态标记。禁用控件仍应易于理解，而不应与周围文字混为一体。错误和成功消息应配合标签或图标使用颜色，让不同色觉的人也能获取其含义。
对于觉得强烈对比不适的用户，less 偏好可能有帮助。但这不代表必要文字应变淡，或控件应融入背景而难以辨认。应定义适度的替代调色板，同时保证内容可读、边界可见、焦点清晰。要分别检查小号文字、细线、占位文字、选中状态和悬停状态。在大标题上看起来协调的调色板，放到紧凑表单或禁用按钮上可能就不合格。
在支持 custom 取值的地方，它可能表示用户设定了不符合简单 more 或 less 分类的对比度偏好。不要把它当作设计通用“自定义对比度”模式的指令。浏览器可能不会通过该媒体特性公开用户选定的颜色。应使用经过仔细测试的默认样式确保页面易读；如果应用能提供有意义的替代方案，再让用户自行选择主题。
不要依赖偏好查询来满足基本对比度需求。用户可能不知道在哪里启用操作系统选项，浏览器也可能没有公开该选项，或者内容可能会在转换颜色的环境中查看。应根据适用的无障碍标准，在默认主题和支持的偏好模式下检查文字、重要图形、焦点环和控件边界。对比度调整既不应抹去品牌识别，也不应产生从未在实际内容尺寸下审查过的第二套配色。
强制颜色模式应使用系统颜色并克制调整
forced-colors 媒体特性用于指示用户代理是否正在强制采用有限的调色板。此模式不同于高对比度偏好：浏览器可以用用户或系统选定的颜色替换作者指定的颜色，让前景与背景采用协调的调色板。样式表可用 @media (forced-colors: active) 这样的查询进行有针对性的调整，以处理普通呈现依赖视觉差异、但该差异会被强制调色板改变的情形。
在此模式下，应保留浏览器应用调色板的能力。Canvas、CanvasText、LinkText、ButtonFace 和 ButtonText 等系统颜色关键字可以表达与当前系统颜色的关系，而不是硬编码明暗 RGB 值。在语义合适时优先使用原生控件。对于自定义控件，应确保浏览器调整颜色后，其边框、焦点指示、选中状态和状态变化仍清晰可辨。普通主题中刻意设为透明的边框，可能需要显示出来，才能继续明确标出控件范围。
forced-color-adjust 属性控制元素是否接受强制颜色调整。通常应保留默认行为。设置 forced-color-adjust: none 会让元素退出调整范围。只有当应用自身已为满足用户的色彩和对比度需求调整该元素颜色，并在强制颜色模式下验证结果时，才应在有限范围内使用它。让整页退出调整可能会挫败用户选择的调色板，并造成难以辨读的颜色组合。更好的做法通常是保留结构，并在需要适配的元素上使用系统颜色。
不要假设装饰图片或背景在强制颜色模式下仍可见。依靠 CSS 背景图片传达的信息可能会在背景被隐藏或重新着色时丢失。对重要信息，应使用真实文字、无障碍名称、边框，或带有清晰可见回退方案的内嵌图形。若图标含义依赖填充色，应确认描边或轮廓仍然可见。在实际强制颜色环境中测试键盘焦点和选中状态，因为普通主题的截图无法揭示所有覆盖效果。
强制颜色并不是另做一套与系统设置竞争的黑白主题的信号。操作系统调色板本身就是用户可见的选择，其中往往包含并非纯黑或纯白的颜色。应让平台发挥作用，然后只添加让内容层级和控件保持易用所需的最少 CSS 调整。避免全局覆盖系统颜色，也不要把 forced-color-adjust: none 当作快速修复视觉保真度的办法。
配色方案应支持明确的网站选项
prefers-color-scheme 特性可以根据用户的浅色或深色偏好选择样式。它能让网页一开始就采用符合浏览器或操作系统选择的调色板，也能响应用户在页面打开期间更改偏好。在某些环境下，深色主题可以减少屏幕上明亮表面的面积；浅色主题则可能更适合其他工作流程。两者都不是普遍更优的方案，都需要有意识地选色并进行测试。
CSS 的 color-scheme 属性会告知浏览器某个元素或文档支持哪些配色方案。声明支持浅色和深色，有助于用户代理以兼容的方案呈现内置控件、表单部件和其他浏览器提供的界面。该声明并不保证整个网页都无障碍，也不能替代网站内容的自定义样式。此属性应与实际可用的调色板协调，避免原生输入控件采用一种配色，而周围界面却采用另一种。
使用网站级主题控件时，应区分“跟随系统”和用户明确选择的“浅色”或“深色”。初始值可以遵循系统偏好；之后用户主动选择的选项可保持优先，直到用户再次更改。应在容易预期的设置区域提供可见控件，用通俗语言标注，并让用户轻松恢复“跟随系统”。操作系统偏好稍后发生变化时，不要自动切换掉用户已经明确选择的主题。
只有在持久化有助于此功能且用户明白将记住什么时，才应保存网站选项。保存明确选择所代表的值，而不是首次加载时浏览器偏好的快照。若值为“跟随系统”，就继续响应当前系统偏好。这一区分可以避免原本匹配的主题在用户更改设备设置后变成过时的覆盖项，也能让界面准确说明其行为。
主题控件需要无障碍名称、键盘操作支持、可见焦点和清晰的选中状态。分段控件可以提供“系统”“浅色”和“深色”选项，而不必把当前值藏在菜单中。若使用紧凑开关，其标签应说清切换后会是什么状态，而不应只写“切换”。选项是否选中不能只用颜色表示。要确认焦点、错误、链接、图表和对话框在所有支持的配色方案下都使用合适的颜色，并确保自定义主题更改时不会先短暂闪现错误的调色板。
偏好变化不应让用户无法继续当前任务
媒体查询会根据当前环境持续求值，而非只在页面加载时检查一次。只要网站仍打开，用户切换操作系统主题或更改无障碍偏好时，CSS 就可以作出响应。如果应用行为也必须变化，使用 matchMedia() 的 JavaScript 代码可以读取查询当前是否匹配，并监听 change 事件。MediaQueryList 的变更通知应更新相关行为，并在组件或页面不再需要时清理监听器。
JavaScript 响应应保持精简。主题更新可能需要更改由 Canvas 而非 CSS 生成的图表标签颜色；减少动态效果时，可能需要停止由组件库控制的非必要动画。两种情况下都只更新受影响的呈现或行为。不要仅仅因为偏好变化就重新加载页面、丢弃未保存的工作、关闭对话框或重置应用。仅用 CSS 响应通常更简单，也更不容易打断当前任务。
明确的网站选项会增加第二个状态来源，因此应定义优先级，而不是让事件顺序来决定。一个实用模型是：明确的网站选项控制网站外观；“跟随系统”则遵循当前浏览器偏好；用户代理应用无障碍模式（例如强制颜色）时，无论网站调色板如何都应尊重该模式。对于动态效果，网站级动画设置可以控制网站的可选效果，但不应启动与用户减少动态效果请求相冲突的自动序列。应清晰说明可选项，并让用户容易恢复系统行为。
应用更改时不要遮挡当前上下文。如果用户打开了正在填写的表单，更改主题后应保留字段值、验证消息、焦点和滚动位置。如果动画过渡期间启用了减少动态效果，应让组件进入稳定状态，而不是停留在两种状态之间。如果弹出层打开时用户选择了自定义调色板，应确保弹出层、背景遮罩和焦点环一起更新。偏好变化应改善当前体验，而不应迫使用户从头开始。
某些平台或浏览器行为可能立即生效，某些特定于应用的行为则要等到下一次渲染。对于异步图表或嵌入式组件无法即时提供的更新，不要承诺会立即完成。如果操作会延迟或需要重启，应及时告知用户，并保留取消的能力。大多数呈现更改都不需要重新加载；确实需要时，应在用户确认更改前说明原因。
测试完整体验并防止回归
应围绕实际任务而不只是截图集建立回归矩阵。测试默认外观、浅色和深色偏好、减少动态效果、目标浏览器支持的相关对比度取值，以及提供该模式的平台上的强制颜色。测试可以共存的组合，例如深色偏好加减少动态效果，或系统强制颜色生效时用户选择的网站主题。具体矩阵取决于产品，但界面声称支持的每种模式都应有可观察的结果和可重复的检查。
对于每条代表性工作流，都要验证开始、进行中、完成和恢复路径。打开并提交表单、浏览菜单、查看图表、关闭对话框，并从错误状态返回。确认当前模式不会隐藏焦点指示、弱化按钮边界、让选中与未选中状态无法区分，或移除原本由动画传达的信息。还要重复仅使用键盘的操作流程。如果任务依赖屏幕阅读器或其他辅助技术，应另外检查名称、角色、值和播报；视觉媒体查询覆盖率并不能验证无障碍树。
自动化视觉测试可以发现声明缺失或意外的布局变化，单元测试可以验证系统选项和网站明确选项之间的优先关系。但它们本身无法判断焦点环是否容易看见、动画是否令人不适，或调色板是否舒适。自动化检查应配合使用浏览器或操作系统无障碍设置的手动检查。记录浏览器、平台、偏好模式、任务、预期结果和实际结果，以便未来重现回归，而无需收集访客的个人设置。
除了初始加载测试，也要测试状态变化。先在一种配色方案下打开部分填写的表单，再切换到另一种。过渡正在运行时启用减少动态效果。更改对比度时，让焦点停留在屏幕上的控件中。在平台允许时，切换进入或退出强制颜色模式。确认界面更新时不会丢失焦点、已输入的数据、选中项或清晰的返回路径。这些情况能检验新页面截图可能遗漏的状态协调问题。
最后，检查依赖颜色、动态效果或形状传达信息的内容。状态消息应说明结果；图表应包含标签或数据替代文本；不能只靠动画才能发现操作已完成；表示操作的图标应有无障碍名称。主题切换不应缩小行距或字号，以致改变预期阅读顺序。最有效的回归检查是确认用户在所有支持的偏好模式下仍能完成相同任务、理解结果并从错误中恢复。