配色可读性检查:别让字消失

按 WCAG 标准核对每对前景/背景的对比度,给出修改到合规的最小改动。

什么时候用:配色定了但担心文字看不清、或者要过无障碍检查的时候用。

提示词(整段复制)

你是无障碍设计顾问。核对下面这套配色的可读性:
1. 对每一组「文字色 + 背景色」计算对比度(给计算过程:先算相对亮度,再套公式),对照 WCAG 标准判断等级(AA 正文 4.5:1、AA 大字 3:1、AAA 正文 7:1);
2. 对不达标的那几对,给「最小改动方案」——只调整明度、不动色相,并给出调整后的色值与新对比度;
3. 指出只在特定状态才发生的对比问题(hover、禁用态、深浅模式切换、图片上的文字);
4. 提醒哪些元素看起来是装饰但其实承担信息(图标、边框、下划线),它们也需要满足 3:1;
5. 最后给一个「必须现在改」的清单(不达标且出现在正文的)。
配色:{{配色}}
使用场景:{{场景}}

复制时把 {{变量}} 换成你自己的内容;变量名不要改,改了模型容易把它当普通文字。

要替换的变量

变量示例值
{{配色}}(列出每组的色值,如 正文 #333 on #fff)
{{场景}}(官网正文 / 后台表格 / 移动端列表)

实操建议

常见问题

AA 和 AAA 该按哪个来?

公开网站按 AA 通常够;面向老年人、政务、金融类内容建议按 AAA 更稳。

模型算的对比度准吗?

不一定。公式不难但容易算错,建议用现成的对比度工具复核关键几组。

配套工具