APCA 对比度合成器

三步合成：设角色、定对比度、拿颜色。

把「对比度」从验证指标变成生成起点——先声明要多高的可读性，颜色由引擎反解出来。

1. 01

   选角色与参照

   合成色作为文字还是底色？参照面选纯白、纯黑或输入自定义背景色。

2. 02

   定目标对比度

   拖动 |Lc| 滑块到目标值（正文建议 ≥75、大字 ≥60），再调彩度与色相；勾选「最大彩度」自动取该色相下最饱和的可实现值。

3. 03

   复制使用

   实测 |Lc| 与目标实时对照（偏差 ≤0.1），复制 oklch()/hex/rgb() 直接进 CSS。

对比度合成常见问题

关于 apcach 的三个高频问题。

为什么用 APCA 而不是 WCAG 比值？

APCA（Lc 0–108）按文字尺寸与字重分级判定可读性，对深色模式与中等对比度更准确，是 WCAG 3 的候选算法；合成器直接以 |Lc| 为目标，结果天然符合 APCA 语义。

目标对比度设多少合适？

经验参考：正文 ≥75、大标题 ≥60、UI 组件/图标 ≥45、装饰性元素 ≥30。超过 90 属于极限对比，多用于极小字或特殊展示。

「最大彩度」是什么意思？

同一色相与对比度下，彩度越高越鲜艳，但超出 sRGB 色域就无法显示。勾选后引擎二分搜索色域边缘，返回该条件下最饱和的可实现颜色。

合成之后

把合成色送进对比度工具复核 WCAG 比值，或用色阶生成器展开成 11 阶色阶。