Google Chrome Lighthouse：如何忽略特定元素的对比度检查

我之前也碰到过一模一样的问题！那些用作装饰的Material图标明明只是视觉点缀，却被Lighthouse的对比度检查揪出来，确实挺烦人的。下面几个方法亲测有效，你可以试试：

• 用aria-hidden="true"标记装饰元素
  这是最简单直接的方式，明确告诉辅助技术（包括Lighthouse）这个元素是纯装饰、不传递任何信息的。只要确保图标没有关联的交互或文本含义，加上这个属性后，Lighthouse就会跳过它的对比度检查：

  <i class="material-icons" aria-hidden="true">star</i>
  

  注意：别给这个图标加alt属性或者aria-label，不然会被识别为有意义的文本，还是会被检测。

• 用CSS伪元素生成图标
  把图标通过CSS的content属性来渲染，而不是直接放在HTML文本里。这种方式下，Lighthouse不会把它当成可读文本进行对比度检查，配合aria-hidden双重保险更稳妥：

  .decorative-icon::before {
    content: "\e838"; /* 对应Material图标的Unicode值 */
    font-family: "Material Icons";
    font-size: 16px;
    color: #666;
  }
  

  <span class="decorative-icon" aria-hidden="true"></span>
  

• 自定义Lighthouse配置文件
  如果需要批量忽略某一类元素，可以创建自定义配置文件来排除特定选择器的对比度检查。比如创建lighthouse.config.js：

  module.exports = {
    extends: 'lighthouse:default',
    auditConfig: {
      'color-contrast': {
        excludeSelectors: ['.material-icons.decorative']
      }
    }
  };
  

  运行Lighthouse时指定这个配置：

  lighthouse https://your-site-url.com --config-path=lighthouse.config.js
  

另外关于你担心的UX争议：其实WCAG（Web内容无障碍指南）里明确说明，纯装饰性、不传递任何信息或功能的元素不需要满足文本对比度标准。只要这些图标确实只是小型设计元素，没有交互功能也不承载信息，那忽略它们的对比度检查完全合理，不用太担心UX设计师的反对——反而强行拉高对比度可能真的会破坏视觉平衡。

内容的提问来源于stack exchange，提问作者Brain Foo Long