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

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

紫色 · Lilac Room

浅紫底深紫字，美妆 / 女性向页面。

对比 11.13:1 · 达 WCAG AA

背景#F6EFFA

文字#4A1D6A

强调#8A2BE2

CSS 变量

:root{
  --bg:#F6EFFA;
  --ink:#4A1D6A;
  --accent:#8A2BE2;
  --accent-ink:#FFFFFF;
}

紫色 · Grape Night

深紫底浅紫字，游戏 / AI 夜间界面。

对比 12.98:1 · 达 WCAG AA

背景#2A0E3A

文字#EDD9F7

强调#B57EDC

CSS 变量

:root{
  --bg:#2A0E3A;
  --ink:#EDD9F7;
  --accent:#B57EDC;
  --accent-ink:#14181C;
}

紫色 · Violet Button

紫底白字，创意产品主按钮。

对比 5.96:1 · 达 WCAG AA

背景#8A2BE2

文字#FFFFFF

强调#E0B0FF

CSS 变量

:root{
  --bg:#8A2BE2;
  --ink:#FFFFFF;
  --accent:#E0B0FF;
  --accent-ink:#14181C;
}

紫色 · Lotus Mist

藕荷粉紫底，温柔标签与卡片。

对比 6.60:1 · 达 WCAG AA

背景#DDA0DD

文字#4A1A4A

强调#6F2DA8

CSS 变量

:root{
  --bg:#DDA0DD;
  --ink:#4A1A4A;
  --accent:#6F2DA8;
  --accent-ink:#FFFFFF;
}

为什么用 AA 方案

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

紫色自带神秘、高贵与创意气质，常见于美妆、游戏、AI 与女性向产品。浅紫（丁香 / 薰衣草）温柔，深紫（葡萄 / 桑葚）浓烈。紫色明度普遍偏低，配白字通常比配黑字更好读。