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

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

蓝色 · Cerulean Sky

浅蓝底深蓝字，SaaS / 官网最稳的组合。

对比 9.76:1 · 达 WCAG AA

背景#EEF3FC

文字#123B7A

强调#2A6FDB

CSS 变量

:root{
  --bg:#EEF3FC;
  --ink:#123B7A;
  --accent:#2A6FDB;
  --accent-ink:#FFFFFF;
}

蓝色 · Navy Night

藏青底浅蓝字，金融 / 政务夜间模式。

对比 12.82:1 · 达 WCAG AA

背景#14213D

文字#DCE7FA

强调#89CFF0

CSS 变量

:root{
  --bg:#14213D;
  --ink:#DCE7FA;
  --accent:#89CFF0;
  --accent-ink:#14181C;
}

蓝色 · Sapphire Button

蓝底白字按钮，点击率最高的通用方案。

对比 7.15:1 · 达 WCAG AA

背景#0F52BA

文字#FFFFFF

强调#FFD700

CSS 变量

:root{
  --bg:#0F52BA;
  --ink:#FFFFFF;
  --accent:#FFD700;
  --accent-ink:#14181C;
}

蓝色 · Klein Statement

克莱因蓝封面，白字对比强、有格调。

对比 10.69:1 · 达 WCAG AA

背景#002FA7

文字#FFFFFF

强调#87CEEB

CSS 变量

:root{
  --bg:#002FA7;
  --ink:#FFFFFF;
  --accent:#87CEEB;
  --accent-ink:#14181C;
}

为什么用 AA 方案

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

蓝色是信任与专业的代名词，科技、金融、政务、企业官网用得最多，也是最不容易出错的颜色。深蓝（藏青 / 靛蓝）稳重，亮蓝（天蓝 / 蔚蓝）年轻，克莱因蓝高级。