# 调色板 + WCAG 检查器

> 免费调色盘生成器，内建 WCAG AA/AAA 对比检查、最近 pass 建议色、CSS variables、Tailwind v4 导出和 PNG swatch。

- **Category:** 开发者
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [色盲测试](https://www.teafun.cyou/tools/colorblind/), [显示器刷新率](https://www.teafun.cyou/tools/monitor/), [平面图工具](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

本地检查对比度、AA/AAA 合规、生成 palette 变体，并导出 CSS 或 Tailwind v4 色彩 token。

## 如何使用 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× 倍。尽早执行比率计算——在标记定义阶段而不是组件构建阶段——用算术而不是意见来确定答案。

_SEO title: Color Palette + WCAG Checker – 免费无障碍配色工具 | TeaFun_

## FAQ

### 最近 pass 建议色是怎么计算的？

TeaFun 会尽量保留你原本前景色的 hue 和 saturation，再调整 lightness，直到正文至少达到 WCAG AA。

### Tailwind 导出是 v4 新格式吗？

是。导出内容会使用 `@theme` token 和 `oklch()` 值，你可以直接贴进 Tailwind v4 项目。

### 可以用于客户项目吗？

可以。工具完全 browser-only，你可以检查品牌色、导出 token，并生成 PNG swatch，而不必把数据交给第三方服务。