配色不只要好看：WCAG 对比度与中国传统色

浅灰字配白底，设计师觉得高级，用户眯着眼看不清。配色有两套标准：一套是审美（色名、色系、文化意象），一套是可读性（对比度是否达标）。前者靠色卡，后者靠计算，两个工具正好各管一头。

一、WCAG 对比度：一个可以算出来的数

WCAG 2.1 把前景色与背景色的相对亮度做比值，公式为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮者的相对亮度。相对亮度由 sRGB 各通道经伽马校正后加权得出，所以亮度不是简单的 RGB 平均值——这也是「看起来差不多深，结果一个达标一个不达标」的原因。

几个直觉锚点：纯黑字配纯白底是 21:1（满分）；#777 灰字配白底约 4.5:1，正好卡在 AA 线上；#999 配白底约 2.8:1，只够大字号。所以「正文用浅灰」几乎必然不达标。检测工具会直接给出比值、判定结果和调整建议，改一个色值就能立即复验。

二、三个最常见的踩坑点

1. 只看正文忘了状态色：按钮文字、表单报错提示、禁用态文字同样要过对比度，红色错误文字在浅红底上经常不达标；
2. 图片上的文字：背景不是纯色时，需要先取实际区域的颜色或加半透明遮罩，再算对比度；
3. 大字号放宽但别滥用：3:1 只适用于足够大的标题，14px 加粗不算「大字号」，别拿这条给正文开脱。

三、中国传统色：88 个色名背后的取色思路

中国传统色对照表收录 88 个色名，给出 HEX、RGB 色值与色系分类，点色块即复制色值，还附名称出处与用法提示。像月白、藕荷、黛蓝、缃色、朱砂这类名字，本身就带着明度与意象，比「浅蓝 1 号」更便于团队沟通。

国风设计里好用的三个做法：

• 同色系分层：从同一色系里挑深浅三档做背景、图形、强调，天然和谐；
• 低饱和大面积 + 高饱和点缀：传统色多偏灰调，适合大面积铺底，再用朱砂、藤黄一类高饱和色点题；
• 取完色必测对比度：传统色普遍明度偏中间，直接当文字色风险高，正文仍建议用深墨色，彩色只做背景或装饰。

四、常见问题

问：AA 达标是不是就完全无障碍了？
AA 是对比度的最低门槛，还有色盲友好（不能只靠颜色传达信息）、焦点可见、字号可缩放等要求。但过对比度这一关，能解决大部分实际阅读问题。

问：品牌色太浅，不能改怎么办？
把浅品牌色用于背景或装饰，文字改用同色系深色版本；或者加深文字、加大字号并保持粗体。工具会给出可读性调整方向。

问：传统色的 HEX 能直接用于印刷吗？
不能，HEX 是屏幕色值，印刷需要 CMYK 并考虑色域差异与打样。屏幕设计直接用没问题。

五、一条落地流程

1. 先用传统色卡定主色与辅助色，确定气质；
2. 把正文、按钮、提示文案的颜色逐对放进对比度检测；
3. 不达标的换同色系深色版本，复验到 AA 以上；
4. 最后在真机上扫一眼，弱光环境下的可读性最能说明问题。

好看和好读不冲突，只是需要两步：取色靠审美，验收靠数值。把这两个工具配成一套，配色方案既能出彩也能过关。