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

无障碍配色建议 - 高对比度安全色组合

前端设计 可访问性 对比度 无障碍 配色
177
0
0
0

无障碍配色建议

基于 WCAG 2.1 标准，实时检测颜色对比度，确保你的设计对所有人可见、可读、可访问。

前景色（文字颜色）
背景色
16.75 对比度比率 AAA 级
✅ AAA 正常文本 (≥7:1)
✅ AA 正常文本 (≥4.5:1)
✅ AAA 大文本 (≥4.5:1)
✅ AA 大文本 (≥3:1)
实时预览
这是大文本预览 — The quick brown fox
这是正常正文文本预览。Lorem ipsum dolor sit amet, consectetur adipiscing elit. 这段文字模拟了网页正文的阅读效果。
预设高对比度安全色组合 — 点击即可应用
常见问题与知识点

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是W3C制定的国际标准，确保网页内容对残障人士可访问。其中对比度标准是核心要求之一，它规定了文字与背景之间的最小亮度对比度，以确保低视力用户、色盲用户以及在强光环境下使用设备的用户都能清晰阅读。满足WCAG对比度标准不仅是道德责任，也是许多国家法律（如美国ADA、欧盟EAA）的合规要求。对比度不足会导致用户体验下降，甚至面临法律风险。

AA级是行业公认的最低合规标准：正常文本对比度需≥4.5:1，大文本（≥18px或≥14px粗体）需≥3:1。大多数网站应至少达到AA级。AAA级是最高标准：正常文本≥7:1，大文本≥4.5:1。AAA级适用于需要服务特殊人群的网站（如医疗、政府、教育平台）。对于一般商业网站，建议以AA级为底线，关键内容区域争取达到AAA级。需要注意的是，纯黑(#000000)配纯白(#FFFFFF)的对比度为21:1，远超AAA标准。

对比度计算基于WCAG定义的相对亮度（Relative Luminance）公式。首先将sRGB颜色值线性化，然后计算亮度：L = 0.2126×R + 0.7152×G + 0.0722×B（人眼对绿色最敏感）。得到两个颜色的亮度后，对比度 = (较亮亮度+0.05) / (较暗亮度+0.05)。结果范围为1:1（完全相同）到21:1（纯黑对纯白）。本工具使用JavaScript在浏览器中实时完成这些计算，无需上传数据。

约8%的男性和0.5%的女性存在色觉障碍。为色盲用户设计时：①不要仅依赖颜色传达信息（如用红绿表示状态，应同时使用图标或文字）；②确保高对比度（色盲用户更依赖亮度差异）；③避免问题组合：红-绿、蓝-紫、绿-棕这些组合在色盲眼中难以区分；④使用图案或纹理辅助（如图表使用不同填充样式）；⑤优先选择蓝-橙、蓝-黄等色盲友好的对比色。本工具的预设方案已考虑了色盲友好性，推荐使用蓝色系、深灰系等通用性强的配色。

是的，间接但显著。Google的Core Web Vitals和页面体验指标中包含了可访问性因素。低对比度会导致：①用户停留时间缩短（难以阅读即离开），增加跳出率；②移动端用户体验下降（强光环境下低对比度文本几乎不可见），影响移动优先索引；③Google Lighthouse审计中会标记对比度问题，影响整体质量评分；④无障碍合规性越来越被搜索引擎重视，符合WCAG标准的网站可能获得更好的排名信号。简而言之，良好的可访问性=更好的用户体验=更好的SEO表现。

根据WCAG定义，"大文本"指≥18px（约24px视觉大小）的正常字重文本，或≥14px的粗体文本。大文本的对比度要求更宽松（AA级3:1，AAA级4.5:1），因为较大的字形本身就更容易辨认。正常文本（小于上述阈值）要求更高（AA级4.5:1，AAA级7:1）。这意味着：如果你使用较大的标题字体，可以使用稍低的对比度；但正文内容必须保持较高的对比度。本工具的预览区同时展示了大文本和正常文本的效果，帮助你全面评估。

高对比度不意味着只能使用纯黑纯白。以下是一些既美观又合规的配色思路：①深蓝(#1a3a5c)+暖白(#FFFAF5)—专业且温暖；②深灰(#2d3748)+浅灰(#f7fafc)—现代极简；③深绿(#1b5e20)+奶油(#FFF8E1)—自然舒适；④深紫(#4a148c)+浅紫(#f3e5f5)—优雅高级；⑤炭灰(#424242)+象牙白(#FFFFF0)—经典阅读体验。关键原则：保持前景色足够深（或足够浅），背景色与其拉开至少4.5:1的亮度差距。本工具提供了多组预设方案供你参考和直接使用。
🔧 相关工具