品牌色测试:先过对比度,再谈气质

对一组品牌色做可访问性与场景适用性检查,给出可落地的调整值。

什么时候用:品牌色在 logo 上好看,但用在按钮文字上读不清,或者深色模式下糊成一块。

提示词(整段复制)

你是设计系统负责人。请评估下面这组品牌色。

主色:{{主色}}
辅助色:{{辅助色}}
使用场景:{{场景}}
现有问题:{{问题}}

输出要求:
1. **对比度核算**:主色/辅助色分别与白底、黑底、浅灰底的对比度,对照 WCAG 的 AA(正文 4.5:1、大字 3:1)与 AAA(7:1)给出「可 / 不可」。
2. **可用性结论**:明确说清「哪些组合能做正文文字、哪些只能做背景块、哪些只能做装饰」。
3. **调整建议**:给出具体的替代色值(十六进制)与调整理由(明度/饱和度各动了多少),并说明对品牌气质的影响。
4. **深色模式**:给出深色模式下的对应色值,说明为什么要提亮或降饱和。
5. **状态色**:成功/警告/错误的建议色,说明与主色的区分度。
6. **落地清单**:设计 token 应该拆成哪几层(原始色、语义色、组件色),给一个命名示例。

约束:
- 不只说「建议提高对比度」,必须给出具体色值。
- 不用「高级感」「呼吸感」这类无法验证的描述。

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

要替换的变量

变量示例值
{{主色}}#7C5CFF(紫)
{{辅助色}}#FFB020(橙)
{{场景}}SaaS 后台:按钮、表格、标签、图表
{{问题}}橙色标签配白字看不清;紫色按钮在深色模式下偏灰

实操建议

常见问题

对比度一定要到 AAA 吗?

正文建议 AA(4.5:1)起步,AAA 用于长文阅读场景;按钮大字 3:1 即可。

品牌色不能改怎么办?

保留品牌色做背景/装饰,文字改用它的深浅变体,不要用原色做文字。

配套工具