WCAG 2.1要求正文对比度≥4.5:1（小字）或3:1（大字），实操需用插件检测、深色模式适配、图片背景加遮罩；字体优先system-ui、中文字体栈≤3个；行高推荐1.5–1.6倍字号；颜色统一用CSS自定义属性管理。
颜色对比度不够时，文字根本看不清
WCAG 2.1 标准要求正文文本与背景的对比度至少为 4.5:1（小字号）或 3:1（大字号）。很多设计师直接用 #999 灰字配 #f5f5f5 浅灰背景，实际对比度只有 2.3:1，手机阳光下几乎不可读。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器插件（如 axe DevTools 或 Color Contrast Analyzer）实时检测当前
color和background-color的对比值 - 深色模式下别硬套浅色方案：比如
background: #121212时，color: #fff没问题，但color: #e0e0e0就会发灰、吃力 - 避免在图片背景上叠放纯黑/纯白文字——加一层半透
background: rgba(0,0,0,0.6)或使用text-shadow: 0 1px 2px rgba(0,0,0,0.5)强化可读性
font-family 堆砌太多反而降低加载速度和一致性
写成 font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; 看似稳妥，但每个字体名都会触发一次本地字体查询，iOS 和 Android 对中文字体名大小写、空格、引号敏感，容易 fallback 到系统默认字体。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
system-ui：现代浏览器支持良好，自动匹配平台默认 UI 字体（macOS 用 San Francisco，Windows 用 Segoe UI），渲染快且原生感强 - 中文字体栈控制在 3 个以内，按「首选→次选→兜底」排列，例如：
font-family: -apple-system, system-ui, "SF Pro SC", sans-serif; - 避免用
@import加载 Google Fonts；改用+font-display: swap防止 FOIT（无字体阻塞）
line-height 和 font-size 不匹配导致行间拥挤或松散
常见错误是设了 font-size: 14px 却没调 line-height，浏览器默认用 line-height: normal（约 1.1–1.2），中文会挤在一起；而设成 line-height: 2 又太松，段落像报纸分栏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 中文排版推荐
line-height: 1.5–1.6（即字号的 1.5–1.6 倍），比如font-size: 16px→line-height: 24px–26px - 用无单位数值（如
line-height: 1.5）而非像素值，确保子元素继承时能按自身字号缩放 - 标题可适当收紧：比如
h2 { font-size: 28px; line-height: 1.2; }，避免大字号+高行高造成的“空洞感”
color 值混用命名法导致维护困难
项目里同时出现 #333、rgb(51, 51, 51)、var(--text-primary)、hsl(0, 0%, 20%)，后期想统一改深灰，得全局搜四遍，还可能漏掉某处内联样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全项目只用 CSS 自定义属性管理颜色，例如：
:root { --color-text: #212121; --color-bg: #ffffff; } - 避免在组件级 CSS 中写死颜色值；组件通过
color: var(--color-text);调用，主题切换只需改:root - 深色模式用
@media (prefers-color-scheme: dark)覆盖变量值，不要另写一整套 class 名
:root {
--color-text: #212121;
--color-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #e0e0e0;
--color-bg: #121212;
}
}
body {
color: var(--color-text);
background-color: var(--color-bg);
}
真正难的不是挑出“好看”的配色或字体，而是让所有颜色有明确语义、所有字体有稳定层级、所有间距有可复用的比例关系。一旦脱离系统约束，局部优化越多，整体越难收敛。