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

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

橙色 · Caramel Latte

咖啡店 / 烘焙风，浅奶咖底 + 深棕字，温暖耐看。

对比 9.33:1 · 达 WCAG AA

背景#FBF4EC

文字#5A3A22

强调#D2691E

CSS 变量

:root{
  --bg:#FBF4EC;
  --ink:#5A3A22;
  --accent:#D2691E;
  --accent-ink:#14181C;
}

橙色 · Terracotta Sun

陶土橙底配深棕字，暖而不刺眼，做头图与横幅很出片。

对比 5.71:1 · 达 WCAG AA

背景#E2725B

文字#2A120A

强调#5A2E22

CSS 变量

:root{
  --bg:#E2725B;
  --ink:#2A120A;
  --accent:#5A2E22;
  --accent-ink:#FFFFFF;
}

橙色 · Amber Night

深色界面金色点缀，适合会员 / 尊享主题。

对比 13.77:1 · 达 WCAG AA

背景#241708

文字#FFE0B0

强调#FFBF00

CSS 变量

:root{
  --bg:#241708;
  --ink:#FFE0B0;
  --accent:#FFBF00;
  --accent-ink:#14181C;
}

橙色 · Chocolate Card

深棕底米白字，复古杂志与书单页友好。

对比 7.57:1 · 达 WCAG AA

背景#7B3F00

文字#FFF4E6

强调#FFD9A0

CSS 变量

:root{
  --bg:#7B3F00;
  --ink:#FFF4E6;
  --accent:#FFD9A0;
  --accent-ink:#14181C;
}

为什么用 AA 方案

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

橙色介于红与黄之间，暖、活泼、有食欲感，餐饮与电商最爱用。棕色系（咖啡 / 巧克力 / 焦糖）自带复古与高级感，适合做木质、纸感、商务稳重风。