灰字白底、品牌色按钮白字——这些「看得见但看不清」的设计，对色觉障碍和低视力用户是硬门槛，对所有人都是体验损耗。本文讲清 WCAG 对比度的达标线、实测流程、不达标时的四种修改思路，以及最容易踩的坑——全程可用免费在线检查器完成。
为什么对比度是无障碍的第一关
约 4.5% 的人口存在色觉障碍，还有大量低视力、老花用户以及强光下用手机的现实场景——对比度不足的界面对他们而言不是「不好看」，而是不可读。WCAG（Web 内容无障碍指南）把对比度作为可感知性的核心指标，也是所有无障碍改造里投入产出比最高的一项：不用改结构、不用写代码，往往调几个色值就完成大半。
对比度用「比值」衡量，范围 1:1（完全相同）到 21:1（纯黑对纯白）。它是两个颜色的相对亮度之比，与色相无关——所以浅绿配白底可能达标，深绿配白底可能不达标，不能凭「感觉够深」判断，必须实测。
达标线速查表
WCAG 2.1 按文字大小和严格程度给出四条线，外加一条 UI 组件线：
| 内容类型 | AA（基本线） | AAA（增强级） |
|---|
| 正文文字（< 24px） | 4.5 : 1 | 7 : 1 |
| 大字号（≥ 24px，或 ≥ 18.66px 粗体） | 3 : 1 | 4.5 : 1 |
| UI 组件与图形（按钮边框、输入框、图标） | 3 : 1 | — |
三条经验法则：
- 正文一律按 4.5:1 卡：这是使用频率最高、最容易踩线的一条；
- 大字号的优惠别滥用：只有真的 ≥ 24px（或 ≥ 18.66px 粗体）才算大字号，13px 的「次要说明文字」不享受优惠；
- UI 组件 3:1 最常被漏检：输入框边框太浅、按钮和背景糊在一起，都属于这一条。
实测流程：四步完成检查
用本站 WCAG 对比度检查器，全程浏览器本地完成：
- 取色：从设计稿取前景色（文字）与背景色，输入 HEX 或用拾色器；
- 看比值与徽标：工具实时显示对比度比值，AA / AAA 各档达标与否用红绿徽标标出；
- 核对预览：预览区展示正文、大字号、按钮三种真实观感，比值合格但视觉难受的组合也能一眼看出；
- 遍历组合：把页面里每一组「文字 + 背景」都过一遍——正文、链接、占位符、按钮、页脚，包括深色模式的那一套。
不达标时的四种修改思路
- 调前景：保持色相不变，把文字提亮或压暗——本站检查器的一键自动调整就是这么做的，取改动更小的方向刚好到 4.5:1；
- 调背景：文字色是品牌色不能动时，把背景调浅一档（或暗色模式下调深一档），往往一步到位；
- 加大小与字重：实在调不动颜色，把 16px 升到 24px 或加粗，适用 3:1 的大字号线——但要克制，别为了达标把全文变大；
- 加底衬：图片上的文字给一个半透明深色底衬，比反复调色可靠得多。
配色定稿前就把这套流程跑完，比上线后返工便宜得多。选色本身的方法论见 配色原理指南，深色模式的专项策略见 暗色图标设计指南。
五个最常见的不达标案例
- 灰字白底：「次要说明」用 #999 配白底只有 2.8:1——最经典的踩坑，次要信息也要 4.5:1；
- 品牌色按钮 + 白字：很多品牌主色（浅蓝、橙、黄绿）配白字在 2:1–3:1 之间，看起来「挺清楚」但不达标，要么压深按钮色，要么改深色文字；
- 浅灰占位符：输入框 placeholder 用 #CCC——占位符承担信息功能，同样要 4.5:1，或改用浮动标签；
- 暗色模式照搬亮色色值：亮色下的 #333 正文搬到暗底上糊成一片，深浅两套要分别验证；
- 图片上的文字没查背景：照片背景明暗不定，取最深与最浅两处分别算，任何一处不达标就算失败。
常见问题
Q：对比度是怎么计算出来的？
A：按 WCAG 2.1 标准：先把 RGB 各通道做伽马展开得到相对亮度 L（L = 0.2126×R + 0.7152×G + 0.0722×B），对比度 =（较亮色的 L + 0.05）/（较暗色的 L + 0.05），取值范围 1 到 21。纯黑对纯白正好是 21:1。人眼对不同波长的光敏感度不同，所以绿色通道权重最高，这也是为什么同亮度值的绿色和蓝色看起来明暗不同。
Q：4.5:1 是硬性法律要求吗？
A：取决于地区与场景：美国的 ADA 判例、欧盟的 EN 301 549、中国的信息无障碍标准都引用 WCAG AA 作为基准，政府与公共服务网站普遍强制；商业网站虽非普遍强制，但无障碍诉讼逐年增多，且搜索引擎将可用性作为排名参考。以 AA 为底线、AAA 为目标是稳妥做法。
Q：Logo 和装饰性元素需要达到对比度标准吗？
A：不需要。WCAG 明确豁免三类：纯装饰元素、品牌 Logo 与品牌名称、对所有用户都不可见的禁用控件。但表单占位符文字、输入框边框、图标按钮这类「承担信息功能」的元素不属于装饰，仍需满足 3:1 或 4.5:1。
Q：深色模式需要单独验证对比度吗？
A：需要。亮色模式下达标的色值组合，在深色模式下通常会失效：同一品牌色在暗底上观感更暗更闷，白字黑底的新组合也未必达标。深浅两套主题的每一组「文字 + 背景」组合都要分别验证一遍，别只测亮色模式。
Q：图片上的文字怎么算对比度？
A：同样按 WCAG 标准，图片内嵌文字与它背后的有效背景之间也要达标，而图片背景往往不是纯色——这是最容易漏检的地方。做法：取文字周围背景的最深与最浅区域分别计算，任何一组不达标就算失败。更稳妥的方案是给文字加半透明底衬，或干脆用真实 HTML 文字替代图片文字。
Q：除了对比度，网页无障碍还要注意什么？
A：WCAG 还有三大类：可操作性（键盘可导航、焦点可见）、可理解性（表单错误提示明确、页面语言声明）、可感知性（图片 alt 描述、内容可缩放 200%）。对比度是投入产出比最高的第一步，但不是全部；做完对比度后建议用键盘 Tab 键走一遍页面，看焦点是否可见、顺序是否合理。
免费在线检查 WCAG 对比度
实时比值 · 五档达标判定 · 一键自动调整 · 纯浏览器本地处理
打开对比度检查器 →
Why Contrast Is the First Gate of Accessibility
About 4.5% of people have some form of color-vision deficiency, plus huge numbers of low-vision and presbyopic users — and anyone using a phone in bright sunlight. Low contrast isn't "ugly" for them; it's unreadable. WCAG treats contrast as a core perceivability requirement, and it's the highest-ROI accessibility fix of all: no structural changes, no code — often just a few adjusted color values.
Contrast is measured as a ratio from 1:1 (identical) to 21:1 (pure black on pure white). It is the ratio of relative luminance between two colors and has nothing to do with hue — light green on white may pass while dark green on white fails, so "it looks dark enough" is never a valid judgment. Test it.
Threshold Cheat Sheet
WCAG 2.1 defines four text thresholds plus one for UI components:
| Content type | AA (baseline) | AAA (enhanced) |
|---|
| Body text (< 24px) | 4.5 : 1 | 7 : 1 |
| Large text (≥ 24px, or ≥ 18.66px bold) | 3 : 1 | 4.5 : 1 |
| UI components & graphics (borders, inputs, icons) | 3 : 1 | — |
Three rules of thumb:
- Hold body text to 4.5:1: the most common threshold and the easiest to barely miss;
- Don't abuse the large-text discount: only ≥ 24px (or ≥ 18.66px bold) counts — a 13px "secondary note" gets no discount;
- UI components at 3:1 are the most-missed check: faint input borders and buttons blending into the background live here.
Testing Workflow: Four Steps
Use this site's WCAG Contrast Checker — everything runs in your browser:
- Pick colors: take the foreground (text) and background from your design; enter HEX or use the pickers;
- Read the ratio and badges: the tool shows the live ratio with red/green badges for every AA / AAA threshold;
- Check the preview: the preview renders body text, a large heading, and a button — ratios that pass but feel wrong are obvious at a glance;
- Sweep every combination: test each text-on-background pair in your page — body, links, placeholders, buttons, footer — including the dark-mode set.
Four Ways to Fix a Failure
- Adjust the foreground: keep the hue, brighten or darken the text — the checker's one-click auto-fix does exactly this, taking the smaller change to just reach 4.5:1;
- Adjust the background: when the text color is untouchable brand color, shift the background a step lighter (or darker in dark mode) — often a one-step fix;
- Go bigger and bolder: if colors can't move, bump 16px to 24px or add bold to qualify for the 3:1 large-text threshold — use sparingly;
- Add a scrim: for text on images, a semi-transparent dark backing beats endless color tuning.
Run this workflow before finalizing a palette — far cheaper than rework after launch. For color selection methodology see the Color Theory Guide; for dark-mode strategy see the Dark Mode Icon Design Guide.
Five Most Common Failures
- Gray text on white: "secondary notes" in #999 on white is only 2.8:1 — the classic miss; secondary information still needs 4.5:1;
- Brand-color button with white text: many brand hues (light blue, orange, yellow-green) with white land between 2:1 and 3:1 — it "looks fine" but fails; darken the button or switch to dark text;
- Light-gray placeholders: #CCC placeholders in inputs — placeholders carry information and need 4.5:1 too, or switch to floating labels;
- Reusing light-mode values in dark mode: #333 body text turns to mud on dark surfaces; verify both themes separately;
- Text on images without checking the backdrop: photo backgrounds vary — compute against the darkest and lightest regions; any failure counts.
FAQ
Q: How is the contrast ratio calculated?
A: Per WCAG 2.1: each RGB channel is gamma-expanded into relative luminance L (L = 0.2126×R + 0.7152×G + 0.0722×B), then ratio = (lighter L + 0.05) / (darker L + 0.05), ranging 1 to 21. Pure black on pure white is exactly 21:1. Human eyes are most sensitive to green wavelengths — the green channel carries the most weight, which is why equal-value green and blue look different in brightness.
Q: Is 4.5:1 a legal requirement?
A: It depends on region and context: US ADA case law, EU EN 301 549, and China's accessibility standards all reference WCAG AA; government and public-service sites are broadly mandated. Commercial sites aren't universally required, yet accessibility lawsuits keep growing and search engines weigh usability. Treat AA as the floor and AAA as the goal.
Q: Do logos and decorative elements need to pass?
A: No. WCAG exempts pure decoration, brand logos and names, and disabled controls invisible to all users. But form placeholder text, input borders, and icon buttons carry information and still need 3:1 or 4.5:1.
Q: Does dark mode need separate contrast testing?
A: Yes. Pairs that pass in light mode usually fail in dark mode: the same brand color reads darker and duller on dark surfaces, and new white-on-black combinations aren't automatically compliant. Verify every text/background pair in both themes.
Q: How does contrast work for text on images?
A: Same rules — text embedded in images must pass against its effective backdrop, which is rarely a solid color. That's the most-missed case. Compute against both the darkest and lightest regions behind the text; any failure counts. Safer: add a semi-transparent scrim, or replace image text with real HTML text.
Q: Beyond contrast, what else does web accessibility involve?
A: WCAG adds operable (keyboard navigable, visible focus), understandable (clear form errors, language declaration), and robust/perceivable basics (alt text, 200% zoom). Contrast is the highest-ROI first step, not the whole job; afterwards, Tab through your page and check that focus is visible and the order makes sense.
Check WCAG Contrast — Free Online
Live ratios · Five thresholds · One-click auto-fix · Runs in your browser
Open Contrast Checker →