AnyTools
🌓
颜色对比度计算器
根据 WCAG 2.1 标准计算任意前景色与背景色的对比度，实时预览 AA/AAA 结果并导出可访问配色。
颜色输入
前景色
背景色
预览
示例文本
预览标题无障碍界面将充满活力的品牌颜色与足够的对比度配对，以保持文案可读。
对比度结果
对比度比率
19.79:1
相对亮度
前景色0.003
背景色1.000
| 标准 | 要求 | 状态 | 备注 |
|---|---|---|---|
| AA – 普通文本 | 4.5:1 | 通过 | 正文 ≥ 4.5:1 |
| AAA – 普通文本 | 7.0:1 | 通过 | 高重要性文案 ≥ 7:1 |
| AA – 大文本 | 3.0:1 | 通过 | 文本 ≥ 18pt 常规或 14pt 粗体 ≥ 3:1 |
| AAA – 大文本 | 4.5:1 | 通过 | 大文本 ≥ 4.5:1 |
| UI 图形/图标 | 3.0:1 | 通过 | 基本图标和视觉状态 ≥ 3:1 |
设计指导
使用比率表作为护栏，迭代直到每个状态达到目标水平。
- 在照片上放置文本时添加透明度或叠加层以保持对比度。
- 将 AAA 保留用于关键任务文案；AA 是大多数仪表板的优秀默认值。
- 在设计系统中记录批准的颜色对，以便开发人员重用合规的调色板。
❓什么是颜色对比度测试
颜色对比度测试通过测量前景色和背景色亮度之间的差异来确保文本或图标保持清晰可读，这是 WCAG 和大多数品牌指南的关键要求。
✨功能特点
🎨
实时颜色选择
使用 Ant Design 颜色选择器调整前景色和背景色，或输入精确的 HEX 值。
📊
WCAG 矩阵
在单个表格中查看普通文本、大文本和 UI 图形的 AA/AAA 要求。
🧮
精确亮度
对比度比率遵循 WCAG 2.1，使用线性化 RGB 通道，并包含每种颜色的亮度读数。
👁️
预览块
在实时示例卡片中使用您选择的配色方案测试标题和段落。
📋使用指南
选择颜色
为前景色和背景色选择或粘贴 HEX 值。
查看比率
检查计算的对比度比率和 AA/AAA 表格，了解通过/失败情况。
调整文案
编辑示例文本以预览真实标签、按钮或营销文案。
📚技术介绍
🔢相对亮度
每个 RGB 通道在使用系数 0.2126、0.7152 和 0.0722 计算亮度之前，使用 WCAG 伽马曲线转换为线性值。
⚖️对比度比率
比率公式 (L1 + 0.05) / (L2 + 0.05) 比较较亮和较暗的颜色，确保跨设备的一致可读性。
📐阈值
AA 普通文本需要 ≥ 4.5:1，大文本 ≥ 3:1，AAA 普通需要 7:1，AAA 大文本 4.5:1，图形对象应满足 3:1。
❓
Frequently Asked Questions
❓
大文本是否使用不同的阈值？
是的。≥ 18px 常规或 14px 粗体的文本符合大文本标准，AA 只需要 3:1，AAA 只需要 4.5:1。
💬
如何测试渐变？
检查渐变中最亮和最暗的停止点。每个停止点对都应满足所需的比率。
🔍
图标是否算作文本？
实心图标和基本 UI 图形应相对于其背景至少满足 3:1 对比度。
💡How To & Tips
🧭
从品牌调色板开始
快速交换颜色以测试同一基础调色板的浅色和深色主题。
🪄
小步迭代
微调 HEX 值或使用颜色选择器滑块，查看小调整如何影响合规性。
📝
预览内容
将真实的 UI 文案粘贴到预览块中，以评估层次结构和重点。
🔗Related Documents
📖WCAG 2.1 Contrast (Success Criterion 1.4.3)-Official guidance on minimum contrast levels for text and images of text.
📝更新日志
📌v1.0.251117v1.0.0初始版本，包含 WCAG 表格、亮度读数和实时预览卡片。(2025年11月17日)
📦推荐组件
User Comments
Loading...