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

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

青色 · Celadon Tea

浅青瓷底深青字，中式清爽风。

对比 9.22:1 · 达 WCAG AA

背景#EDF7F4

文字#0C4A46

强调#008080

CSS 变量

:root{
  --bg:#EDF7F4;
  --ink:#0C4A46;
  --accent:#008080;
  --accent-ink:#FFFFFF;
}

青色 · Deep Sea Data

深底亮青字，数据看板 / 夜间模式。

对比 11.62:1 · 达 WCAG AA

背景#013334

文字#C6F5F0

强调#40E0D0

CSS 变量

:root{
  --bg:#013334;
  --ink:#C6F5F0;
  --accent:#40E0D0;
  --accent-ink:#14181C;
}

青色 · Turquoise Button

青色按钮 + 深字，科技产品主色。

对比 6.01:1 · 达 WCAG AA

背景#00BCD4

文字#04323A

强调#014D4E

CSS 变量

:root{
  --bg:#00BCD4;
  --ink:#04323A;
  --accent:#014D4E;
  --accent-ink:#FFFFFF;
}

青色 · Duck Egg Breeze

低饱和青绿底，杂志与文艺风。

对比 6.70:1 · 达 WCAG AA

背景#C3D9CE

文字#1E4A40

强调#116D6E

CSS 变量

:root{
  --bg:#C3D9CE;
  --ink:#1E4A40;
  --accent:#116D6E;
  --accent-ink:#FFFFFF;
}

为什么用 AA 方案

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

青色是蓝与绿的过渡，清爽、科技、专业，常出现在科技产品、数据看板与医疗健康场景。深青（孔雀蓝 / 深青）显沉稳，浅青（碧蓝 / 鸭蛋青）显干净。