Developer ToolsUI颜色无障碍检查器
检查UI颜色组合是否符合WCAG无障碍标准。实时验证AA和AAA合规性的对比度比率。
颜色组合检查器
预览
普通文本 (14px)
大文本 (18px+)
WCAG指南参考
WCAG AA标准
- • 普通文本：最低4.5:1对比度比率
- • 大文本（18px+或14px+粗体）：最低3:1
- • 大多数法律合规所必需
- • 涵盖大多数无障碍需求
WCAG AAA增强
- • 普通文本：最低7:1对比度比率
- • 大文本：最低4.5:1
- • 最高无障碍标准
- • 建议用于关键界面
关于此工具
工作原理
- 计算前景和背景颜色之间的对比度比率
- 评估符合WCAG 2.1无障碍指南
- 测试普通和大文本尺寸要求
- 提供颜色组合的实时视觉预览
- 支持3位和6位十六进制颜色代码
常见使用场景
- UI/UX设计师确保可访问的配色方案
- 开发人员验证界面颜色选择
- 无障碍审计员检查合规标准
- 品牌设计师创建包容性调色板
- 网页设计师满足法律无障碍要求
常见问题解答
什么是颜色无障碍，为什么它很重要？
颜色无障碍确保颜色组合为视力障碍者（包括色盲和低视力）提供足够的对比度。这对于使网站和应用程序对所有人可用至关重要，通常也是法律要求。
什么是WCAG AA和AAA标准？
WCAG AA要求普通文本4.5:1的对比度比率和大文本3:1的比率。AAA更严格，普通文本需要7:1，大文本需要4.5:1。AA是大多数合规要求的法律标准。
如何知道我的颜色组合是否符合无障碍标准？
在工具中输入前景（文本）和背景颜色。它将计算对比度比率并显示是否符合普通文本和大文本的AA或AAA标准。
无障碍指南中的"大文本"是什么？
大文本定义为18pt（24px）或更大的常规文本，或14pt（18.67px）或更大的粗体文本。这些尺寸具有较低的对比度要求（AA为3:1，AAA为4.5:1）。
我可以同时测试多个颜色组合吗？
可以！使用"添加到比较列表"按钮保存颜色组合并并排比较多对颜色。这在设计配色方案时非常有用。
该工具支持哪些颜色格式？
该工具支持6位（#000000）和3位（#000）格式的十六进制颜色代码。您可以手动输入颜色或使用颜色选择器进行视觉选择。
为什么看起来不同的颜色具有相同的对比度比率？
对比度比率基于亮度（明亮度）而非色调（颜色）计算。具有相同亮度的颜色将具有相同的对比度比率。
如果我的品牌颜色不符合无障碍标准，该怎么办？
您有几个选择：调整一种颜色的亮度/暗度，为文本添加边框或轮廓，仅将颜色用于大文本，或将其保留用于不需要符合对比度要求的装饰元素。
无障碍标准是否适用于所有网站元素？
对比度要求适用于文本、文本图像以及按钮和表单字段等UI组件。它们不适用于装饰元素、徽标或非活动/禁用组件。
对比度计算有多准确？
该工具使用WCAG 2.1官方公式计算相对亮度和对比度比率。计算在数学上是精确的。
我可以将此工具用于移动应用程序设计吗？
当然！WCAG指南同样适用于移动应用程序和网站。许多移动平台（iOS、Android）在其无障碍指南中引用WCAG标准。
如果我需要测试非十六进制代码的颜色怎么办？
目前，该工具支持十六进制颜色代码。对于RGB、HSL或其他格式，您可以先使用我们的颜色选择器转换工具进行格式转换。