在高对比度模式下CSS实际发生了什么？

Question

有人可以解释在高对比度模式下CSS会发生什么吗？

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

  

在高对比度模式下，所有背景图像和颜色都会被忽略 -   取而代之的是高对比度的颜色，如黑色或黑色的白色   白色。另一个问题是背景图像并不总是如此   打印。

除此之外还有什么吗？

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

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

一般来说，我认为有两种方法：

1. 检测HCM（高对比度模式）并相应地调整CSS
2. 使CSS更通用，让它在每种模式下都能正常工作

在任何一种情况下，我都非常想知道在CSS的变化方面高对比度模式会发生什么。



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

Answer 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/

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

Answer 2

如果要在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.............
                */

            }

Answer 3

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

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

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

Answer 4

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