选择颜色前，请检查文本对比度

在调色板中看起来不错的绿色，用作小标签时可能难以阅读。在设计中广泛使用之前，请先检查文本颜色与其背景的搭配。

以下四种组合你可以在 色彩工作室 中复现。第三种使用的绿色与第二种完全相同；只是背景发生了变化。

背景变化可能让原本通过的结果变为不通过

样本 2 和 4 通过了普通文本的 WCAG AA 对比度阈值。样本 1 和 3 未通过。此处显示的数字为四舍五入后的结果；检查时使用完整计算值。

将白色改为米色导致样本 2 未通过。加深样本 4 中的绿色使其重新高于阈值。这套配色只是示例，你可以换成自己项目中的颜色。下载它们的 CSS 以在你的布局中试用。

同时检查文本的大小

WCAG 的文本对比度指南 规定，AA 级别下普通文本的最小对比度为 4.5:1。大文本的阈值较低，为 3:1。“大”指常规文本至少 24 CSS 像素，或粗体文本约 18.67 CSS 像素。

这一区别对于标题下方的小标签很重要。一对颜色可能通过标题的检查，但在标签上却不通过。请根据实际显示大小分别判断，包括社交媒体图片在信息流中缩小后的情况。

不要将未通过的值四舍五入为通过。4.499:1 的结果仍低于 4.5:1。

在工具中尝试这四对组合

1. 打开 色彩工作室 并选择 对比度。
2. 在 文本颜色 和 背景颜色 中输入第一对组合。
3. 检查 普通文本 AA，然后比较 大文本AA。
4. 对其他组合重复操作。对于样本 2 和 3，仅更改背景以了解为何两个值都很重要。
5. 将你选择的组合放入实际设计中，并以最终尺寸阅读。检查较小的标签和链接，而不仅仅是大的示例标题。

在手机上，预览和设置会依次显示。检查使用的值与桌面端相同。

纯色只是起点

检查器比较两种不透明的纯色。它不会检查照片或渐变上文本背后的每个像素，也不会考虑半透明叠加层。请检查文字下方最亮和最暗的区域，或给文字加上纯色底板，再检查这组配色。

如果你提供浅色和深色主题，请在两种主题下都尝试设计。在白色卡片上通过并不能说明同一文本在深色菜单上的表现。细字体可能比对比度所暗示的更难阅读，因此请在最低值之上留出一些余量，而不是追求最接近的通过结果。

我们检查了什么

2026年10月5日，我们使用与 色彩工作室 相同的对比度函数运行了所有四对组合。结果文件 记录了精确的对比度和 AA 判定。可下载的 CSS 和插图使用相同的颜色值。

这检查的是文本对比度，而非整个页面的可访问性。它不评估键盘操作、标签、阅读顺序或用户是否能理解你的内容。