解读

在国内前端团队面试中，这道题表面考“Grunt 插件怎么用”，实则考察候选人是否具备可访问性（a11y）意识、颜色对比度 WCAG 标准理解以及自动化治理代码质量的工程化能力。
面试官希望听到：

1. 你能把“低对比度”量化成WCAG 2.1 的 AA/AAA 阈值（4.5:1、3:1、7:1）。
2. 你能把 grunt-color-contrast 放进现有 Grunt 工作流，而不是单独跑脚本。
3. 你能处理中文注释、less/sass 变量、行内样式、雪碧图 base64 等国内项目常见场景。
4. 你能给出修复策略：自动替换、警告提示、还是阻断 CI，取决于业务线对视觉稿的容忍度。
5. 你能权衡性能：4000+ 颜色节点时，如何用 grunt-newer、缓存、并发避免每次构建全量扫描。

知识点

• WCAG 2.1 对比度算法：(L1 + 0.05) / (L2 + 0.05)，L 为 sRGB 相对亮度。
• grunt-color-contrast 内部机制：基于 color-diff 与 wcag-contrast，支持自定义阈值、替换映射表、输出 JSON 报告。
• Grunt 多任务注册：grunt.registerMultiTask 与 this.options() 的用法，保证任务可复用。
• 国内常见陷阱：
  – 设计稿给的 8 位 hex (#RRGGBBAA) 被插件误判，需先裁掉 alpha 通道。
  – 深色模式媒体查询 @media (prefers-color-scheme: dark) 下颜色被重复扫描，需用 grunt-string-replace 先抽离。
• CI 集成：在 GitLab-CI 中把对比度检测设为 allow_failure: false，合并请求自动回退。

答案

1. 安装与版本锁定
   npm i -D grunt-color-contrast@~1.2.0
   在 package.json 的 engines 字段写明 node ≥ 14，避免国内镜像源拉到老版本。

2. Gruntfile.js 配置
   module.exports = function(grunt) { grunt.initConfig({ color_contrast: { options: { threshold: 4.5, // AA 级别 backgroundColor: '#ffffff', // 可动态读取主题色 replaceMap: { // 国内设计师常用“灰色偷懒”映射 '#999999': '#595959', '#cccccc': '#757575' }, report: 'json', reportDir: 'reports/a11y' }, src: ['src/**/*.{css,less,scss,vue,jsx}'] } }); grunt.loadNpmTasks('grunt-color-contrast'); grunt.registerTask('a11y', ['color_contrast']); grunt.registerTask('default', ['clean', 'less', 'color_contrast', 'cssmin']); };

3. 动态背景色
   若项目支持主题切换，在任务运行前用 grunt.file.readJSON 读取用户当前主题色，注入 options.backgroundColor，保证对比度计算真实。

4. 性能优化
   – 配合 grunt-newer，仅扫描变更文件：
   grunt.registerTask('dev', ['newer:color_contrast', 'watch']);
   – 大仓库可拆分子任务，按业务模块并行：
   color_contrast: {
   mall: { src: 'src/mall//*' },
   admin: { src: 'src/admin//*' }
   }

5. 结果治理
   – 在 report JSON 中统计失败率，若 >5%，通过 grunt-fail 中断构建，倒逼 UI 回炉。
   – 把报告上传到腾讯 COS 或阿里云 OSS，在 Merge Request 里用钉钉机器人 @设计师，实现“国内社交化”协作。

拓展思考

• 灰度发布场景：如果线上已存在低对比度活动页，直接替换色值可能导致品牌冲突。可先用 grunt-color-contrast 生成“仅警告”模式，结合国内常用的蓝绿部署，在预发环境收集 24 小时用户无障碍反馈，再决定是否全量替换。
• 小程序适配：微信小程序的 wxss 不支持 CSS 变量，需把替换结果写回 .wxss 文件，并在 devtools 的“真机调试”里再次校验，因为 Android 机型深色模式会强制加深背景。
• 设计系统闭环：把替换映射表同步到字节的“Semi Design”或蚂蚁的“Ant Design” token 仓库，实现“一次修复，全业务线生效”，避免各团队重复踩坑。