DESIGN.md对比度检查:识别warning仍为零退出,给发布门槛另设判断 素材身份:作者原创输入/可编辑参考。目标工具未在本轮执行。 先打开 index.html;input.csv 是原始字段,reference.csv 是验收基准,negative.csv 是故意构造的坏样例。 actual-results.csv 保留未测状态,实际执行后再填写。 前置条件: Node.js与npm已可运行;练习只需本地文本文件和官方@google/design.md CLI,不需要Stitch账号或付费生成。 固定当前CLI版本并保留版本号;DESIGN.md仍为alpha格式,升级前先在练习副本复核。 本课给出作者自制规则文件和预期,不把预期JSON冒充已执行的官方CLI返回。 操作步骤: 1. 建立两个可比较按钮 准备浅灰字/白底按钮与深色字/白底按钮,尺寸和文案完全相同。 先把两组前景背景写入组件token,不用图片压缩后的取色代替源色值。 2. 保存基线渲染 用作者HTML页同时显示两组样式,记录文字字号和正常阅读距离。 截图只证明外观,不能替代颜色计算或键盘焦点测试。 3. 读取contrast finding 运行lint并筛出contrast-ratio的warning,查看它对应的组件。 官方规则针对组件前景背景低于4.5:1给警告,不要把warning解释为解析失败。 4. 辨认零退出的边界 记录该文件退出码,并查看summary中的warnings。 若exitCode为0但仍有对比度警告,说明本课需要的可读性门槛尚未满足。 5. 改语义色的前景组合 将低对比按钮文字改为已有的深色on-surface,保留按钮背景。 别同时改文案、尺寸和颜色,否则无法判断改善来自哪一项。 6. 写明确的检查条件 在作者检查清单里约定contrast-ratio warning不得出现,再重复运行。 这条是项目自己的交付要求,不把它说成CLI默认会以1退出的行为。 7. 复查焦点与禁用显示 在预览页用Tab查看焦点环,切换禁用状态确认仍能辨认。 保存色值、finding和截图三类证据,未执行的辅助技术检查保持未测。 验收: 正常按钮不再出现对应contrast-ratio warning。 报告明确区分exitCode=0与warnings=0。 焦点和禁用样式另有实际查看记录。 官方资料: https://github.com/google-labs-code/design.md 图片身份:assets/ 为内置image_gen生成的原创练习输入缩略版,原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。