Hallmark 对比度闸门 46-50 详解如何杜绝黑底黑字事故【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark让 AI 帮你生成网页很快但翻车也很快——最常见的一种事故就是黑底黑字按钮底色和文字都是深色用户完全看不见字。开源项目Hallmark一个专为 Claude Code、Cursor、Codex 等 AI 编程助手打造的反 AI 廉价感设计技能把这类事故写进了它的 slop test低质测试清单对比度闸门 46–50就是专门拦截黑底黑字深色区块文字消失等对比度事故的 5 道强制检查任何 AI 生成的页面必须全部通过才能交付。本文带你逐条拆解这 5 道闸门帮你彻底告别对比度事故。对比度闸门 46-50 是什么Hallmark 的 slop test 包含 60 道检查闸门其中第 46–50 道全部聚焦对比度与可读性属于通用闸门——不分风格、不分场景每一页、每一个组件都必须过。定义见 slop-test.md。一句话概括它们防的事故AI 把底色翻深了却忘了把文字颜色一起翻转结果墨水色文字ink落在墨水色底面上。黑底黑字事故为什么总发生在 AI 生成的网页上原因很简单AI 写 CSS 时经常只改一半——把卡片背景从浅色换成深色background: var(--color-ink)文字却仍继承页面的默认墨色按钮用了强调色填充文字随手写了color: white而白色对某些强调色根本不够 4.5:1深色区块里的子元素各自继承颜色没有统一翻面。Hallmark 把这四类惯犯逐一对应到了闸门上下面逐条拆。五道闸门逐条拆解从正文 4.5:1 到深色区块翻面闸门 46正文对比度必须 ≥ 4.5:1所有正文小于 24px 常规字重、或小于 18px 粗体与其实际计算出的背景色的对比度不得低于WCAG 4.5:1。最常被漏掉的两个位置卡片换成了paper-2底色文字颜色却没跟着换明度太接近弱化文字muted落在paper-3上——两者都是中间明度几乎必然不达标。闸门 47大文字、图标、焦点环 ≥ 3:1大字≥24px 常规或 ≥18px 粗体、图标、:focus-visible焦点环的门槛放宽到3:1但检查方式一样。特别强调焦点环outline: 2px solid var(--color-focus)只有当--color-focus对元素本身和页面底色同时达到 3:1 才算过——否则键盘用户的焦点框直接隐身。闸门 48按钮文字颜色 ≈ 背景色的金丝雀检查 这是黑底黑字的直接拦截器如果按钮上计算后的文字色与背景色在 OKLCH 空间中明度差 5% 且色度差 0.05直接判失败。它精准命中那个经典 bug——color: var(--color-ink)落在background: var(--color-ink)上AI 忘了对填充底色使用专用文字色 token。闸门 49强调色填充必须配--color-accent-ink只要--color-accent被用作按钮、徽章、面板的填充色就必须同时定义并使用--color-accent-ink作为该面上的文字色且该 token 对强调色本身要满足≥ APCA Lc 60 / WCAG 4.5:1。文档原话很直白缺了这个 token输出就离一次低对比度事故只差一句随手写的color: white。闸门 50深色区块必须同步翻转文字色任何明度 50% 的深色 section 或面板都不能再使用页面默认的墨色文字。修复方式非常明确同一条 CSS 规则里设置深色background的同时必须设置浅色color通常是var(--color-paper)或包在一个已做翻面的父级里。最常见的翻车点某列被刷成了强调色/墨色底里面的子面板却还是默认墨色文字。WCAG 与 APCA 对比度阈值速查表闸门判分采用 APCA Lc首选感知均匀或 WCAG 2.1 比值阈值汇总自 color.md内容类型最低标准目标值正文WCAG 4.5:1APCA Lc ≥ 607:1大文字≥24px 常规 / ≥18px 粗体WCAG 3:1APCA Lc ≥ 454.5:1UI 组件边界3:14.5:1占位符 / 辅助文字4.5:14.5:1还有一个快速预判技巧如果文字色和背景色的 OKLCH 明度差 50%这对组合很可能不达标需要完整计算确认。四种最常见的对比度失败场景与修复方法interaction-and-states.md 把 Hallmark 输出最常踩的四类坑整理成了对照表#失败场景修复方法1文字落在翻面底色上深色底 墨色字设深色背景的规则里同时写color: var(--color-paper)2按钮强调色填充 白色文字改用主题保证达标的var(--color-accent-ink)3muted 文字落在 tinted paper 上双双中间明度换更深的--color-neutral或把背景提亮到--color-paper4焦点环颜色 按钮填充色焦点环消失--color-focus必须对元素和页面都 ≥ 3:1用contrast: pass (46–50)印章证明交付质量5 道闸门全部通过后Hallmark 会在生成的 CSS 顶部打下一行交付印章· contrast: pass (46–50)任何一道没过则记为· contrast: FAIL gates 列表修复前禁止交付见 SKILL.md。这行印章就是你验收这页不会出黑底黑字事故的凭证——哪怕只做单个组件也必须跑完这组通用闸门。想对自己的页面做检查可以用 Hallmark 的hallmark audit动词对目标页面打分它不改动代码只返回一份按严重度排序的问题清单示例见 audit-report.md。小结对比度闸门 46–50 看似是 5 条规则本质是一套**翻面必须连字色一起翻**的强制纪律正文 4.5:1、大文字与焦点环 3:1、按钮填充强制配专用文字色 token、深色区块必须显式翻转颜色。把这 5 道闸门交给 Hallmark 自动执行AI 生成网页里最劝退用户的黑底黑字事故就能在交付前被彻底拦下。️【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 对比度闸门 46-50 详解：如何杜绝黑底黑字事故
Hallmark 对比度闸门 46-50 详解如何杜绝黑底黑字事故【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark让 AI 帮你生成网页很快但翻车也很快——最常见的一种事故就是黑底黑字按钮底色和文字都是深色用户完全看不见字。开源项目Hallmark一个专为 Claude Code、Cursor、Codex 等 AI 编程助手打造的反 AI 廉价感设计技能把这类事故写进了它的 slop test低质测试清单对比度闸门 46–50就是专门拦截黑底黑字深色区块文字消失等对比度事故的 5 道强制检查任何 AI 生成的页面必须全部通过才能交付。本文带你逐条拆解这 5 道闸门帮你彻底告别对比度事故。对比度闸门 46-50 是什么Hallmark 的 slop test 包含 60 道检查闸门其中第 46–50 道全部聚焦对比度与可读性属于通用闸门——不分风格、不分场景每一页、每一个组件都必须过。定义见 slop-test.md。一句话概括它们防的事故AI 把底色翻深了却忘了把文字颜色一起翻转结果墨水色文字ink落在墨水色底面上。黑底黑字事故为什么总发生在 AI 生成的网页上原因很简单AI 写 CSS 时经常只改一半——把卡片背景从浅色换成深色background: var(--color-ink)文字却仍继承页面的默认墨色按钮用了强调色填充文字随手写了color: white而白色对某些强调色根本不够 4.5:1深色区块里的子元素各自继承颜色没有统一翻面。Hallmark 把这四类惯犯逐一对应到了闸门上下面逐条拆。五道闸门逐条拆解从正文 4.5:1 到深色区块翻面闸门 46正文对比度必须 ≥ 4.5:1所有正文小于 24px 常规字重、或小于 18px 粗体与其实际计算出的背景色的对比度不得低于WCAG 4.5:1。最常被漏掉的两个位置卡片换成了paper-2底色文字颜色却没跟着换明度太接近弱化文字muted落在paper-3上——两者都是中间明度几乎必然不达标。闸门 47大文字、图标、焦点环 ≥ 3:1大字≥24px 常规或 ≥18px 粗体、图标、:focus-visible焦点环的门槛放宽到3:1但检查方式一样。特别强调焦点环outline: 2px solid var(--color-focus)只有当--color-focus对元素本身和页面底色同时达到 3:1 才算过——否则键盘用户的焦点框直接隐身。闸门 48按钮文字颜色 ≈ 背景色的金丝雀检查 这是黑底黑字的直接拦截器如果按钮上计算后的文字色与背景色在 OKLCH 空间中明度差 5% 且色度差 0.05直接判失败。它精准命中那个经典 bug——color: var(--color-ink)落在background: var(--color-ink)上AI 忘了对填充底色使用专用文字色 token。闸门 49强调色填充必须配--color-accent-ink只要--color-accent被用作按钮、徽章、面板的填充色就必须同时定义并使用--color-accent-ink作为该面上的文字色且该 token 对强调色本身要满足≥ APCA Lc 60 / WCAG 4.5:1。文档原话很直白缺了这个 token输出就离一次低对比度事故只差一句随手写的color: white。闸门 50深色区块必须同步翻转文字色任何明度 50% 的深色 section 或面板都不能再使用页面默认的墨色文字。修复方式非常明确同一条 CSS 规则里设置深色background的同时必须设置浅色color通常是var(--color-paper)或包在一个已做翻面的父级里。最常见的翻车点某列被刷成了强调色/墨色底里面的子面板却还是默认墨色文字。WCAG 与 APCA 对比度阈值速查表闸门判分采用 APCA Lc首选感知均匀或 WCAG 2.1 比值阈值汇总自 color.md内容类型最低标准目标值正文WCAG 4.5:1APCA Lc ≥ 607:1大文字≥24px 常规 / ≥18px 粗体WCAG 3:1APCA Lc ≥ 454.5:1UI 组件边界3:14.5:1占位符 / 辅助文字4.5:14.5:1还有一个快速预判技巧如果文字色和背景色的 OKLCH 明度差 50%这对组合很可能不达标需要完整计算确认。四种最常见的对比度失败场景与修复方法interaction-and-states.md 把 Hallmark 输出最常踩的四类坑整理成了对照表#失败场景修复方法1文字落在翻面底色上深色底 墨色字设深色背景的规则里同时写color: var(--color-paper)2按钮强调色填充 白色文字改用主题保证达标的var(--color-accent-ink)3muted 文字落在 tinted paper 上双双中间明度换更深的--color-neutral或把背景提亮到--color-paper4焦点环颜色 按钮填充色焦点环消失--color-focus必须对元素和页面都 ≥ 3:1用contrast: pass (46–50)印章证明交付质量5 道闸门全部通过后Hallmark 会在生成的 CSS 顶部打下一行交付印章· contrast: pass (46–50)任何一道没过则记为· contrast: FAIL gates 列表修复前禁止交付见 SKILL.md。这行印章就是你验收这页不会出黑底黑字事故的凭证——哪怕只做单个组件也必须跑完这组通用闸门。想对自己的页面做检查可以用 Hallmark 的hallmark audit动词对目标页面打分它不改动代码只返回一份按严重度排序的问题清单示例见 audit-report.md。小结对比度闸门 46–50 看似是 5 条规则本质是一套**翻面必须连字色一起翻**的强制纪律正文 4.5:1、大文字与焦点环 3:1、按钮填充强制配专用文字色 token、深色区块必须显式翻转颜色。把这 5 道闸门交给 Hallmark 自动执行AI 生成网页里最劝退用户的黑底黑字事故就能在交付前被彻底拦下。️【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考