粘贴 Tailwind 配色、CSS theme 变量或 JSON 令牌，一次检测所有前景/背景组合的 WCAG AA 与 AAA 对比度。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
支持 Tailwind config 片段、嵌套 JSON 颜色和 --color-* CSS 变量。
在上方粘贴 Tailwind 调色板，即可生成对比度矩阵。
这个工具能做什么
用 Tailwind 调色板快速生成 WCAG 对比度矩阵。可以粘贴 `theme.extend.colors` 颜色对象、Tailwind v4 `@theme` 中的 `--color-*` 变量，或 JSON 设计令牌。工具会提取 hex 与 rgb 颜色， 把嵌套色阶标准化为 `brand-50`、`brand-500`、`brand` 这类 Tailwind 名称，并生成前景 × 背景矩阵，标出 AA、AAA、大字可用和 不达标状态。设计师可在交付前发现危险色阶，开发者可直接复制 CSV 结果或 Tailwind class 参考；全部计算在浏览器本地完成，不上传令牌。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 32 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Tailwind 调色板对比度矩阵 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
设计师在交付前检查品牌色阶
设计师拿到一套从 50 到 950 的 Tailwind 品牌色阶，需要判断哪些 shade 可以用于正文、标签、图标和界面底色。粘贴调色板后，把深色 shade 作为 前景、浅色 shade 作为背景筛选，交付给工程前就能看出哪些组合达不到 AA。
开发者在 PR 中审查 Tailwind v4 theme 变量
开发者收到一段 CSS-first Tailwind v4 的 `--color-*` 变量变更。把 diff 粘进工具后，复制 CSV 结果，把不达标的文字/背景组合直接贴到 code review， 让作者在无障碍 QA 发现之前先调整色阶。
常见踩坑
把 `brand-500` 当成万能文字色；很多高饱和中间 shade 在白底或深色底上都会不过。
不区分真实前景/背景场景，盲目把所有颜色两两相乘，导致矩阵噪声过大。
忘记 `DEFAULT` 对应的是 `text-brand` 和 `bg-brand`，不是 `text-brand-DEFAULT`。
隐私说明
调色板解析、WCAG 计算、矩阵渲染和导出生成都在浏览器本地完成。Tailwind 配置、设计令牌文件和复制出的矩阵不会上传到 Toolora。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。