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

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

红色 · Vermilion on Paper

浅底深字，红色做按钮填充，正文用暗红，长时间看不累。

对比 9.56:1 · 达 WCAG AA

背景#FDF3F2

文字#7A1D18

强调#E34234

CSS 变量

:root{
  --bg:#FDF3F2;
  --ink:#7A1D18;
  --accent:#E34234;
  --accent-ink:#14181C;
}

红色 · Crimson Night

深色界面警示配色，白字换成暖粉更柔和。

对比 14.62:1 · 达 WCAG AA

背景#1E0B10

文字#FFD9DE

强调#FF5C7A

CSS 变量

:root{
  --bg:#1E0B10;
  --ink:#FFD9DE;
  --accent:#FF5C7A;
  --accent-ink:#14181C;
}

红色 · China Red Slide

节日 / 汇报封面，红底白字对比足，金色做点缀。

对比 10.01:1 · 达 WCAG AA

背景#8B0000

文字#FFFFFF

强调#FFD9A0

CSS 变量

:root{
  --bg:#8B0000;
  --ink:#FFFFFF;
  --accent:#FFD9A0;
  --accent-ink:#14181C;
}

红色 · Carmine Card

白卡片 + 胭脂红标题，电商 / 促销卡片常用。

对比 9.09:1 · 达 WCAG AA

背景#FFFFFF

文字#960018

强调#C21E56

CSS 变量

:root{
  --bg:#FFFFFF;
  --ink:#960018;
  --accent:#C21E56;
  --accent-ink:#FFFFFF;
}

为什么用 AA 方案

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

红色是最有存在感的颜色，适合做强调、警示与节日主题。用在网页里建议只作点缀（按钮 / 标签 / 图标），大面积铺红容易刺眼；做 PPT 时用暗红或酒红做底色，白字可读性最好。