看得清 · 配色对比度检查器

为什么这件事必须用数值判断

同一组色值，在设计稿里、在设计师的高色域显示器上、在用户的户外手机屏上，呈现出的可读性差别很大。 实测经验是：亮度越低越容易骗人，暗色界面上的深灰字，做稿时看着清楚，到了亮度调低的手机上会整片糊掉。 所以对比度不该由「我觉得还行」决定——根据 WCAG 2.2 的算法，它有一个能算出确定数值的答案。

W3C 给出的阈值是两个：正文 4.5:1，大号文字与图形 3:1。实际上，这两个数不是随手定的， 换算成相对亮度后，前者比后者严格 50%。换句话说，同一组配色在正文里不合规， 放到 24px 以上的标题里可能就合规了——所以判断前先明确这段文字是什么字号， 再去看它该对哪一条。

半透明叠层：为什么算不出一个固定值

真实界面里的卡片很少是纯色。带透明度的卡片压在渐变背景上时，它的实际颜色由底层的颜色决定， 于是同一张卡在屏幕左上和右下并不是同一个颜色。比如 64% 不透明的深青卡片， 压在接近黑的起点和压在偏亮的末端，复合后的 L* 会相差两个点左右——肉眼看不出， 但对比度这个指标会跟着变。

关键在于计算顺序：浏览器合成页面时，先把卡片色与其下方底色按 alpha 参数复合，得到实际的十六进制色值， 再用它去和文字色算比值。跳过这一步直接拿卡片的名义色去算，得到的数字没有意义。 这也是很多在线工具给出的结论与实际观感对不上的原因——它们只接受不透明色。

暗色界面的真正问题在层级，不在对比度

做深色主题时，最容易出问题的不是「字看不清」，而是三层背景看不出区别：页面底、卡片、浮层挤在 很窄的亮度区间里，导致整个界面像一块平整的板。用对比度这个指标衡量层级是失效的， 因为比值在极暗区间会被压缩——两个都很暗的颜色，比值可能只有 1.2，但亮度差其实不小。

说白了，判断层级要看 CIE L* 的绝对差值，而不是比值。经验口径是：暗色界面每一级相差 3 以上 才看得出分层，浅色界面可以更小。举个例子，底色 L* 3.4、卡片 L* 8.0，差 4.6，这一组是成立的； 若卡片只到 L* 6，差 2.6，多数人会说「这两层好像一样」。

修法通常比想象中简单：不要靠加边框去强调分层，直接把相邻层的 L* 拉开到 3 以上， 边框只在需要「切一刀」的地方用。这样即使外层换成浅色主题，层级关系也不会塌。

配色方案、字阶与间距这些不需要计算的层，整理在设计规范生成器里；这一页只负责两件可算的事——比值与亮度差。两边用的是同一套算法，结论不会互相打架。 文末的参考来源逐条标了出处，其中 W3C 的规范是这些阈值的原始依据。