如何在JavaScript / CSS 中检测MAC OS 反色模式？

Question

如果 OS 处于高对比度模式，我想做一些额外的对比度工作。使用 Windows 我们可以使用像

这样的媒体查询

@media screen and (-ms-high-contrast: active) {}

这将通过媒体查询检测到这一点，我们可以从那里扩展功能。如果我们在 Mac OS 中没有这样的媒体查询，也许有 JS 替代方案？或者它是否以如此低的水平反转了我们根本无法真正看到它的颜色？

Answer 1

没有。这是不可能的。

这是一个基于意见和间接证据的答案：

反转颜色模式不像Windows高对比度模式那样运行。它不会更改内容（例如通过删除页面上的背景图像），因此通过媒体查询使其可用不会给最终用户带来任何好处，反而会为滥用开辟一条道路。
Objective-C 中用于确定辅助功能模式是否处于活动状态的功能（布尔值 AXAPIEnabled(void);）已从 10.9 开始弃用，没有迹象表明有替代品。你可以 see it on the Apple Developer site. By extension, if developers at that level of the system no longer have access, I expect web developers would also be restricted (just as AppleScript writers seem to not have access).
通常，最需要它的用户不赞成测试是否存在辅助技术或激活辅助功能。它造成了非常真实的风险，既有善意的开发人员会破坏这些功能（可能通过撤销页面），也会让不良行为者确定某人的个人健康信息。
我找不到 Apple 的任何文档来说明如何执行此操作，甚至没有承认有一种方法可以执行此操作。我也询问了可访问性社区，大多数人认为它不存在（并且这将是一个坏主意）。
还有was a plan for an inverted-colors media query in CSS 4, but you will see it is not in the latest draft (6.4 is now color-gamut). It was dropped seemingly in favor of a light level MQ while accessibility-specific MQs are defined.

希望有人能给你一个更明确的答案。我建议您在 Twitter 上寻找任何 Apple Dev Rel 人员并将他们引导至此处（假设您不是 Apple Developer Program 的成员，但我怀疑您会在那里询问）。

Answer 2

您现在可以在 Safari 技术预览中执行此操作：

@media (inverted-colors) {
    img.cancel-inversion {
        filter: invert(1);
    }
}

你应该使用它：

照片
.icns-ish 图标图像（应用程序图标之类的东西没问题）

你不应该使用它：

文本图像（我的意思是，you shouldn't use images of text，但如果您出于某种原因必须...请不要在这些图像上使用此技术！）
装饰图片
单色字形（看起来像字体图标的东西）

当我们讨论这个主题时，减少运动媒体查询现在也在 Safari 技术预览中。

Answer 3

How to detect MAC OS inverted color mode in JavaScript / CSS?

JavaScript/TypeScript 答案涉及 programmatically testing the @media (inverted-colors) query that 。下面的函数 returns 一个布尔值。

isUsingMacInvertedColors: () => {
      const mediaQueryList = window.matchMedia('(inverted-colors: inverted)');
      return mediaQueryList.matches;
}

如何在JavaScript / CSS 中检测MAC OS 反色模式？

How to detect MAC OS inverted color mode in JavaScript / CSS?

javascript

css

macos

accessibility

high-contrast