Question

如果操作系统处于高对比度模式，我想做一些额外的对比工作。使用Windows，我们可以使用媒体查询，如

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

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

Answer 1

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

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

你应该在：

上使用它

照片
.icns-ish图标图像（应用程序图标之类的东西都可以）

你不应该使用它：

文字图片（我的意思是，你不应该使用文字图片，但如果你出于某种原因必须......不要在这些图片上使用这种技术）
装饰图片
单色字形（看起来像字体图标的东西）

虽然我们正在研究此主题，但目前还在动态技术预览中减少运动媒体查询。

Answer 2

没有。这是不可能的。

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

反转颜色模式与Windows高对比度模式不同。它不会更改内容（例如通过删除页面上的背景图像），因此通过媒体查询使其可用不会给最终用户带来任何好处，而是打开滥用的途径。
Objective-C中用于确定辅助功能模式是否处于活动状态（布尔AXAPIEnabled(void);）的功能自10.9起已被弃用，并未指示存在替换。你可以see it on the Apple Developer site。通过扩展，如果系统级别的开发人员不再具有访问权限，我希望Web开发人员也会受到限制（就像AppleScript writers seem to not have access）。
一般而言，最需要帮助的用户不赞成对辅助技术的存在进行测试或辅助功能的激活。它为善意的开发者打破这些功能（可能是通过翻转页面）以及允许不良行为者确定某人的个人健康信息创造了非常大的风险。
我找不到Apple的文档，说明如何做到这一点，甚至承认有办法做到这一点。我也问过无障碍社区，大多数人认为它不存在（并且会是一个坏主意）。
CSS 4中有was a plan for an inverted-colors个媒体查询，但您会看到它不在最新草稿（6.4 is now color-gamut）中。它被放弃了似乎有利于轻型级别while accessibility-specific MQs are defined。

我希望有人能给你一个更明确的答案。我建议你在Twitter上查看任何Apple Dev Rel的人并指导他们（假设你不是Apple开发者计划的成员，虽然我怀疑你会问那里）。

Answer 3

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

JavaScript / TypeScript答案涉及programmatically testing的@gregwario posted个@media (inverted-colors)查询。下面的函数返回一个布尔值。

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

如何检测MAC OS＆＃39;在javascript / css中反转颜色模式？

3 个答案: