配色可读性检查:别让字消失
按 WCAG 标准核对每对前景/背景的对比度,给出修改到合规的最小改动。
提示词(整段复制)
你是无障碍设计顾问。核对下面这套配色的可读性:
1. 对每一组「文字色 + 背景色」计算对比度(给计算过程:先算相对亮度,再套公式),对照 WCAG 标准判断等级(AA 正文 4.5:1、AA 大字 3:1、AAA 正文 7:1);
2. 对不达标的那几对,给「最小改动方案」——只调整明度、不动色相,并给出调整后的色值与新对比度;
3. 指出只在特定状态才发生的对比问题(hover、禁用态、深浅模式切换、图片上的文字);
4. 提醒哪些元素看起来是装饰但其实承担信息(图标、边框、下划线),它们也需要满足 3:1;
5. 最后给一个「必须现在改」的清单(不达标且出现在正文的)。
配色:{{配色}}
使用场景:{{场景}}复制时把 {{变量}} 换成你自己的内容;变量名不要改,改了模型容易把它当普通文字。
要替换的变量
实操建议
- 要求它写出计算过程,是为了让你能核对——对比度算错是模型的高频错误
- 第 3 条的「hover 与禁用态」是最常翻车的地方,很多设计只检查了默认态
常见问题
AA 和 AAA 该按哪个来?
公开网站按 AA 通常够;面向老年人、政务、金融类内容建议按 AAA 更稳。
模型算的对比度准吗?
不一定。公式不难但容易算错,建议用现成的对比度工具复核关键几组。
