落地页英雄区那版落日渐变是我照稿敲的，两端都好看，白字压上去却被反馈说副标题发虚。我先怀疑字号字重，后来才意识到：从 #ff512f 走到 #dd2476 的是整条线，验收的人只看了好看的那端。把两个色标分开当纯色算，白字 0% 处 3.25:1、100% 处 4.58:1，差的那半档全在开头。
判据只有两条线，卡的是最差那个色标
口径按页面原话：正文不低于 4.5:1，大号文字（24px 以上，或 18.66px 加粗）不低于 3:1，取最差色标同时判这两档；它是阈值，不是过了就人人可读的保证。基准值：#000000 对 #ffffff 是 21.00:1 的理论上限，#767676 对白 4.54:1、#777777 对白 4.48:1，一档灰就能翻边，所以小数位我保持两位。落日换黑字是 6.47:1 与 4.59:1，两项都达标。
同一份渐变，六种输出串差在哪
只换格式，色标角度写法都不动，在 CSS 渐变生成器 里逐个切出来：
| 输出格式 | 得到的字符串 |
|---|---|
| background-image 单行 | background-image: linear-gradient(135deg, #ff512f 0%, #dd2476 100%); |
| background 简写 | background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%); |
| 多行缩进 | |
| 内联 style | <div style="background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%)"> |
| Tailwind 任意值 | class="bg-[linear-gradient(135deg,#ff512f_0%,#dd2476_100%)]" |
| CSS 变量 | |
只有 Tailwind 那行改了字符：逗号后不留空格、分隔空格换成下划线。
逐色标算下来，浅色几乎都要求换黑字
| 色板 | 白字 0% | 白字 100% | 白字最差 | 黑字最差 |
|---|---|---|---|---|
| 落日 135deg | 3.25:1 | 4.58:1 | 3.25:1 | 4.59:1 |
| 海洋 120deg | 12.55:1 | 1.91:1 | 1.91:1 | 没算过 |
| 薄荷 90deg | 1.59:1 | 1.34:1 | 1.34:1 | 13.18:1 |
| 霓虹 45deg | 6.28:1 | 3.72:1 | 3.72:1 | 3.35:1 |
- 海洋白字 0% 处 12.55:1 富余，100% 处只剩 1.91:1；补一个中点节点后是 12.55 / 10.92 / 1.91，最差仍是 1.91。
- 薄荷白字最差 1.34:1、黑字最差 13.18:1，浅底必须换黑字。
- 霓虹白字最差 3.72:1、黑字最差 3.35:1，两个方向都停在只够大号文字那档。
带透明度的节点要先跟假设底色混合
渐隐绿是 #39ff14 从 1 渐变到 0，三种写法三种字符串：HEX 写 linear-gradient(135deg, #39ff14 0%, #39ff1400 100%)，rgb 写 rgba(57,255,20,0)，hsl 写 hsla(111,100%,54%,0)。8 位 HEX 末两位是 alpha：0.6 对应 99（0.6×255=153），0.5 对应 80，0.99 对应 fc；反过来 #aabbcc80 解析出的是 0.5019607843137255，不是整的 0.5，transparent 则是 alpha 0 的 #000000。写法拿不准时我用 颜色格式互转 核一遍。
alpha 小于 1 的节点先与假设底色（默认白）混合再算，底色一换结果就换：底色白时 0% 处 1.36:1、100% 处 1.00:1；底色换成 #0a0a0a 后 100% 处升到 19.80:1，0% 处仍是 1.36:1，最差还是 1.36——深底只救末端，救不了整条。页面在这时还会提示：8 位 HEX 在 Safari 上要 9.1+，要照顾更旧环境就换成 rgb()。
报表里没有中段，量化是另一坑
逐色标算的代价是：中点不在色标里，就不会出现在报表里。落日两色按 sRGB 通道取算术平均，中点 #ee3b53 的白字是 3.90:1、黑字 5.39:1，比 0% 的 3.25 好一点，却仍停在只够大号文字那档。发灰也是同一算法：海洋两端 #1a2980 与 #26d0ce 的通道均值是 #207da7，深蓝与亮青取平均就得到这种灰蓝；想让它被报出来，就像三段紫那样把中间色直接写进 50%。
量化这坑：每通道 0-255 共 256 级，256 的三次方是 16777216 色；两色铺满 1000px 宽时每级占 3.9063px，约 4px 一档，斜向 45deg 时渐变线被拉长约 1.4142 倍。落日两色的通道差是 R 34 级、G 45 级、B 71 级。
几个当时把我绕住的问题
Q：0deg 是朝上还是朝右？
朝上。CSS 的 0deg 指向正上方，数值顺时针增大，90deg 是右、180deg 是下；数学极角的 90deg 指向上，两套别混。角度框允许输 -360 到 720，但输出会归一：-45 归成 315、405 归成 45、360 和 720 都归成 0。
Q：conic 的百分比是距离吗？什么时候要勾兜底纯色？
是角度，100% 等于 360deg，彩虹环从 0% 铺到 100% 绕一圈。规范里有 repeating-conic-gradient 但没有浏览器实现，页面不提供。兜底色也不是渐变本身的必须项，勾上只多一行 background-color: #ff512f;，取的是排序后第一个色标。我只在用 conic 时勾，它在 Safari 上要 12.1+，旧浏览器会让整条声明失效；用 linear 或 radial 时不勾，它改不了色标本身的对比度。
Q：色标位置乱填会怎样？
输出按位置从小到大重排：输入顺序 100、0、50 得到 linear-gradient(90deg, #8a2387 0%, #e94057 50%, #f27121 100%)。两个色标同放 12% 就没有插值区，硬边出来——斜纹条正是靠 0%、12%、12%、24% 四个位置画条纹，一个周期只占 24%，后 76% 由平铺重复 4.1667 次。
回到开头那句「白字看不清」。我的依据是三步：把每个色标当纯色算一遍，看最差值落在 4.5 还是 3 以下；确认报表里有没有中点，跨色相的就手动补一个，中段最容易失守；再核字号，24px 以上或 18.66px 加粗才允许停在 3。落日这组我最终把正文换成黑字（最差 4.59:1），白字只留给大号标题；霓虹那种白字 3.72、黑字 3.35 两边都不够正文档的，我不再拿它压正文。问题不是渐变能不能用，是最差的那个色标没人算过。