Question

我正在尝试以高对比度模式访问我的网站。为了检测何时启用了高对比度模式，我创建了一个JavaScript方法来检测是否禁用了背景图像，因为高对比度模式禁用了背景图像，然后如果浏览器处于高对比度模式，那么我会附加一个css文件修复以高对比度显示。这在Firefox，Edge和IE中运行良好，但Chrome使用自己的扩展来创建高对比度并且它不会禁用背景图像，因此在Chrome中不会追加高对比度的CSS。

通过搜索我发现Chrome在网站上添加了一个过滤器，而不是启用/禁用/更改网站颜色或图像本身。我搜索过并搜索过，但是我找不到任何可以测试的内容来检查Chrome是否使用了高对比度模式。如果有办法检测哪些扩展程序也可以解决问题，但我也无法找到办法解决问题。

我的代码实际上运行正常，我只需要能够检测Chrome中的高对比度模式。这是我用来检查高对比度模式的方法。

＆＃13;

let highContrast = (options) => {

  let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
  hcDetect.appendTo(document.body);

  if (hcDetect.css('background-image') === 'none') {
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');

  }
}

＆＃13;

如果您想查看更多代码，请告诉我，我还不确定还有哪些内容对您有所帮助。

谢谢你提前获得所有帮助！

Answer 1

如果您询问 Windows高对比度模式，则Chrome无法知道该用户何时处于活动状态。

通常，如果Windows用户选择启用高对比度模式，则该用户在Microsoft Internet Explorer或Microsoft Edge中浏览（因为这些浏览器支持它）。它们都支持专有的-ms-high-contrast @media规则。

检查缺少的背景图像是一种可以在IE / Edge中使用的策略，但使用媒体查询是一种更好的方法。尤其是Windows High Contrast Mode will soon allow background images in Edge。

如果您想要检测特定扩展程序何时在Chrome中设置了自己的高对比度模式，那么了解哪个扩展程序会很有帮助。

例如，使用High Contrast扩展程序，您可以在<html>代码上查找以下属性：hc="a3"和hcx="3"（值可能与您不同，但属性应该匹配）。如果您打开浏览器开发工具，您可以看到它做的其他一些事情。但这些属性属于DOM的最高级别，可能最安全。

如果您在询问Chrome for Android，那也是一个不同的过程。

Answer 2

Chrome扩展程序会注入一些代码来生成高对比度的LAF。

注射需要超时。

这对我有用：

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);

Answer 3

...我所需要做的就是能够检测到Chrome中的高对比度模式

解决方案1：

在我的React / TypeScript项目中，我使用了类似于@Wesley Abbenhuis's answer的代码，但是发现我不需要花费几秒钟来加载的组件的超时。实际上，我创建了一个演示React项目，该项目对第一个加载组件中的扩展进行了测试，并且没有延迟。

const htmlTag: HTMLElement = document.getElementsByTagName(
    'html'
  )[0];
const isUsingChromeHighContrastExtension: boolean =
    htmlTag.getAttribute('hc') !== null;

解决方案2：

使您的非高对比度代码可访问，并且您不必首先检测Chrome的高对比度扩展。

来自WCAG Criterion 1.4.11: Non-text Contrast：

成功标准1.4.11非文本对比度（AA级）：以下内容的视觉呈现与相邻颜色的对比度至少为3：1：

用户界面组件

用于指示用户界面组件的状态和边界的可视信息，但不活动的组件或组件的外观由用户代理确定且未经作者修改的情况除外。

图形对象

理解内容所需的图形部分，除非特定的图形表示对于传达的信息至关重要。

在Chrome浏览器中检测高对比度模式

3 个答案:

解决方案1：

解决方案2：