CSS color属性用于设置文本颜色，支持十六进制、rgb、hsl、rgba、hsla及颜色关键字；需确保与背景对比度符合WCAG标准（普通文本4.5:1，大文本3:1），推荐使用工具检测；通过@media查询适配暗色模式，结合CSS自定义变量统一主题；避免仅用颜色传递信息，链接应有下划线，慎用纯黑纯白，考虑色盲用户，提升可访问性。
在网页设计中，CSS color属性用于设置文本的字体颜色，直接影响内容的视觉呈现和用户阅读体验。合理使用color属性不仅能提升页面美观度，还能增强信息可读性和可访问性。
color属性的基本用法
color属性应用于文本内容，语法简单：
p {
color: #333333;
}
h1 {
color: rgb(255, 99, 71);
}
span.highlight {
color: hsl(120, 100%, 25%);
}
支持多种颜色表示方式：
- 十六进制值：如 #ff0000（红色），最常用
- rgb()函数：通过红绿蓝三原色定义颜色，例如 rgb(0, 128, 255)
- rgba()：在rgb基础上增加透明度，如 rgba(0, 0, 0, 0.8)
- hsl()与hsla()：基于色相、饱和度、亮度的颜色模型，更直观易调
- 颜色关键字：如 red、blue、darkgray 等标准命名
字体颜色与背景的对比度优化
良好的对比度是保证文本可读性的关键。WCAG（Web内容可访问性指南）建议：
立即学习“前端免费学习笔记（深入）”；
- 普通文本至少达到 4.5:1 的对比度比率
- 大号文本（18px以上或粗体14px以上）可接受 3:1
例如深灰文字 #333 在白色背景 #fff 上对比度约为 12:1，符合标准；而浅灰 #aaa 与白底对比仅约 2.3:1，难以阅读。
推荐使用在线工具（如 WebAIM Contrast Checker）检测配色是否达标。
响应式与主题适配中的颜色策略
现代网站常支持暗色模式，需动态调整文本颜色：
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
a {
color: #bb86fc;
}
}
利用CSS自定义属性可集中管理主题颜色：
:root {
--text-primary: #212121;
--bg-surface: #ffffff;
}
@media (prefers-color-scheme: dark) {
--text-primary: #f5f5f5;
--bg-surface: #1e1e1e;
}
body {
color: var(--text-primary);
background: var(--bg-surface);
}
提升可访问性的实用建议
避免仅靠颜色传递信息，比如错误提示应配合图标或文字说明。同时注意：
- 慎用纯黑 #000 与纯白 #fff 的极端对比，长时间阅读易疲劳
- 选择柔和的深色替代纯黑用于暗模式，如 #121212
- 链接文字应有下划线或明显样式区分，不能只依赖颜色变化
- 为色盲用户考虑，避免红绿搭配传达关键状态
基本上就这些。color属性虽简单，但结合背景、对比度和用户偏好后，就成了影响体验的重要细节。不复杂但容易忽略。
