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

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

黄色 · Sticky Note

黄底配深褐字，做高亮与提示最清晰。

对比 9.53:1 · 达 WCAG AA

背景#FFD700

文字#3A2E00

强调#7A6300

CSS 变量

:root{
  --bg:#FFD700;
  --ink:#3A2E00;
  --accent:#7A6300;
  --accent-ink:#FFFFFF;
}

黄色 · Champagne Gift

香槟金浅底 + 棕金深字，礼盒 / 会员卡质感。

对比 5.99:1 · 达 WCAG AA

背景#F7E7CE

文字#6B5320

强调#C9A227

CSS 变量

:root{
  --bg:#F7E7CE;
  --ink:#6B5320;
  --accent:#C9A227;
  --accent-ink:#14181C;
}

黄色 · Gold on Night

深底金字，做封面标题显贵气。

对比 12.45:1 · 达 WCAG AA

背景#1C1A10

文字#F0D98A

强调#FFD700

CSS 变量

:root{
  --bg:#1C1A10;
  --ink:#F0D98A;
  --accent:#FFD700;
  --accent-ink:#14181C;
}

黄色 · Cream Memo

米黄底褐字，便签 / 文档背景不刺眼。

对比 8.34:1 · 达 WCAG AA

背景#FFFDD0

文字#5A4A12

强调#E1AD01

CSS 变量

:root{
  --bg:#FFFDD0;
  --ink:#5A4A12;
  --accent:#E1AD01;
  --accent-ink:#14181C;
}

为什么用 AA 方案

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

黄色明度最高，最抢眼，常做警示与高亮（如便利贴、重点标注）。纯黄配黑字对比强；配白字几乎都读不清，做按钮前务必先看对比度。金色 / 香槟金偏高级，适合礼盒与活动主题。