网站文字与颜色的搭配核心是保证清晰易读、视觉舒适,同时适配不同场景的使用需求,具体要点如下:
一、核心对比度规则
明暗反差优先:浅色背景配深色文字,深色背景配浅色文字,避免明度相近的颜色组合。
合规对比度标准:正文文字与背景的对比度≥4.5:1,标题文字对比度≥3:1,符合WCAG可访问性标准。
安全基础组合:白色背景配纯黑/深灰文字,深灰背景配浅白文字,是通用且不会出错的基础搭配。
二、不同背景的适配方案
亮色背景:白色背景优先选黑色、深蓝色、深绿色文字;淡黄色背景适配黑色、红色文字;淡红色背景适配白色、深紫色文字。
暗色背景:黑色背景优先选白色、浅黄色、浅青色文字;深蓝色背景适配白色、黄色文字;深灰色背景适配白色、淡红色文字。
复杂花背景:背景图案色彩杂乱时,文字直接用纯黑或纯白单色,避免视觉冲突。
三、字体与色彩的风格匹配
正式商务场景:黑/白/灰中性色搭配宋体等衬线字体,体现专业庄重感。
休闲亲民场景:浅蓝/淡粉等柔和色彩搭配圆润无衬线字体,提升亲和力。
时尚潮流场景:金/银/紫色系搭配现代黑体,突出创新感。
自然环保场景:绿色系搭配柔和圆润字体,营造亲近自然的氛围。
四、细节优化要点
控制文字色彩数量:单页面文字颜色不超过3种,避免多色混用造成视觉混乱。
按内容层级分配颜色:标题用深黑/品牌主色,正文用深灰,提示类文字用浅灰,层级越低颜色越浅。
适配暗色模式:推荐深灰#121212背景搭配浅灰白#EEEEEE文字,避免纯黑配纯白的强反差伤眼。
规避高饱和冲突:不要用高饱和度背景搭配高饱和度文字,长时间浏览容易产生视觉疲劳。