绿色系 · WCAG AA 无障碍配色方案

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

绿色 · Forest Mist

浅绿底深绿字，环保 / 健康类页面首选。

对比 9.20:1 · 达 WCAG AA

背景#EEF6EF

文字#1E4A2C

强调#2E8B57

CSS 变量

:root{
  --bg:#EEF6EF;
  --ink:#1E4A2C;
  --accent:#2E8B57;
  --accent-ink:#14181C;
}

绿色 · Pine Nav

深绿导航 + 浅绿高亮，后台系统稳重大方。

对比 8.06:1 · 达 WCAG AA

背景#12554A

文字#EAFBEF

强调#98FF98

CSS 变量

:root{
  --bg:#12554A;
  --ink:#EAFBEF;
  --accent:#98FF98;
  --accent-ink:#14181C;
}

绿色 · Mint Fresh

薄荷底深绿字，年轻 / 清新风。

对比 8.43:1 · 达 WCAG AA

背景#98FF98

文字#134A20

强调#0E7A3C

CSS 变量

:root{
  --bg:#98FF98;
  --ink:#134A20;
  --accent:#0E7A3C;
  --accent-ink:#FFFFFF;
}

绿色 · Matcha Box

抹茶奶绿底，日式 / 轻食风好用。

对比 7.29:1 · 达 WCAG AA

背景#F2F5E3

文字#4A5510

强调#99B92E

CSS 变量

:root{
  --bg:#F2F5E3;
  --ink:#4A5510;
  --accent:#99B92E;
  --accent-ink:#14181C;
}

为什么用 AA 方案

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

绿色代表自然、健康、安全与「通过」，是金融涨势与环保主题的标配。深浅跨度大：深松柏绿沉稳权威，浅薄荷 / 抹茶清新年轻。做后台系统建议深绿做导航，浅绿做状态色。