合理搭配文本颜色与背景色可提升网页可读性和美观性。1. 使用 color 和 background-color 设置文字前景与背景，如 button { color: white; background-color: #007BFF; } 确保按钮清晰易点。2. 保证足够对比度：深色文字配浅色背景适合正文，亮色文字配暗色背景适合标题，避免相近色导致阅读困难。3. 注意 transparent 背景需确保文字仍可读，inherit 颜色需检查最终效果协调性。4. 常见问题包括白色文字配浅色背景不可见、主题切换时对比度不足。5. 可结合 CSS 自定义属性（如 --text-color: #333; --bg-color: #fff;）和 var() 函数统一管理颜色，便于维护与夜间模式切换。6. 配合 @media (prefers-color-scheme) 响应系统主题，提升用户体验。只要关注对比度与上下文，颜色搭配简单有效，但细节易被忽略而影响整体体验。
文本颜色和背景色的搭配直接影响网页的可读性和视觉效果。合理使用 color 和 background-color 属性，能让内容更清晰、界面更美观。
基本用法
color 控制文字的前景色，background-color 设置元素的背景颜色。两者通常一起设置，避免浏览器使用默认值导致显示异常。
例如：button {
color: white;
background-color: #007BFF;
}
这样按钮文字为白色，背景为蓝色，对比明显，易于点击。
确保足够的对比度
文字和背景之间的颜色要有足够对比，特别是正文内容，否则会影响阅读体验，甚至不符合无障碍标准（如 WCAG）。
立即学习“前端免费学习笔记（深入）”；
建议：- 深色文字配浅色背景（如黑字白底）适合大段文本
- 亮色文字配暗色背景（如白字深灰）适合标题或强调区域
- 避免使用相近色值，比如浅灰字配白背景
透明与继承的注意事项
如果 background-color: transparent，背景会透出父元素的颜色，此时要确保文字依然可读。
使用 color: inherit 可以继承父元素文字色，但也要检查最终组合是否协调。
常见问题：- 设置了白色文字但背景也是浅色，导致看不见
- 在主题切换时颜色未适配，出现低对比组合
配合现代 CSS 更灵活控制
可以结合 @media (prefers-color-scheme) 响应用户系统主题，或者用 CSS 自定义属性统一管理配色。
示例：:root {
--text-color: #333;
--bg-color: #fff;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
}
便于维护，也方便实现夜间模式切换。
基本上就这些。只要注意对比度和上下文环境，color 与 background-color 的搭配并不复杂，但容易忽略细节影响体验。
