AI 配色好看却看不清？把色板拆成文字和底色逐对检查

这次做什么：把 AI 给出的几个色块变成能直接用于排版的颜色用途表。用一张虚构的摄影活动卡练习：找出看不清的小字与按钮，保留想要的琥珀色，再把不合适的文字色改好。完成后，你会有四组明确的文字色、底色与检测记录。

准备与费用：一个当地可用、获准使用的文字 AI，浏览器，以及能输入六位色号的现有排版工具即可。这里不需要付费生图、API 或新插件；AI 对话按所用服务的额度计费。检测用 WebAIM Contrast Checker 的公开网页，需要开启 JavaScript。下面的活动与配色都是原创教学素材，只需提供色号和虚构文案，不用上传客户未公开的品牌文件。

先说明验证范围：本文的示例比例按 W3C 公开公式独立计算；未把这张卡放进实际设计软件，也未执行 WebAIM 网页交互。你可以把它当作带参考答案的练习，实际作品仍按后面的清单检查。一次颜色检查也不能代表整张页面已经满足全部无障碍要求。

一、先写用途，别只收下一排色块

本例的卡片内容很短，方便把注意力放在颜色上。活动信息完全虚构，不是真实报名通知：

标题：桌面摄影入门体验
正文：本次演示静物布光，自备手机。
次要说明：周六 14:00，60 分钟。
按钮文字：查看安排
状态示例：已报满

页面底色：#FFFFFF
希望保留的按钮底色：#F59E0B

先给“正文、次要说明、按钮字、状态字”各留一行。标题沿用正文的文字色与白底配对，同样按本轮 4.5:1 门槛检查。每行同时写文字色和它后面的实际底色。只写“这套色板有白色、灰色、橙色”还无法验收：同一种橙色做装饰、做按钮底色、做白底小字，结果可能不同。

这次把所有文字都按普通大小处理，要求对比度至少 4.5:1。WCAG 2.2 的文字对比度条款对符合定义的大字有 3:1 门槛；本练习不使用这个例外，避免卡片缩小后把“小字”误算成“大字”。

二、让 AI 给出颜色用途表，数值先留待测

可以把下面这段与卡片文案一起提交。限制不透明纯色，是为了让第一次练习的检测条件清楚。

请为上面的虚构活动卡制作颜色用途表。
每行写：用途、文字色、实际底色、选择理由、检测状态。
用途只包含正文、次要说明、按钮文字、状态文字。
使用六位十六进制色号，不使用透明色、渐变或照片底。
页面底色保持 #FFFFFF，按钮底色先保持 #F59E0B。
正文与按钮字都按普通大小文字处理。
你可以提出候选色，但不要声称已经测出对比度。检测状态先写“待独立检测”。
状态要保留“已报满”等可读文字，不能只用红绿圆点表达。
不改活动内容、时间或布局。等我给出检测结果后，再修改失败的配对。

为了统一练习起点，下面用一份人为设计的初稿继续操作；它不是某个模型的实测输出。AI 实际给出的色号不同，也可以照同样的方法检查。

• 正文：文字 #1F2937，底色 #FFFFFF。
• 次要说明：文字 #9CA3AF，底色 #FFFFFF。
• 按钮：文字 #FFFFFF，底色 #F59E0B。
• 状态“已报满”：文字 #92400E，底色 #FEF3C7。

三、一组一组测，找准普通文字的结果

打开 WebAIM 检查器，在 Foreground 输入文字色，在 Background 输入实际底色。每填一组，就查看 Contrast Ratio 和 Normal Text 下的 AA 结果，记下色号、比例、通过或未通过。页面另列了 Large Text，别把它的通过状态借给小号说明文字。工具的输入方式和结果分组可在官方页面说明中核对。

本例应该发现两组需要修改的配对：

1. 正文深灰配白底约为 14.68:1，通过本轮普通文字门槛。
2. 次要说明浅灰配白底约为 2.54:1，未通过。
3. 白色按钮字配琥珀底约为 2.15:1，未通过。
4. 深棕状态字配浅黄色底约为 6.37:1，通过本轮门槛。

这里显示到小数点后两位是为了好读，判断门槛不能靠取整。例如原值 4.499:1 仍低于 4.5:1。W3C 的解释页明确提醒不要把未达标的数值四舍五入后算作通过。

四、把失败结果交回 AI，只改需要改的配对

先处理按钮。底色是你希望保留的部分，因此这次只让 AI 提出更深的文字色，而不是重做整套设计：

独立计算结果：按钮文字 #FFFFFF 配底色 #F59E0B，对比度为 2.1476626917618766:1。
按本轮普通文字至少 4.5:1 的规则，这一组未通过。
先保持底色 #F59E0B，只提出两个更深的文字色候选。
不改活动内容、布局和其他颜色。候选比例标为待测，不要编造实测值。

每个候选都重新检测。一个可用的参考改法是把按钮字换成 #111827，底色仍为 #F59E0B，计算约为 8.26:1。次要说明则可从 #9CA3AF 改为 #6B7280，保持白底，计算约为 4.83:1。

这两个色号只是本例的可用参考。如果你更喜欢别的颜色，可以保留，但必须对新的实际配对重测。不要把“AI 说它可读”填进检测记录，也别在换了背景以后沿用旧比例。

此时的四行参考结果可以直接存为一份本地文本：

用途：正文
文字色：#1F2937；底色：#FFFFFF；参考比例：14.68:1

用途：次要说明
文字色：#6B7280；底色：#FFFFFF；参考比例：4.83:1

用途：按钮文字
文字色：#111827；底色：#F59E0B；参考比例：8.26:1

用途：状态“已报满”
文字色：#92400E；底色：#FEF3C7；参考比例：6.37:1

条件：不透明纯色；全部按普通大小文字检查。
实际检测日期、工具与结果：由操作的人填写。

五、放回真实大小，再检查颜色之外的提示

把四组色号填进排版工具，在预计的手机显示大小看一遍。重点读小字时间、按钮字和状态字。细字体、缩得太小的卡片、导出后的模糊仍可能让阅读吃力；比例通过只是这一轮检查的结果。看着费劲时，可以把文字加深、适当放大或选择笔画更清楚的字体，然后再看。

再把颜色的作用单独检查一次。卡片要能读到“已报满”，而不是只剩一个红点。如果还有“可报名”状态，也直接写明。对于正文中的链接，可以加下划线，而不只把字换成另一种颜色。W3C 的颜色使用说明要求信息有颜色以外的可见提示。

如果后来把纯色底换成照片、渐变或透明层，这份记录就不能原样沿用。文字的背景会随位置变化，应在最终画面逐处检查。第一次练习可以先加一块明确的不透明底板，再检测文字与底板的配对。

六、照这六项验收，再保存版本

1. 四种文字用途都有明确的文字色与实际底色，没有只列色板。
2. 能找出初稿的两组失败：白底浅灰小字、琥珀底白色按钮字。
3. 修订后的每组普通文字，未取整结果都至少为 4.5:1；记录没有沿用修订前的比例。
4. 小号说明、按钮字、状态信息都检查到了；手机大小下能直接读清。
5. 状态去掉颜色也能靠文字理解，链接没有只靠颜色区分。
6. 保存最终色号、用途、检测日期与修改理由；以后换底色、透明度或字号时重新检查。

常见卡点可以这样处理：

• 检查器拒绝色号：确认使用六位十六进制值，按页面要求输入，别把中文色名、RGB 括号或标点一起粘进去。
• 工具算出的比例不同：先核对前景、背景是否填对，以及有没有透明度。优先用设计文件里的准确色号，不要在压缩截图的文字边缘取色。
• 大字通过、小字失败：本例继续按普通文字门槛修改，不能靠把标签写成“大标题”改变实际字号。
• AI 一次改了整套色板：回到上一版，只接受已检查的那一组修改，再逐组重测。
• 数值通过但还是难读：检查字体、缩放和最终显示效果。需要时提高对比度并放大文字，不用把门槛值当成最佳视觉效果。
• 检测网页暂时打不开：保留“未验收”状态，等能独立检测后再定稿，不能用 AI 估算冒充检测结果。

完成时，你得到的是一份能继续编辑、能复查的配色用途表。下一次 AI 再给你一排漂亮色块，就可以先问：哪一块用来写字，它后面又是哪一块？

资料核查：2026 年 10 月 17 日。本例采用 W3C 的 sRGB 相对亮度与对比度公式计算参考数值；教学卡片、提示词和配色修订为原创设计。未进行 AI 产品、排版软件或网页检查器的端到端实测。