调色板 + 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 {
--color-primary: #1A73E8;
--color-background: #FFFFFF;
--color-accessible: #1A73E8;
--color-complementary: #E88F1A;
--color-analogous-left: #1ADAE8;
--color-analogous-right: #281AE8;
--color-shade: #0F4A97;
--color-tint: #6DA6F0;
}Tailwind v4 主题
@theme {
--color-primary: oklch(0.574 0.195 257.9);
--color-background: oklch(1.000 0.000 89.9);
--color-accessible: oklch(0.574 0.195 257.9);
--color-complementary: oklch(0.727 0.156 65.4);
--color-analogous-left: oklch(0.811 0.135 203.2);
--color-analogous-right: oklch(0.443 0.276 269.2);
--color-shade: oklch(0.421 0.139 257.6);
--color-tint: oklch(0.717 0.124 255.4);
}什么是 WCAG 色彩对比度检查器？
色彩调色板 + WCAG 检查器根据 Web 内容无障碍指南（WCAG 2.1）的对比度要求评估前景-背景色彩组合。它报告确切的对比度比率、AA 和 AAA 合规在正文和大型文字大小下的通过/不通过状态，并在你的色彩组合不合格时建议最接近的通过颜色。除了对比度检查，工具还从你的主色生成完整的色彩调色板——互补色、类似色、明度和色调变体——并以 CSS 自定义属性或 Tailwind v4 @theme Token（使用 oklch() 值）导出。你也可以下载 PNG 色票表用于设计交接。所有计算在本地运行，不涉及第三方服务。
如何使用 WCAG 色彩检查器
输入前景和背景颜色的 HEX 值（例如 #1A73E8 配 #FFFFFF）。检查器立即显示对比度比率和 WCAG AA 正文（4.5:1）、AAA 正文（7:1）和 AA 大型文字（3:1）的通过/不通过徽章。如果组合不合格，工具建议保留原始色相和饱和度的最接近通过前景色。点击「使用建议颜色」应用。在检查器下方，浏览生成的调色板变体、复制 CSS 变量或 Tailwind v4 主题 Token，并下载 PNG 色票以便与设计师分享。
为什么 WCAG 色彩对比度合规很重要
WCAG 2.1 对比度要求不是可选的指导方针——在许多司法管辖区，它们是 ADA（美国）、EAA（欧盟）和 EN 301 549（欧洲）下的法律要求。未能达到 AA 对比度比率意味着部分用户在物理上无法阅读你的文字，且使你的组织面临无障碍诉讼风险。从一开始就在设计系统中纳入 WCAG 合规能避免昂贵的事后修改。在设计 Token 阶段——组件构建之前——检查对比度，比审计已上线产品便宜得多。直接以 CSS 变量或 Tailwind v4 @theme 值导出合规 Token 能弥合设计意图和生产代码之间的差距。
常见问题
最近 pass 建议色是怎么计算的？
TeaFun 会尽量保留你原本前景色的 hue 和 saturation，再调整 lightness，直到正文至少达到 WCAG AA。
Tailwind 导出是 v4 新格式吗？
是。导出内容会使用 `@theme` token 和 `oklch()` 值，你可以直接贴进 Tailwind v4 项目。
可以用于客户项目吗？
可以。工具完全 browser-only，你可以检查品牌色、导出 token，并生成 PNG swatch，而不必把数据交给第三方服务。
浏览相同标签
跳转到其他拥有相同工作流、格式或用途的工具。