ACCESSIBILITY
对比度Color Contrast
正文文字与背景的对比度至少 4.5:1，大字号至少 3:1。很多「看起来很高级」的浅灰字其实是不合格的。
效果预览
浅灰字放在灰底上2.1:1 ✕
白字放在主色底上7.4:1 ✓
适合用在哪
所有文字与图标。尤其要检查禁用态、占位符、浅色主题的次要文字。
容易踩的坑
- 只在亮色主题检查对比度，暗色主题的次要文字常跌到 3:1 以下。
- 渐变或图片背景上的文字只抽检一个点，最浅处对比度可能不足 4.5:1。
- 禁用按钮被调得过淡，用户根本看不出那里有按钮，也不知道为何不可用。
设计提示词 · Prompt
对比度（Color Contrast）：按 WCAG AA 标准 —— 正文（< 24px 常规或 < 18.66px 加粗）至少 4.5:1；大字号至少 3:1；非文本的 UI 边界（输入框描边、图标）至少 3:1。实践建议：正文用 #1f2937 而不是 #9ca3af；次要文字不低于 #6b7280；占位符也不要低于 4.5:1（很多设计系统在这里踩坑）。不要用纯黑配纯白（#000 配 #fff 的 21:1 反而有光晕感），用 #111827 级别的近黑更舒服。工具：Chrome DevTools 的对比度检查、axe DevTools、WebAIM Contrast Checker。注意半透明文字的实际对比度要按合成后的颜色计算。
Color Contrast: follow WCAG AA — body text (< 24px regular or < 18.66px bold) needs at least 4.5:1; large text at least 3:1; non-text UI boundaries (input borders, icons) at least 3:1. Practical tips: use #1f2937 rather than #9ca3af for body text; secondary text no lighter than #6b7280; placeholders shouldn't drop below 4.5:1 either (many design systems trip up here). Avoid pure black on pure white (#000 on #fff's 21:1 actually causes halation); a near-black like #111827 is more comfortable. Tools: Chrome DevTools contrast checker, axe DevTools, WebAIM Contrast Checker. Note that the actual contrast of semi-transparent text must be calculated from the composited color.
常见搭配
同一页面里经常和「对比度」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="a11y-contrast">
<div class="a11y-contrast__r a11y-contrast__r--bad">浅灰字放在灰底上<em>2.1:1 ✕</em></div>
<div class="a11y-contrast__r a11y-contrast__r--good">白字放在主色底上<em>7.4:1 ✓</em></div>
</div>
</div>