14

谁能解释高对比度模式下 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 的变化会发生什么。

各种浏览器中的 Google.com

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

4

4 回答 4

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

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

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

于 2017-01-19T16:09:05.267 回答
7

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

以下是参考列表 Accessiweb 2.1 中的相关标准：在每个网页上，是否正确使用了元素背景和字体颜色的 CSS 声明？（银级等于 WCAG 2.0 AA）
相关的 WCAG 2.0 失败技术是F24：指定前景色而不指定背景色，反之亦然

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

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

于 2012-04-11T10:12:25.527 回答
6

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

            }
于 2017-06-27T13:22:01.900 回答
0

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

于 2021-05-10T08:14:28.943 回答