颜色对比度检查器
按 WCAG 标准实时计算前景背景对比度，判定 AA/AAA 达标情况。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传前景色与背景色
对比度结果
真实排版示例
大标题（32px 粗体）示例文字
正文示例：这段文字用于检验当前配色在正文阅读时的可读性。The quick brown fox jumps over the lazy dog.
小字示例（12px）：用于说明、注释等次要信息。
智能调整建议
保持色相与饱和度不变，仅微调亮度使对比度达到 AA 普通文本 4.5:1。
配色收藏
暂无收藏。点击「收藏当前配色」把当前组合保存到本地（最多 50 条）。
工作原理
- 1把 sRGB 通道从 0~255 归一化到 0~1，再做 gamma 反变换：c ≤ 0.03928 时取 c / 12.92，否则取 ((c + 0.055) / 1.055) ^ 2.4。
- 2按 WCAG 相对亮度公式加权：L = 0.2126 × R + 0.7152 × G + 0.0722 × B。
- 3对比度比率 ratio = (Llight + 0.05) / (Ldark + 0.05)，取值区间为 1:1 ~ 21:1。
- 4用未舍入的精确比值逐档判定 AA / AAA / UI 是否达标，只有当显示值达标而精确值不达标时才额外提示。
- 5未达标时，保持色相与饱和度不变，在 HSL 亮度 [0,100] 区间二分搜索 20 次，得到满足目标阈值且亮度改动最小的建议色。
常见问题
AA 和 AAA 的对比度阈值分别是多少？
WCAG 2.1 规定：AA 级普通文本 ≥ 4.5:1、大文本 ≥ 3:1；AAA 级普通文本 ≥ 7:1、大文本 ≥ 4.5:1。大文本指 ≥ 18pt（24px）或 ≥ 14pt（18.66px）且加粗的文本。此外非文本内容（图标、边框等 UI 组件）建议 ≥ 3:1。
为什么显示 4.50:1 却判定为不通过？
工具显示比值时四舍五入到 2 位小数，但判定使用未舍入的精确值。若精确值是 4.499，显示为 4.50，严格来说仍未达到 AA 的 4.5:1。出现这种边界情况时工具会额外给出提示，避免误解。
带透明度的颜色怎么计算？
WCAG 对比度只适用于不透明的最终颜色。输入带 alpha 的颜色时（如 #00000080），工具会先把它与配对颜色（前景透明按背景合成，背景透明按白底合成）合成出一个不透明颜色再计算，并在页面上说明。渐变背景无法直接判定，请分别检查各个色标。
屏幕取色（EyeDropper）为什么看不到按钮？
EyeDropper API 目前仅在部分基于 Chromium 的浏览器（且需 HTTPS 或本地环境）中可用。不可用时按钮会自动隐藏，你仍然可以使用色板取色器或直接粘贴色值。所有取色都在本地完成，不会上传。
智能调整建议是怎么算出来的？
它保持原色的色相与饱和度不变，只在 HSL 亮度上做二分搜索（20 次迭代），分别尝试变暗与变亮方向，取「刚好满足目标阈值且亮度改动最小」的解；同时会给出调整前景色与调整背景色两套方案。采纳后可立即复算验证。
数据会上传吗？
不会。所有解析、计算与收藏都存在你的浏览器本地，页面不发起任何网络请求，断网也能正常使用。