CSS 在高对比度模式下到底发生了什么？答案

【问题标题】：What actually happens to CSS in high contrast mode?CSS 在高对比度模式下到底发生了什么？
【发布时间】：2012-04-22 21:59:15
【问题描述】：

谁能解释 CSS 在高对比度模式下会发生什么？

http://hardlikesoftware.com/weblog/2009/11/04/css-sprites-vs-high-contrast-mode/

在高对比度模式下，所有背景图像和颜色都会被忽略 — 替换为高对比度的颜色，例如黑底白字或黑底白字白色的。另一个问题是背景图像并不总是打印出来的。

还有什么比这更重要的吗？

我的登录表单看起来不太理想，我正在尝试调查。

直到最近还有https://www.google.com/search?q=axs+aol+accesibility+library，但它似乎不再存在了。

一般我看到有两种方法：

检测 HCM（高对比度模式）并相应调整 CSS
使 CSS 更通用，使其适用于各种模式

无论哪种情况，我都非常想知道在 高对比度模式 中 CSS 发生了什么变化。

如您所见，行为各不相同，因此您的专业知识将受到赞赏。

【问题讨论】：

标签： css accessibility high-contrast

【解决方案1】：

您是否为表单元素定义了文本和背景的颜色？

以下是参考列表 Accessiweb 2.1 中的相关标准：On each Web page, are CSS declarations for colours for element background and fonts used properly?（银级等于 WCAG 2.0 AA）
相关的 WCAG 2.0 失败技术是F24: specifying foreground colors without specifying background colors or vice versa

最近一篇关于对比模式的 WebAIM 帖子：http://webaim.org/blog/high-contrast/

关于谷歌主页：谷歌以浏览器嗅探和大量修改页面而闻名，这取决于浏览器、是否登录他们的服务、是否激活了 JS。它甚至会使用 SPDY 协议而不是 HTTP（尽管这不会改变浏览器接收到的内容本身）。
我不会考虑这家公司的网页来比较浏览器；）

【讨论】：

【解决方案2】：

@media screen and (-ms-high-contrast: active) {
    /* put your styling rules here */
}

适用于 IE 和 MS Edge。在 Windows 10 中测试。

Chrome 不知道 Windows 10 是否处于高对比度模式。

【讨论】：

非常感谢您的回答！你救了我！！

【解决方案3】：

如果您在 Web 应用程序中实现高对比度，请使用以下代码块进行黑白和黑白对比度选择。这将在 IE 中正常工作。

@media screen and (-ms-high-contrast: black-on-white) {
                /*
                Put your styling code.............
                */

            }
 @media screen and (-ms-high-contrast: white-on-black) {
                /*
                Put your styling code.............
                */

            }

【讨论】：

【解决方案4】：

我的笔记本电脑开启了高对比度模式。它会删除所有背景颜色和文本颜色，包括任何背景图像。边框和边框颜色不会被忽略。因此，如果您有一个绿色边框、蓝色背景、黄色文本 div，那么它将显示为：绿色边框，黑色背景，白色文本 div。

【讨论】：