在高对比度模式下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:在每个网页上,是否正确使用了元素背景和字体颜色的CSS声明？(银级等于WCAG 2.0 AA)
相关WCAG 2.0失败技术是F24:指定前景色而不指定背景色,反之亦然

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

关于Google主页:谷歌以浏览器嗅探和大量修改的页面而闻名,这取决于浏览器,是否登录了他们的服务,JS是否已激活.它甚至会使用SPDY协议而不是HTTP(尽管这不会改变浏览器本身收到的内容).
我不会考虑来自这家公司的页面进行浏览器之间的比较;)

Answer 2

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

在IE和MS Edge中均可使用。在Windows 10中测试。

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

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

            }