企业官网建设流程全解析

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：

还有一个快速预判技巧：如果文字色和背景色的 OKLCH 明度差 < 50%，这对组合很可能不达标，需要完整计算确认。

四种最常见的对比度失败场景与修复方法

interaction-and-states.md 把 Hallmark 输出最常踩的四类坑整理成了对照表：

用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