中性色系 · WCAG AA 无障碍配色方案

4 个中性色系最佳方案，正文对比度均 ≥ 4.5:1，附一套可直接复制的 CSS 变量

中性色 · Paper Off-White

米白底近黑字，正文对比 15:1，最护眼。

对比 15.04:1 · 达 WCAG AA

背景#F5F2EC

文字#1C1E1A

强调#12554A

CSS 变量

:root{
  --bg:#F5F2EC;
  --ink:#1C1E1A;
  --accent:#12554A;
  --accent-ink:#FFFFFF;
}

中性色 · Dark Panel

近黑底米白字，暗色界面基准。

对比 13.51:1 · 达 WCAG AA

背景#1C1E1A

文字#EAE6DF

强调#C0C0C0

CSS 变量

:root{
  --bg:#1C1E1A;
  --ink:#EAE6DF;
  --accent:#C0C0C0;
  --accent-ink:#14181C;
}

中性色 · Graphite Card

石墨灰底白字，卡片 / 弹层层次分明。

对比 9.06:1 · 达 WCAG AA

背景#3B3F45

文字#F0EDE7

强调#B8B8B0

CSS 变量

:root{
  --bg:#3B3F45;
  --ink:#F0EDE7;
  --accent:#B8B8B0;
  --accent-ink:#14181C;
}

中性色 · Silver Divider

珍珠白底石墨字，表格与列表页清爽。

对比 8.51:1 · 达 WCAG AA

背景#EAE6DF

文字#3B3F45

强调#708090

CSS 变量

:root{
  --bg:#EAE6DF;
  --ink:#3B3F45;
  --accent:#708090;
  --accent-ink:#14181C;
}

为什么用 AA 方案

WCAG（Web 内容无障碍指南）把文字与背景的对比度分成三档：AA 要求正文 ≥ 4.5:1、大字 ≥ 3:1；AAA 要求正文 ≥ 7:1。低于 4.5:1 的文字，在阳光下或视力偏弱时很难读。这里每个方案都标了实测对比度，照着用就不会出现「看不清」的问题。

中性色（白 / 灰 / 黑）是配色的地基：它不抢戏，能让任何主色最舒服地发挥。UI 里背景、边框、正文几乎都是中性色。掌握米白到石墨灰这一条明度阶梯，页面就专业了一半。