颜色对比度检查器
颜色对比度检查器用于评估文本与背景颜色的对比度是否符合 WCAG (Web Content Accessibility Guidelines, 网页内容无障碍指南）标准，帮助设计师和开发者创建视觉可访问性更好的界面。
什么是颜色对比度
颜色对比度是指前景色（如文本）与背景色之间的明暗差异程度，用数值表示，范围从 1:1（无对比）到 21:1（最大对比，如黑白）。
良好的颜色对比度确保内容对所有用户可读，包括视力障碍者、色盲色弱者以及在强光或弱光环境下使用设备的用户。
WCAG 标准
WCAG 定义了两个级别的对比度标准：
AA 级标准（最低要求）
- 常规文本:对比度不低于 4.5:1
- 大文本:对比度不低于 3:1
- 图形组件:对比度不低于 3:1
AAA 级标准（增强要求）
- 常规文本:对比度不低于 7:1
- 大文本:对比度不低于 4.5:1
- 图形组件:对比度不低于 4.5:1
大文本定义:字号不小于 18pt（约 24px),或加粗且字号不小于 14pt（约 18.5px)。
功能特点
工具支持实时计算文本色和背景色的对比度，提供 AA 和 AAA 两个级别的合规性检查。可视化展示常规文本、大文本、图形组件的实际效果，直观判断可读性。
支持调整颜色亮度，通过滑块快速优化对比度，无需手动尝试多个颜色值。
使用方法
- 选择 WCAG 级别 (AA 或 AAA)
- 输入或选择文本颜色
- 输入或选择背景颜色
- 查看对比度数值和合规性结果
- 根据实际效果预览调整颜色
- 使用亮度滑块快速优化对比度
参数说明
WCAG 级别:选择 AA 级（常规要求）或 AAA 级（增强要求）。大多数网站和应用需满足 AA 级标准，AAA 级适用于更高无障碍要求的场景。
文本颜色:前景色，通常是文字、图标、按钮的颜色。支持手动输入十六进制颜色值或使用颜色选择器。
背景颜色:背景色，通常是页面、卡片、容器的底色。支持手动输入或使用颜色选择器。
亮度调节:通过滑块调整文本色或背景色的亮度（明度）,保持色相和饱和度不变，快速优化对比度。
计算结果说明
对比度数值
显示文本色与背景色的对比度比值，如 4.5:1、7.2:1 等。数值越大，对比度越高，可读性越好。
合规性检查
工具会根据选择的 WCAG 级别，分别检查常规文本、大文本、图形组件是否通过标准，以图标和颜色（绿色通过、红色未通过）直观显示结果。
实际效果预览
显示三个实际应用场景的预览：
- 常规文本:模拟正常字号的文字效果
- 大文本:模拟大字号文字效果
- 图形组件:模拟图标、按钮等图形元素效果
应用场景
网页设计
设计网站配色方案时，检查文本与背景的对比度，确保符合无障碍标准，提升用户体验。
移动应用开发
设计移动应用界面时，验证按钮、标签、提示文字等元素的可读性，适应不同光线环境。
品牌设计
制定品牌视觉规范时，确保品牌色与文字组合的对比度符合标准，在各类应用场景中保持可读性。
无障碍审查
进行无障碍审查时，快速检测界面中所有文字元素的对比度，发现并修复不合规的颜色组合。
演示文稿
设计 PPT、海报、宣传材料时，确保文字在背景上清晰可读。
使用建议
优先满足 AA 级标准
除非有特殊的无障碍要求，一般满足 AA 级标准即可。AAA 级标准要求更高，可能限制设计灵活性。
使用亮度调节快速优化
如果颜色对比度不足，使用亮度滑块调整文本色或背景色的明度，通常比手动尝试多个颜色值更高效。
注意实际效果
除了数值，还应查看实际效果预览，确保在真实场景中可读性良好。某些颜色组合虽然通过对比度标准，但视觉上可能仍不够清晰。
考虑色盲色弱
颜色对比度检查主要解决明暗对比问题，但不能完全解决色盲色弱用户的可读性问题。建议避免单纯依赖颜色传递信息，结合图标、文字标签等方式。
不同场景的选择
- 正文内容:建议满足 AAA 级常规文本标准 (7:1)
- 导航、按钮、链接:建议满足 AA 级常规文本标准 (4.5:1)
- 标题、大号文字:可使用 AA 级大文本标准 (3:1)
- 装饰性文字:无强制要求，但仍建议保持一定对比度
注意事项
WCAG 标准主要针对文本内容，纯装饰性元素（如背景图案）无强制对比度要求。
对比度计算基于相对亮度，与人眼感知的颜色差异基本一致，但在某些特殊颜色组合下可能存在偏差。
工具检查的是静态颜色对比度，实际应用中还需考虑动画、渐变、透明度等因素的影响。
满足对比度标准是无障碍设计的重要组成部分，但不是全部。完整的无障碍设计还包括键盘导航、屏幕阅读器支持、焦点管理等方面。
常见问题
为什么我的设计通过了对比度检查,但看起来仍不够清晰$1
对比度计算基于相对亮度，某些颜色组合（如红绿、蓝黄）虽然亮度对比足够，但色相差异不明显，视觉上可能不够清晰。建议结合实际效果预览调整。
大文本和常规文本的标准为什么不同$2
大文本由于字号较大，笔画更粗，即使对比度稍低也能保持可读性，因此标准相对宽松。
图形组件的对比度要求是什么$3
图形组件（如图标、按钮边框、图表元素）与相邻颜色的对比度需不低于 3:1 (AA 级）或 4.5:1 (AAA 级）。
可以只调整文本颜色,不改背景色吗$4
可以。工具支持单独调整文本色或背景色的亮度。根据实际设计需求，选择调整哪一方更合适。
有些网站使用灰色文字,这符合标准吗$5
浅灰色文字在白色背景上可能无法满足对比度标准。建议使用工具检查具体数值，如果不符合标准，应加深文字颜色或调整背景色。
对比度是不是越高越好$6
不一定。过高的对比度（如纯黑白）可能导致眼睛疲劳。建议在满足标准的前提下，选择视觉舒适的颜色组合。
