无需登录 数据私有 本地保存

WCAG对比度调节器 - 微调颜色达标

9
0
0
0
颜色设置
#
RGB: 26, 54, 93 · HSL: 195°, 56%, 23%
#
RGB: 255, 255, 255 · HSL: 0°, 0%, 100%
快速预设：
微调颜色
195°
56%
23%
实时预览
这是大标题文本示例
这是正文段落示例。良好的对比度确保所有用户都能轻松阅读内容，包括视力障碍者。
按钮示例 标签示例
WCAG 评分
对比度： 10.95 : 1 ✓ 优秀
3:1 4.5:1 7:1 12:1
AA 普通文本 AA 大文本 AAA 普通文本 AAA 大文本 UI 组件
大文本定义：≥18px 常规字重 或 ≥14px 粗体。UI组件指图标、边框等图形元素。
常见问题与知识点

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）由W3C制定，要求文本与背景之间具有足够的对比度。AA级要求普通文本对比度至少4.5:1，大文本至少3:1；AAA级要求普通文本至少7:1，大文本至少4.5:1。UI组件和图形元素至少需要3:1的对比度。

对比度计算基于相对亮度。首先对RGB每个通道进行gamma校正，然后计算相对亮度 L = 0.2126×R + 0.7152×G + 0.0722×B。对比度 = (L1 + 0.05) / (L2 + 0.05)，其中L1为较亮颜色的相对亮度，L2为较暗颜色的相对亮度。结果范围为1:1到21:1。

选择要调整的颜色（前景色或背景色），使用亮度(L)滑块进行微调。亮度是对对比度影响最大的因素。您也可以使用快捷按钮快速调整±5%或±10%亮度。点击"自动修正"按钮，工具会自动计算并调整亮度以达到您选择的目标标准（AA或AAA）。

大文本（≥18px或≥14px粗体）由于字号更大、笔画更粗，本身就更容易辨认，因此WCAG对其对比度要求相对宽松（AA级3:1，AAA级4.5:1）。而普通文本字号较小，需要更高的对比度（AA级4.5:1，AAA级7:1）来确保可读性，尤其是对于视力障碍用户。

WCAG对比度公式中的相对亮度与HSL色彩空间中的亮度(L)高度相关。改变L值会直接改变颜色的明暗程度，从而显著影响对比度。色相(H)和饱和度(S)对相对亮度的影响相对较小。因此，微调对比度时优先调整亮度是最有效的方法。

根据WCAG 2.1，UI组件（如图标、输入框边框、按钮轮廓等）和图形元素（如图表、信息图）需要至少3:1的对比度。这确保用户能够清晰地识别交互元素。对于按钮内部文字与按钮背景的对比度，仍适用文本对比度标准（4.5:1或3:1）。

虽然WCAG对比度标准主要针对亮度对比，但色盲友好性也需要关注。约8%的男性和0.5%的女性存在某种形式的色觉缺陷。建议不要仅依赖颜色来传达信息，同时使用图标、纹理或文字标签辅助。此外，确保足够的亮度对比度也能帮助色盲用户区分内容。

本工具适用于网页设计、UI/UX设计、品牌配色、移动端开发等场景。设计师可以用它验证配色方案是否符合无障碍标准；开发者可以在编写CSS时微调颜色值；内容创作者可以检查文本可读性。无论是设计按钮、表单、导航栏还是正文排版，都可以用此工具确保颜色对比度达标。
🔧 相关工具