调整文字颜色提升对比度可增强可读性，应避免使用#ccc等过浅灰色，推荐采用#333、#444等深灰色系；通过CSS的color属性设置颜色，并利用CSS变量统一管理，如--text-normal: #333；结合WebAIM工具检查对比度是否达到WCAG标准的4.5:1，确保白底背景下文字清晰可见。
文字颜色太淡、对比度不足会影响可读性，尤其在白底背景下浅灰色文字容易看不清。解决方法是通过CSS的 color 属性调整文字颜色，提升与背景的对比度。
选择更清晰的文字颜色
避免使用过浅的灰色（如 #ccc、#eee），改用深灰或黑色系提升辨识度：
- 推荐深灰： #333、#444、#555 —— 比纯黑柔和，又足够清晰
- 避免浅灰： #ddd、#eee、#f5f5f5 —— 在白色背景上几乎看不见
- 示例代码：
p {
color: #333; /* 明显提升对比度 */
}
.small-text {
color: #555;
}
检查背景与文字的对比度是否达标
根据WCAG标准，正常文本至少需要 4.5:1 的对比度。可以使用在线工具测试，比如 WebAIM Contrast Checker。
立即学习“前端免费学习笔记（深入）”；
- 白底（#fff）配 #666 对比度约 4.5:1，勉强达标
- 白底配 #333 对比度约 12:1，非常清晰
- 如果必须用浅色文字，考虑降低背景亮度，例如用 #f8f8f8 而非纯白
使用 CSS 变量统一管理颜色
便于维护和全局调整，避免散落的浅色值：
:root {
--text-normal: #333;
--text-muted: #666;
--bg-body: #fff;
}
body {
color: var(--text-normal);
background: var(--bg-body);
}
基本上就这些，关键是把 color 调深一点，再用工具验证对比度，确保用户看得清。
