无障碍配色
按 WCAG 对比度约束生成配色方案：每组都给出背景、文字、强调色及其对比度与 AA/AAA 等级，可导出 CSS 变量或逐行文本。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
生成设置
每次生成都从浏览器加密随机数取色，结果随机但一定满足目标对比度。
配色方案
对比度按 WCAG 2.x 计算：sRGB 通道线性化后加权得相对亮度，比值 = (L亮 + 0.05) / (L暗 + 0.05)。强调色与背景至少保证 3:1（§1.4.11 UI 组件）。
点击「重新生成」开始生成配色。
这个工具能做什么
- 新项目要从零定一套配色：先按目标对比度（正文 4.5:1 或 7:1）生成候选方案，再挑喜欢的那组做设计。
- 已有的品牌色对比度不够时，用它反推出一组「背景 + 文字 + 强调色」都达标的搭配，比手工试色快得多。
- 需要同时给出浅色与深色两套主题时，把背景明暗切到「深浅混合」，一次拿到两种背景下的方案。
- 选好后直接复制 CSS 变量或纯文本清单，交给前端或写进设计规范文档。
示例
输入
生成组数 1，目标对比度 4.5:1，背景明暗「浅色」，随机源固定为 0（单测里的确定性输入）
输出
第 1 组：背景 #F0EAEA（HSL 0°, 18%, 93%），文字 #000000，对比度 17.66:1（AAA）；强调色 #862727，强调色上的文字 #FFFFFF（9.00:1，AAA）；强调色与背景 7.57:1。
页面里色相来自浏览器加密随机数，所以每次点「重新生成」结果都不同；这里给的是随机源固定时的确定性结果，单测用它做交叉验证。
常见问题
生成的颜色真的都达标吗？
是。每一组都会先算出背景，再取白或黑中对比度更高的文字色；如果不够，就把背景明度沿同一方向推到刚好达到目标值。强调色同样保证与其上的文字达到目标对比度，并与背景至少 3:1（WCAG 2.2 §1.4.11 UI 组件要求）。
为什么生成的文字色只有纯黑或纯白？
纯黑与纯白是明度两端，能覆盖最大的对比度范围，也最不容易出现偏色。想要带色相的文字，可以在「对比度检测」里以生成结果为起点，用修复建议微调明度。
目标设成 21:1 会怎样？
21:1 是理论极限，只有纯黑配纯白才能达到，所以工具会把背景推到 #FFFFFF、文字用 #000000。目标值越高，能生成的方案越少、颜色也越极端。
配色是随机生成的吗？会重复吗？
色相、饱和度、明度都来自 crypto.getRandomValues，所以每次结果不同，也不保证两次生成完全一样。想要固定结果可以多点几次「重新生成」，或把满意的方案复制下来存好。
导出的 CSS 变量能直接用吗？
可以。每组会输出 --uk-pair-<序号>-bg / -text / -accent / -accent-text 四个变量，放进 palette { } 选择器里改成自己想要的类名即可。
关键词：accessible palettewcag color generatorcontrast palettecolor scheme generatoraa aaa colors无障碍配色配色方案生成对比度达标WCAG 配色CSS 变量