颜色对比度检查器
检查颜色对比度是否符合 WCAG 2.1 标准。即时验证文本和 UI 元素的 AA 和 AAA 级别。
什么是 WCAG 对比度？
WCAG 对比度衡量前景色和背景色之间的亮度差异。范围从 1:1（无对比）到 21:1（最大对比，黑底白字）。比率越高，视力障碍用户的可读性越好。
WCAG AA 和 AAA 的要求是什么？
WCAG AA 要求普通文本最低对比度为 4.5:1，大文本为 3:1。WCAG AAA 要求普通文本 7:1，大文本 4.5:1。AAA 是最高无障碍标准。
什么算作大文本？
大文本定义为 18pt（24px）或更大，或 14pt（18.66px）粗体或更大。大文本的对比度要求较低，因为在低对比度下更容易阅读。
为什么颜色对比度很重要？
适当的颜色对比度确保文本对视力障碍者（包括色盲和低视力）可读。它还改善了每个人在各种光照条件和不同设备上的可读性。
如何计算对比度比率？
对比度比率使用前景色和背景色的相对亮度值计算。公式为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较浅颜色，L2 是较深颜色。
UI 元素的最低对比度要求是什么？
WCAG 要求 UI 组件和图形对象的最低对比度为 3:1。这确保按钮、图标和其他界面元素可见且可用。
我可以使用任何颜色组合吗？
并非所有颜色组合都符合无障碍标准。使用此检查器验证您的颜色选择是否符合 WCAG 要求。设计时考虑美观性和无障碍性。
什么是相对亮度？
相对亮度是颜色的感知亮度，范围从 0（黑色）到 1（白色）。它使用 sRGB 色彩空间计算，并考虑了人眼对不同波长的敏感度。
我需要检查图片的对比度吗？
图片中的文本必须满足与常规文本相同的对比度要求。对于装饰性图片或有替代文本的图片，不适用对比度要求。
哪些工具有助于颜色对比？
使用浏览器开发者工具、设计软件插件或在线检查器（如本工具）。许多工具可以从截图中提取颜色并自动计算对比度比率。
如何使用颜色对比度检查器
在浏览器本地即时核对文字与界面配色是否符合 WCAG 2.1 的 AA、AAA 对比度门槛。填入两个颜色即可算出比值，数据不离开设备。
- 在 Foreground Color 输入框中键入或粘贴文字颜色，支持 HEX、RGB 等任意受支持的格式。
- 在 Background Color 输入框填入文字背后的底色，即可算出对比度比值。
- 查看得出的比值，以及正常字号与大字号对应的 AA、AAA 达标徽章。
- 微调任一颜色，直到比值达到正文 4.5:1 或大字号与 UI 组件 3:1 以上。
- 交换 Foreground Color 与 Background Color 的值，测试相反搭配，例如深色主题上的浅色文字。
长篇阅读建议冲 AAA（7:1），但 4.5:1（AA）才是大多数无障碍准则的底线。
相关工具
- 颜色选择器 使用浏览器吸管从屏幕任意位置取色，即时复制HEX、RGB、HSL颜色代码。免费在线取色工具。
- 配色方案生成器 使用免费在线生成器即时创建美丽和谐的配色方案。支持单色、类似色、互补色、三色、分裂互补和四色模式。通过HSL滑块微调颜色，锁定喜欢的颜色，导出为CSS变量、Tailwind配置、JSON或SVG格式。100%浏览器运行，数据永不离开您的设备。
- 色盲模拟器 免费在线色盲模拟器。检测设计在红色盲、绿色盲、蓝色盲等色觉缺陷下的效果。100%隐私保护，浏览器本地运行。
- GIF拆帧工具 从GIF动画中提取并下载单帧为PNG或精灵图。免费在线工具，支持预览和ZIP导出。
- GIF倒放 在线免费将GIF动画倒序播放。上传、预览并即时下载倒放的GIF文件。
- GIF变速工具 在线更改GIF动画速度。即时加速或减速GIF文件。
- 视频转GIF 在线将视频转换为动画GIF，直接在浏览器中调整质量、帧率和分辨率，无需上传文件。
- 表情包制作 免费在线表情包制作工具。给任意图片添加经典顶部/底部梗图文字，直接拖动排版，立即下载 PNG 或 JPEG 表情包。