应先用工具验证对比度是否真不达标，再按WCAG标准调整：优先改文字色，用#000/#fff最稳妥，慎用浅灰；图片背景加半透层；增大字号、字重和行高可提升可读性。
检查当前对比度是否真的不达标
很多所谓“对比度低”其实是主观感受，实际可能符合 WCAG 2.1 AA 标准（文本 ≥ 4.5:1，大号文本 ≥ 3:1）。先用工具验证：axe DevTools、WAVE Evaluation Tool 或浏览器插件 Color Contrast Analyzer。输入当前的 color 和 background-color 值，看具体比值。别凭感觉调色——比如 #333 在 #fff 上是 12.8:1，完全合格；但 #777 在 #f5f5f5 上只有 1.9:1，必须改。
用 CSS color-contrast() 函数快速试配（仅支持 Safari 16.4+ / Chrome 111+）
这是最直接的“自动选色”方式，适合按钮文字、卡片标题等需要适配多种背景的场景。它会从你给的候选颜色列表中，挑出与背景对比度最高的那个：
h2 {
color: color-contrast(white vs black, #555, #000);
/* 如果背景是 white，优先选 #000；如果是 black，优先选 white */
}注意：color-contrast() 不是万能解——它只比较离散颜色，不会生成新色值；且旧版浏览器完全不支持，必须配合 color 回退声明：
h2 {
color: #333; /* fallback */
color: color-contrast(white vs black, #222, #000);
}手动调整时优先改文字色，而非背景色
在初级项目里，改背景往往牵一发而动全身（比如影响图片、边框、阴影），而文字色改动成本最低、效果最明显。记住几个安全阈值：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
-
#000（黑）和#fff（白）永远最稳妥，尤其用于正文 - 灰色系慎用
#666及更浅的值——在非纯白背景上极易跌破 4.5:1 - 想保留设计感？把文字色压到
#1a1a1a（近黑）或提亮到#e6e6e6（近白），比调中间灰更可靠 - 如果背景是图片或渐变，加一层半透
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(...)再放白字，比硬调文字色更可控
别忽略字体粗细和大小对可读性的放大作用
同样一对颜色，在 font-weight: 300 + font-size: 14px 下可能 barely readable，换成 font-weight: 600 + font-size: 16px 就清晰得多。WCAG 允许大号/粗体文本降低对比度要求（≥ 3:1 即可），所以：
- 正文至少用
16px，别卡14px - 标题用
font-weight: 600或更高，别用light/thin - 行高
line-height: 1.5或以上，避免文字“糊成一片”
真正难调的是小字号图标文字（如 12px 按钮标签）——这种地方哪怕对比度达标，人眼也容易误读，不如直接换字体或加描边。
