强制颜色模式是Windows等操作系统为视力障碍用户提供的无障碍特性。开启后，系统会用一组有限的高对比度颜色替换网页原有的配色方案，页面可能因此丢失关键视觉信息。对开发者来说，及时感知用户是否开启了这一模式，并动态调整页面样式，是无障碍优化中很重要的一环。本文介绍如何在jQuery项目中检测强制颜色模式，并在状态变化时自动响应。
什么是Forced Colors Mode
Forced Colors Mode，即强制颜色模式，最早在Windows高对比度模式中普及，后来被CSS Media Queries Level 5规范标准化为forced-colors媒体特性。当该模式激活时，浏览器会强制应用一组系统定义的调色板，开发者通过CSS设置的大部分颜色都会被覆盖。
与prefers-color-scheme不同，强制颜色模式不仅仅是深色或浅色的偏好，而是对整个页面配色体系的替换。文字、背景、边框会被替换为系统颜色，图片和渐变可能被隐藏，链接和按钮的外观也由系统接管。如果页面大量依赖颜色传达信息，例如用红色表示错误、绿色表示成功，在这种模式下用户体验会明显下降。
在CSS层面，我们可以通过@media (forced-colors: active)来编写适配样式，配合CanvasText、Highlight等系统颜色关键字，以及forced-color-adjust属性来控制个别元素是否参与强制配色。但如果需要在JavaScript或jQuery逻辑中感知状态，就需要借助媒体查询API。
使用matchMedia检测强制颜色模式
浏览器提供了window.matchMedia方法，可以让我们在JavaScript中查询任意媒体特性，包括forced-colors。查询(forced-colors: active)会返回一个MediaQueryList对象，其matches属性为布尔值，直接表明当前是否处于强制颜色模式。
下面是一段基础的检测代码，页面加载时输出当前状态：
$(function () {
// 检测是否处于强制颜色模式
var mql = window.matchMedia('(forced-colors: active)');
if (mql.matches) {
console.log('强制颜色模式已开启');
$('body').addClass('forced-colors');
} else {
console.log('强制颜色模式未开启');
$('body').removeClass('forced-colors');
}
});
代码中给body添加了forced-colors类，这样我们可以配合CSS做一些全局调整，例如为依赖颜色区分的元素补充图标或文字说明。需要注意的是，不要用$.browser这类早已废弃的属性去做判断，既不可靠也无法检测系统级设置。
监听强制颜色模式的实时变化
用户可能在浏览页面的过程中随时开启或关闭高对比度，仅靠页面加载时的一次性判断是不够的。好在MediaQueryList提供了addEventListener方法，旧版浏览器使用addListener，可以在匹配状态变化时触发回调。
下面是一个完整的封装示例，结合jQuery的事件机制派发自定义事件，方便各模块按需订阅：
(function ($) {
var mql = window.matchMedia('(forced-colors: active)');
function apply(isForced) {
$('body').toggleClass('forced-colors', isForced);
// 派发自定义事件，供其他模块监听
$(document).trigger('forcedcolorschange', isForced);
}
function handler(e) {
apply(e.matches);
}
// 现代浏览器
if (mql.addEventListener) {
mql.addEventListener('change', handler);
} else if (mql.addListener) {
// 兼容旧版浏览器
mql.addListener(handler);
}
// 初始化时立即执行一次
apply(mql.matches);
})(jQuery);
// 在其他业务代码中监听变化
$(document).on('forcedcolorschange', function (event, isForced) {
if (isForced) {
$('#status-tip').text('当前为高对比度模式，已为您优化显示');
} else {
$('#status-tip').text('');
}
});
这段代码的核心思路是：将媒体查询状态同步到body的类名上，同时通过jQuery派发自定义事件，让页面中任何模块都能感知变化，而不需要每个模块各自维护一份监听器。这种集中式管理在复杂页面中尤其有用，也符合jQuery一贯的事件驱动开发习惯。
检测到强制颜色模式后的适配建议
检测只是第一步，更重要的是检测到之后做什么。强制颜色模式下，背景图、渐变、阴影等视觉手段可能被剥离，因此要确保信息不单靠颜色或图片传达。常见做法包括：为图形按钮补充文字标签，为状态提示增加图标加文字的组合，以及确保焦点指示清晰可见。
在CSS层面可以这样配合上面的类名：
/* 强制颜色模式下隐藏纯装饰性元素，聚焦核心内容 */
body.forced-colors .decorative {
display: none;
}
/* 系统层面的标准写法，与JavaScript互为补充 */
@media (forced-colors: active) {
.icon-button {
forced-color-adjust: none; /* 保留关键图标的原始颜色 */
}
}
另外要谨慎使用forced-color-adjust: none，它会阻止系统对该元素强制配色，只有在确实需要保留原始颜色，比如品牌标志或关键图标时才应使用，滥用会破坏无障碍体验。对于不支持该属性的环境，也可以考虑用SVG配合currentColor来绘制图标，让图标自动跟随系统文字颜色。
浏览器兼容性方面，forced-colors媒体特性在Chrome 89及以上、Edge 79及以上、Firefox 89及以上版本中均已支持，Safari则较晚跟进。对于不支持的浏览器，matchMedia('(forced-colors: active)')的matches会返回false，代码不会报错，属于安全的渐进增强方案。如果需要兼容更老的Windows环境，可以用(-ms-high-contrast: active)作为补充查询条件，一并传入matchMedia做或判断即可。
jQueryForced Colors Mode强制颜色模式修改时间：2026-09-02 07:58:38