设计师必知的WCAG色彩对比度指南

如果你的文字未达到WCAG AA对比度标准，全球约2.85亿视障人士将无法阅读。此外，在欧盟和美国，你面临的法律风险也越来越高。好消息是：规则其实很简单。

4.5:1规则

正文文字与其背景的对比度至少需达到4.5:1才能通过WCAG AA标准。大号文字（24px常规或18px加粗）的标准较低，为3:1。

要达到AAA级别：正文需7:1，大号文字需4.5:1。

对比度如何计算

WCAG采用相对亮度——通过特定公式将每种颜色转换为亮度值（0=黑色，1=白色），然后计算 (L1 + 0.05) / (L2 + 0.05)，其中L1为较亮的颜色。

你无需手动计算——使用我们的免费对比度检测工具，输入任意两种颜色即可查看对比度。

常见失败案例

• 浅灰色配白色——#999配#fff = 2.85（不达标）。#767676配#fff = 4.54（达标）。
• 白色配黄色——几乎总是不达标。黄色背景上应使用深色文字。
• 正文中的彩色链接——大多数蓝色链接在白色背景上达标，但在浅灰色背景上不达标。请测试实际周围背景。
• 看起来不错的品牌色——它们往往不达标。可添加米白色背景或加深文字颜色。

选择无障碍色彩组合

三种可靠模式：

1. 深色配浅色——#1f2937配#fff = 14:1（完美）。
2. 白色配深色——#fff配#1f2937 = 14:1（完美）。
3. 深色配强调色——#1f2937配#fbbf24 = 9:1（按钮完美）。

文字之外

WCAG 2.1还要求非文字元素（按钮、焦点环、表单边框）达到3:1。检测工具可同时处理这两类需求。

不影响小组件的壁纸

如果你是设计师，需要在时钟小组件和通知背后设置壁纸，请选择小组件区域对比度低于5:1的壁纸。我们的高斯模糊工具可以柔化任何壁纸的杂乱区域，提升小组件可读性。

试试我们的免费工具

这些指南大多配有可直接使用的工具——首次使用无需注册：

• 图片缩放工具——像素级缩小与放大。
• 转换为WebP——文件比JPG小30-50%。
• 背景移除工具——一键抠图，生成透明PNG。
• Favicon生成器——从单一源生成所有浏览器尺寸。
• 社交媒体尺寸调整工具——每个平台的精确尺寸。
• 批量处理工具——一次对最多200张图片应用任意工具。

浏览完整工具目录。