中启用了“高对比度”检测

Question

如何检测用户设备上是否激活了可访问性工具？

我们希望有一个不同的CSS启动，如果用户有对比设置在他们的设备上。

我们目前正在玩视听工具，这是一个很好的工具，但费用昂贵，所以如果有离开，我们可以创建一个CSS，将激活当用户有可访问性设置打开可能有帮助。

Answer 1

考虑使用-ms-高对比度或偏好-对比。

-ms-high-contrast

@media screen and (-ms-high-contrast: active) {
  /* All high contrast styling rules */
}
@media screen and (-ms-high-contrast: black-on-white) {
  div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
  div { background-image: url('image-wb.png'); }
}

prefers-contrast

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

请注意，prefers-constrast还只是实验性的。