颜色搭配需确保对比度、情绪匹配与场景适用。1. 文字与背景明暗差异要足，推荐白底黑字或深灰底浅字，避免相近明度组合，对比度建议≥4.5:1；2. 色彩传递情感，蓝白显专业，绿白显自然，红白警示强，忌高饱和冲突；3. 常用组合如#007BFF蓝配白、#343A40深灰配浅灰白、#FFEAA7米黄配深灰、#DC3545红配白；4. 暗色模式优选#121212深灰背+ #EEEEEE浅白字，微调色调减眩光。最终目标是清晰易读、视觉舒适，适配多设备环境。
颜色搭配在网页设计中直接影响可读性和视觉体验。背景色与文字颜色的组合要保证内容清晰易读，同时符合整体设计风格。关键在于对比度、色彩情绪和用户场景。
1. 确保足够的对比度
文字和背景之间必须有足够的明暗差异，才能让用户轻松阅读。
- 浅色背景（如 #FFFFFF 白色）配深色文字（如 #000000 黑色或 #333333 深灰）是最常见且安全的选择。
- 深色背景（如 #121212 深黑或 #2C3E50 深蓝灰）适合搭配白色或浅灰色文字（如 #F5F5F5）。
- 避免使用相近明度的颜色，比如灰色字配浅灰背景，容易造成阅读疲劳。
可以使用在线工具如 WebAIM Contrast Checker 验证对比度是否符合 WCAG 可访问性标准（建议至少 4.5:1）。
2. 色彩情绪与品牌调性匹配
颜色不仅影响阅读，还传递情感。搭配时要考虑整体氛围。
立即学习“前端免费学习笔记（深入）”；
凡人网络企业自助建站系统1.0
下载
A、网站主菜单DIY：名称、链接、颜色、排列顺序、前台是否显示[主菜单包括：公司简介、产品展示、合作交流、新闻快讯、诚聘英才、下载中心、作品案例、联系我们、客户反馈]B、网站界面DIY：整站按钮图片、背景图片、背景颜色、文字颜色、链接颜色C、公司简介UBB+DIY、联系方式UBB+DIY、汇款方式UBB+DIY；公司简介子栏目DIY、子栏目内容UBB+DIY，[例如：领导致辞、成长经历、公司成员、
- 蓝色背景 + 白色文字：冷静、专业，常用于科技类网站。
- 绿色背景 + 白色或米色文字：自然、环保，适合农业或健康主题。
- 红色背景 + 白色文字：强烈、警示，适用于提醒或促销区域，但不宜大面积使用。
避免高饱和度背景配高饱和度文字，容易刺眼。建议主色降低饱和度，文字用中性色平衡。
3. 实用搭配示例
以下是一些经过验证的常用组合，可直接参考：
- #007BFF 蓝底 + 白字 — 清爽专业
- #343A40 深灰底 + 浅灰白字 — 现代感强
- #FFEAA7 米黄底 + 深灰字 — 温和护眼，适合阅读页
- #DC3545 红底 + 白字 — 用于警告按钮或提示
4. 暗色模式下的优化建议
越来越多网站支持暗色模式，需特别注意文字颜色选择。
- 避免纯黑背景（#000000）配纯白文字，反差太强伤眼。推荐使用深灰（如 #121212）和浅灰白（#EEEEEE）。
- 文字可略微降低亮度，比如用 #E0E0E0 替代 #FFFFFF，减少眩光。
- 背景可加入微弱色调（如深蓝灰、深绿灰），避免单调死黑。
基本上就这些。好的配色不是最炫的，而是让人看得舒服、信息传达清晰的。测试时多在不同设备上预览，确保在手机、平板和夜间环境下都能良好阅读。
