识别warning仍为零退出,给发布门槛另设判断
本页展示随包原生输入和验收参考。Stitch云端运行状态:未运行;下方CLI区域保留实际本地执行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| component | textColor | backgroundColor | outline | text |
|---|---|---|---|---|
| weak | #CBCBCB | #FFFFFF | ||
| strong | #183B39 | #FFFFFF | ||
| focus | 2px solid #184A45 | 继续预约 |
读取contrast finding
reference.csv:作者验收映射,不是目标API回包
| condition | severity | exitCode | requirement |
|---|---|---|---|
| contrast-ratio warning | warning | ||
| warnings without errors | 0 | ||
| project acceptance | no contrast warning plus visible focus |
规则与输入文件原文
{
"inputRows": [
{
"component": "weak",
"textColor": "#CBCBCB",
"backgroundColor": "#FFFFFF"
},
{
"component": "strong",
"textColor": "#183B39",
"backgroundColor": "#FFFFFF"
},
{
"component": "focus",
"outline": "2px solid #184A45",
"text": "继续预约"
}
],
"referenceRows": [
{
"condition": "contrast-ratio warning",
"severity": "warning"
},
{
"condition": "warnings without errors",
"exitCode": 0
},
{
"condition": "project acceptance",
"requirement": "no contrast warning plus visible focus"
}
],
"invalidRows": [
{
"check": "exitCode==0",
"claim": "accessibility passed"
},
{
"textColor": "#FFFFFF",
"backgroundColor": "#FFFFFF",
"error": "unreadable"
}
],
"notes": [
"作者自制可编辑输入与验收参考,非官方CLI或云端返回。",
"完整合法基础稿采用官方frontmatter schema;仅按本课故意更改对应字段。"
],
"designMdTemplate": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"{colors.primary}\"\n textColor: \"#FFFFFF\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"officialSchemaUrl": "https://github.com/google-labs-code/design.md/blob/main/docs/spec.md",
"files": {
"input.json": "[\n {\n \"component\": \"weak\",\n \"textColor\": \"#CBCBCB\",\n \"backgroundColor\": \"#FFFFFF\"\n },\n {\n \"component\": \"strong\",\n \"textColor\": \"#183B39\",\n \"backgroundColor\": \"#FFFFFF\"\n },\n {\n \"component\": \"focus\",\n \"outline\": \"2px solid #184A45\",\n \"text\": \"继续预约\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"condition\": \"contrast-ratio warning\",\n \"severity\": \"warning\"\n },\n {\n \"condition\": \"warnings without errors\",\n \"exitCode\": 0\n },\n {\n \"condition\": \"project acceptance\",\n \"requirement\": \"no contrast warning plus visible focus\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"check\": \"exitCode==0\",\n \"claim\": \"accessibility passed\"\n },\n {\n \"textColor\": \"#FFFFFF\",\n \"backgroundColor\": \"#FFFFFF\",\n \"error\": \"unreadable\"\n }\n ]\n}\n",
"case.md": "# DESIGN.md对比度检查:识别warning仍为零退出,给发布门槛另设判断\n\nDESIGN.md对比度检查不能只写命令成功。本课的浅灰按钮可能只有warning而退出码为0,因此要对可读性单独设门槛,同时保留焦点和禁用状态的人工检查。\n\n## 建立两个可比较按钮\n\n准备浅灰字/白底按钮与深色字/白底按钮,尺寸和文案完全相同。\n\n先把两组前景背景写入组件token,不用图片压缩后的取色代替源色值。\n\n## 保存基线渲染\n\n用作者HTML页同时显示两组样式,记录文字字号和正常阅读距离。\n\n截图只证明外观,不能替代颜色计算或键盘焦点测试。\n\n## 读取contrast finding\n\n运行lint并筛出contrast-ratio的warning,查看它对应的组件。\n\n官方规则针对组件前景背景低于4.5:1给警告,不要把warning解释为解析失败。\n\n## 辨认零退出的边界\n\n记录该文件退出码,并查看summary中的warnings。\n\n若exitCode为0但仍有对比度警告,说明本课需要的可读性门槛尚未满足。\n\n## 改语义色的前景组合\n\n将低对比按钮文字改为已有的深色on-surface,保留按钮背景。\n\n别同时改文案、尺寸和颜色,否则无法判断改善来自哪一项。\n\n## 写明确的检查条件\n\n在作者检查清单里约定contrast-ratio warning不得出现,再重复运行。\n\n这条是项目自己的交付要求,不把它说成CLI默认会以1退出的行为。\n\n## 复查焦点与禁用显示\n\n在预览页用Tab查看焦点环,切换禁用状态确认仍能辨认。\n\n保存色值、finding和截图三类证据,未执行的辅助技术检查保持未测。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"DESIGN-before.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"#FFFFFF\"\n textColor: \"#CBCBCB\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"DESIGN-after.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"#FFFFFF\"\n textColor: \"#183B39\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"contrast.html": "<!doctype html><html lang=\"zh-CN\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>同文案按钮对比</title><style>body{font:16px/1.6 Arial,sans-serif;background:#f7f4ec;color:#183b39;margin:32px;max-width:1100px}h1{font-size:32px}article{padding:24px;border:1px solid #cbd4cc;background:white;margin:16px 0}button{background:#184a45;color:white;padding:12px 20px;border:0;border-radius:8px}table{border-collapse:collapse;width:100%}th,td{padding:10px;border:1px solid #cbd4cc;text-align:left}pre{white-space:pre-wrap;overflow-wrap:anywhere}.weak{background:#fff;color:#cbcbcb}.strong{background:#fff;color:#183b39}button:focus-visible{outline:3px solid #184a45;outline-offset:4px}</style><h1>继续预约</h1><article><button class=\"weak\">继续预约</button><button class=\"strong\">继续预约</button></article></html>",
"contrast-warning.stdout.txt": "{\n \"findings\": [\n {\n \"severity\": \"warning\",\n \"path\": \"components.button-primary\",\n \"message\": \"textColor (#cbcbcb) on backgroundColor (#ffffff) has contrast ratio 1.62:1, below WCAG AA minimum of 4.5:1.\",\n \"rule\": \"contrast-ratio\"\n },\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 1 component.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 0,\n \"warnings\": 1,\n \"infos\": 1\n }\n}\n",
"contrast-warning.stderr.txt": "",
"contrast-fixed.stdout.txt": "{\n \"findings\": [\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 1 component.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n }\n}\n",
"contrast-fixed.stderr.txt": "",
"local-cli-receipt.json": "{\n \"status\": \"executed\",\n \"package\": \"@google/design.md\",\n \"version\": \"0.4.0\",\n \"cases\": [\n {\n \"case\": \"contrast-warning\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"45bdf95fbbd7134d1ec15be58e0dbc34aa00490f21c7cb2c072f8e2cf29371c3\"\n },\n {\n \"case\": \"contrast-fixed\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"507468c97879fb6b9353db67609ac5102667c2cbc6d57bdda0f1614c240967fb\"\n }\n ]\n}\n"
}
}官方CLI本地实测 · 0.4.0
以下stdout由当前包内同字节输入实际执行,退出码单独保留。Stitch云端生成未运行。
contrast-warning / exit 0
{
"findings": [
{
"severity": "warning",
"path": "components.button-primary",
"message": "textColor (#cbcbcb) on backgroundColor (#ffffff) has contrast ratio 1.62:1, below WCAG AA minimum of 4.5:1.",
"rule": "contrast-ratio"
},
{
"severity": "info",
"message": "Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 1 component.",
"rule": "token-summary"
}
],
"summary": {
"errors": 0,
"warnings": 1,
"infos": 1
}
}
contrast-fixed / exit 0
{
"findings": [
{
"severity": "info",
"message": "Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 1 component.",
"rule": "token-summary"
}
],
"summary": {
"errors": 0,
"warnings": 0,
"infos": 1
}
}
应当保留的约束
| condition | severity | exitCode | requirement |
|---|---|---|---|
| contrast-ratio warning | warning | ||
| warnings without errors | 0 | ||
| project acceptance | no contrast warning plus visible focus |
故意构造的错误样例
| check | claim | textColor | backgroundColor | error |
|---|---|---|---|---|
| exitCode==0 | accessibility passed | |||
| #FFFFFF | #FFFFFF | unreadable |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。