调色板 + WCAG 检查器
本地检查对比度、AA/AAA 合规、生成 palette 变体，并导出 CSS 或 Tailwind v4 色彩 token。
前景色
背景色
主色转换结果
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)生成出来的 palette
CSS 变量
:root {
}Tailwind v4 主题
@theme {
}你刚测试了调色板 + WCAG 检查器 — 试试 色盲测试 →
什么是 WCAG 色彩对比度检查器？
色彩调色盘加 WCAG 检查器计算两个 sRGB 色彩之间的相对亮度对比度，并将其对标网页内容无障碍指南（WCAG）。公式固定：将每个通道从 sRGB 线性化为线性光（L = R*0.2126 + G*0.7152 + B*0.0722，先解码 gamma），然后计算 (L_lighter + 0.05) / (L_darker + 0.05)。结果是对比度，范围从 1.0（完全相同的色彩）到 21.0（纯黑配纯白）。WCAG 2.1 设定了三个阈值：正文（AA）为 4.5:1、大文字 ≥18pt 或 14pt 粗体（AA）为 3:1，以及更严格的 AAA 等级为 7:1 / 4.5:1。WCAG 2.2（2023 年 10 月发布）新增了一项 3:1 规则，用于 UI 组件和焦点可见轮廓，这在 2.1 中不存在。除了评级外，该工具还从单一色彩种子在 OKLCH 空间中产生协调的色板——互补色、类似色、阴影、浅色——并将结果导出为 CSS 自定义属性或 Tailwind v4 @theme 标记。PNG 色卡随附以供设计交接。
如何使用 WCAG 色彩检查器
输入前景和背景色为 HEX 格式（#1A73E8 加上 #FFFFFF），对比度和通过/失败徽章会立即出现，显示 AA 正常（4.5:1）、AAA 正常（7:1）、AA 大型（3:1）和 AA UI（3:1，WCAG 2.2）。当色对失败时，建议工具沿着 OKLCH 亮度轴向前景色进行调整，使其变深或变浅，同时保留色调和彩度，让品牌色彩身份保持不变。按一下「使用建议色彩」以应用。典型的测试失败：白色文字配纯黄色 #ffff00（#ffffff 前景）——对比度仅为 1.07:1，远低于 3:1，尽管在视觉上看起来「高对比」。黑色配黄色为 19.55:1，深度通过。检查器下方，色板面板显示从您的输入产生的互补色和类似色变体。复制 CSS 变数、复制 Tailwind 4 主题标记，或下载 PNG 色卡。
为什么 WCAG 色彩对比度合规很重要
WCAG 对比度合规性在美国是 ADA 项下的强制法律规定，欧盟内 2025 年 6 月起生效的欧洲无障碍法 (EAA) 涵盖销往欧盟的产品和服务，公共部门采购则受 EN 301 549 约束。EAA 罚款根据司法管辖区最高可达 €30 000 至 €500 000。除了法律风险外，4.5:1 阈值约当视力为 20/40 的人舒适阅读正文所需的对比度——这不是边界性障碍，这是年逾 40 岁经历晶状体自然黄变的大多数读者。从一开始就设计符合规范的标记可避免通过每个组件执行品牌色彩热修复的改造成本。常见的陷阱是用眼睛判断对比度：品牌粉红色和浅绿松石色对设计师来说「看起来易读」（视力 20/20，在工作室照明下），但在日光灯办公室照明下却达不到标准的 2× 倍。尽早执行比率计算——在标记定义阶段而不是组件构建阶段——用算术而不是意见来确定答案。
常见问题
最近 pass 建议色是怎么计算的？
TeaFun 会尽量保留你原本前景色的 hue 和 saturation，再调整 lightness，直到正文至少达到 WCAG AA。
Tailwind 导出是 v4 新格式吗？
是。导出内容会使用 `@theme` token 和 `oklch()` 值，你可以直接贴进 Tailwind v4 项目。
可以用于客户项目吗？
可以。工具完全 browser-only，你可以检查品牌色、导出 token，并生成 PNG swatch，而不必把数据交给第三方服务。
把这个工具放进更大的流程里
这些集合会把常见的后续工具和指南整理成同一条工作路径。
浏览相同标签
跳转到其他拥有相同工作流、格式或用途的工具。