企业官网建设流程全解析

如果你问我这几年在各类前端项目里，哪个属性最不起眼但坑最多，我一定会投“文字颜色”一票。很多新手把文字颜色的学习理解成“选一个十六进制值填进去，完事”，可真到上线那天才发现，字看不清、背景刺眼、深色模式一团糟、打印出来颜色又变了。我这次想把“文字颜色的学习”这件事拆开揉碎，从颜色模型讲到对比度计算，再到写一个小工具验证配色，最后把踩过的坑也一起记录下来。这篇内容适合刚入门前端的人，也适合天天做后台系统、写图表和文档配色的同学，哪怕你完全不写代码，只做内容和排版，也会用到里面的对比度思路。

我不会给你列一堆“好看的颜色代码”让你复制，因为那解决不了问题。颜色是环境的产物，同样一个颜色放在不同的背景、屏幕、设备、阅读场景里，观感可以完全不同。真正值得学习的是：你凭什么选这个颜色，以及怎么验证它能用。

1. 文字颜色到底在学什么？

1.1 我们看到的颜色，其实是屏幕在“做加法”

电脑屏幕上的文字颜色不是印刷出来的，而是每个像素点背光之后，让红、绿、蓝三种子像素以不同强度发光，混在一起进入眼睛。所以屏幕上的颜色体系叫“加色模型”：红光加绿光得到黄光，三原色全开就是白，全关就是黑。

这个原理直接决定了为什么你调好的文字颜色，一旦打印出来就变样。印刷是减色模型，靠油墨吸收光线，白纸反射所有光，CMYK叠得越多越黑越暗。屏幕上越亮的颜色，打印出来不一定越鲜艳，反而可能偏灰。以前我帮人调文档配色时，交出去一份深蓝色标题，对方打印后说变成了黑乎乎一团，就是因为没有预留打印媒体的调整空间。

理解这个基础之后，再去学HSL就顺了。HSL把颜色拆成三个维度：H是色相，就是你在色环上看到的红、橙、黄、绿；S是饱和度，越接近0越灰，越接近100越鲜艳；L是明度，0是黑，100是白。文字配色的日常操作里，HSL比RGB直觉很多。你要调一个偏灰一点点的正文色，不用去猜rgb(50, 55, 65)这种数字，直接把明度往下压一点，饱和度也往下压一点，就能得到一组同色系深浅文字。

1.2 文字颜色从来不是单独出现的

文字颜色最特殊的地方，是它永远和背景颜色成对出现。同一个#777777，放在白色背景上是及格的中灰，放在浅灰色背景上就变成“看不清”的典型反面教材；放在黑色背景上，又变成了一种可以接受的次级文字色。

还有一个更容易被忽略的现象叫“同时对比”。把同一个灰色小块分别放到红色背景和蓝色背景中间，你会觉得两块灰的颜色不太一样，红的衬托下那块灰偏青，蓝的衬托下那块灰偏暖。文字排版也是同一个道理。标题、正文、注释、按钮文字，它们不是一个个孤立的色块，而是互相影响的整体。我见过不少界面，单独看每个颜色都挺正常，摆在一起就莫名显得脏，就是因为没有成套规划前景色和背景色的关系。

所以学习文字颜色，第一步要养成一个习惯：不单独问“标题该用什么颜色”，而是问“标题文字颜色配当前背景色，对比度是否足够”。后面要讲的对比度检查，就是把这个感觉量化的工具。

2. 文字颜色代码怎么写：选型与实操

2.1 主流颜色写法：从 #000 到 hsla

现代 CSS 里文字颜色至少有五种常见写法，选哪种不完全是审美问题，而是看场景。

我并不推荐直接用英文颜色名，比如color: red。不是说浏览器解析不了，而是这类命名颜色信息量太低，你根本不知道它到底偏暗红还是偏亮红，也没法精确复用于不同主题。项目里一旦需要深色模式、多主题切换，命名颜色会成为维护负担。

除了颜色值本身，text颜色还经常要处理继承关系。CSS里有一段很实用的关键字：currentColor。它不是固定色值，而是“当前元素color属性的值”。给父元素设置color: #006cff，子元素的border、background、box-shadow都可以写currentColor，这样整个组件只要改一行，图标和文字就一起变色。我在做按钮、标签、树控件时经常这样用，比引入公共色板变量还省事。

2.2 一套可以直接复用的选色流程

很多人选文字颜色时是打开一个取色器，凭感觉点一个深浅，然后问别人“这个能不能看清”。我建议按下面的流程操作，稳定性和效率都会好很多。

先确定背景色。内容区背景如果是白色或接近白色，正文优先选深灰色而不是纯黑。纯黑#000000在有些屏幕上会显得“死黑”，特别是搭配大面积的白色时容易刺眼。深灰色给人更温和的阅读体验，所以我常用的正文色是#1F2329。

再定文字层级。一个页面至少要有三个文字层级：主标题、正文、辅助说明。主标题可以强烈一点，正文要稳，辅助文字要靠后。我维护后台项目时常是这样一套：

• 主文字：#1F2329
• 正文/次级：#4E5969
• 辅助说明：#86909C
• 禁用/占位：#C9CDD4

这套层级不是唯一的正确答案，但它的优点很明显：四个颜色都是低饱和度、同一色系、明度依次上升，放到一起不会打架。你看很多设计系统里的中性色板，本质也是这个思路。

接着检查对比度。正文的主文字和白色背景之间要确保通过无障碍标准里的4.5:1，辅助文字如果字号很小，最好也达到4.5:1；大号标题可以放宽到3:1。这一步我会在第三节详细讲怎么算。

最后才是做点缀。强调色、超链接色、状态色不要超过两三个，而且要尽量避免在正文里大面积使用高饱和颜色。高饱和文字在白色背景上长时间阅读，眼睛非常容易累。

2.3 渐变文字和镂空文字怎么处理

除了普通单色文字，文字颜色的学习里还有一个经常被问到的效果：渐变文字。尤其在活动页、官网首屏，大标题用品牌渐变很常见。

核心做法有一条，用background-clip: text加上透明的文字颜色，把背景裁剪到文字的形状里：

@supports (-webkit-background-clip: text) or (background-clip: text) { .gradient-title { background: linear-gradient(135deg, #006cff, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } } .gradient-title { color: #006cff; /* fallback */ }

这里有一个我自己曾经踩过的坑：如果直接写color: transparent，而浏览器不支持background-clip: text，文字就会全部消失，只剩一个空空的容器。所以要用@supports做特性检测，在不支持的浏览器里老老实实显示一个纯色，这样能做到优雅降级。

同理，还有一种“文字镂空露出背景图片”的效果，原理是一样的，只是把background从渐变换成图片。这种效果只建议用在装饰性的大标题上，别忘了辅助阅读的无障碍问题。正文千万不要这样做，变着花样的背景会让文字的可识别性急剧下降。

3. 文字颜色的可读性原则：对比度不是玄学

3.1 对比度可以算，别靠感觉

很多人在学习文字颜色时，最缺的不是审美，而是验证标准。对比度计算并不难，虽然看着公式头大，但理解之后你会非常常用。

先把颜色转成“相对亮度”。因为屏幕上的RGB通道并不是线性发光的，实际经历过一次伽马校正，所以不能拿255和0直接平均。流程大概是：

1. 把每个通道的0-255值除以255，得到0-1的小数。
2. 对这个小数做线性化转换：如果小于等于0.04045，除以12.92；否则计算((值 + 0.055) / 1.055) 的 2.4 次方。
3. 用0.2126乘线性红、0.7152乘线性绿、0.0722乘线性蓝，加起来得到亮度L。

两个颜色的亮度出来后，对比度公式是：

对比度 = (较亮颜色亮度 + 0.05) / (较暗颜色亮度 + 0.05)

为什么加0.05？因为现实世界没有任何屏幕能显示绝对黑，这个修正项模拟了环境光和屏幕漏光的影响。

举个例子：纯红#FF0000和纯白#FFFFFF。红色的线性亮度大概是0.2126，白色是1.0。对比度就是(1.0 + 0.05) / (0.2126 + 0.05)，约等于4.0。这还没到4.5的标准线，意味着如果你用纯红写正文，在白色背景上是达不到无障碍要求的。这也是很多设计稿里红色文字只用来做强调、短标签、错误提示的原因，而不是大段正文。

我学到的一个讨巧办法是：让工具帮你算。后面第4节我会写一个十行核心逻辑的小型检查器，你在浏览器里打开，输入两个色值，它会直接告诉你达不达标。

3.2 关于配色禁忌和那些“想当然”的坑

配色禁忌里最容易被新手踩中的，是“以为对比度高就等于看得清”。纯黑配纯白，理论上对比度是21:1，极高，但大段阅读时，这种强对比在亮度过高的屏幕上非常刺眼，反而容易累。现在很多阅读类界面用米白背景加深灰文字，就是牺牲一点点对比度换取舒适度。

第二个坑是“只靠颜色传递信息”。比如在表格里，用红色表示异常、绿色表示正常，但如果用户是红绿色盲，他在你眼中分明的两张表，在他眼中可能是完全一样的两片灰。正确做法是颜色之外再加图标、下划线、文字标签，颜色只做加强，不做唯一信息通道。

第三个坑是“辅助文字过度透明”。有人喜欢用rgba(0, 0, 0, 0.3)来降低文字存在感，但透明色在不同背景下呈现的结果完全不同。白色背景上看着还行，放到一张深色图片上可能直接隐身。除非你明确知道最终背景是什么，否则不要用太低的透明度写正文。

还有一个高频问题是蓝色文字的亮度。纯蓝#0000FF的亮度非常低，放在黑色背景上几乎看不清，所以夜间模式的链接色通常不能直接用纯蓝，要用更亮的天蓝或加一点白。这些细节都是项目上线前容易被忽略的。

3.3 深色模式不是把背景反色

做过深色模式的人都有体会：直接在深色背景上放回原来的白色文字，虽然能看清，但层次感会丢失。深色模式的设计逻辑不是“白底换黑底”，而是要把背景层级和文字颜色分层重新做。

我的做法是定义一套CSS变量：

:root { --bg-page: #FFFFFF; --bg-card: #F7F8FA; --text-primary: #1F2329; --text-secondary: #4E5969; --text-weak: #86909C; } [data-theme="dark"] { --bg-page: #121212; --bg-card: #1E1E1E; --text-primary: #E5E6EB; --text-secondary: #A9ABB3; --text-weak: #6B6F76; }

在深色模式里，我很少用固定灰色#666666来做次级文字，因为深色背景上它会显得浑浊。更自然的做法是让文字颜色带一点白色通道的透明感，比如rgba(255, 255, 255, 0.65)，这样文字像是从背景里“透”出来的，层次会更干净。当然，最终还是要用对比度工具验证一遍，透明色很容易被低估风险。

这里还有一个关键细节：切换主题时最好通过color-scheme告诉浏览器当前页面的主题，这样浏览器原生滚动条、表单控件、默认文本颜色也会跟着适配。否则你只改了页面背景和文字，结果用户一个下拉框还是亮晃晃的白，非常出戏。

4. 实战：写一个“文字颜色对比度检查器”小工具

4.1 需求拆分：做一个能用的对比度检查器

文字颜色的学习如果只停留在背公式，很快就会忘。我建议你亲手做一个小工具：输入前景色和背景色，自动显示对比度数值和是否达标，同时把效果直接预览出来。

需求拆成三块：

1. 拿两个颜色，一个文字色，一个背景色。
2. 根据对比度公式计算结果。
3. 用预览区展示文字实际效果，同时显示“符合/不符合”的结论。

界面不用复杂，两个input type="color"加上一段预览文本就够了。这个工具不需要任何框架，一个HTML文件就能跑起来，放在本地随时检查配色。

4.2 核心代码：十行函数解决对比度计算

对比度计算的JavaScript实现可以很紧凑。先把hex转成RGB，再转线性亮度，最后算比值：

function hexToRgb(hex) { const value = hex.replace('#', ''); return { r: parseInt(value.slice(0, 2), 16), g: parseInt(value.slice(2, 4), 16), b: parseInt(value.slice(4, 6), 16) }; } function channelToLinear(c) { const s = c / 255; return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); } function relativeLuminance(rgb) { return 0.2126 * channelToLinear(rgb.r) + 0.7152 * channelToLinear(rgb.g) + 0.0722 * channelToLinear(rgb.b); } function contrastRatio(color1, color2) { const l1 = relativeLuminance(hexToRgb(color1)); const l2 = relativeLuminance(hexToRgb(color2)); const lighter = Math.max(l1, l2); const darker = Math.min(l1, l2); return (lighter + 0.05) / (darker + 0.05); }

当你拿到两个色值后，用contrastRatio('#1F2329', '#FFFFFF')调用，返回值就是对比度。是不是比想象中简单？而且这套公式在任何语言里都能复制，写Python脚本批量检查也是同样的逻辑。

4.3 完整页面结构和预览测试

光有函数还不够，要把输入控件和预览区接起来。下面是我搭的一个最小页面框架，你可以直接复制使用：

<input type="color" id="textColor" value="#1F2329"> <input type="color" id="bgColor" value="#FFFFFF"> <div id="preview" style="padding: 24px; background: #FFFFFF;"> <p style="font-size: 18px;">这是一段用于检查可读性的示例文字，我会随着颜色选择器变化颜色。</p> </div> <p id="result"></p> <script> const textInput = document.getElementById('textColor'); const bgInput = document.getElementById('bgColor'); const preview = document.getElementById('preview'); const result = document.getElementById('result'); function update() { const textColor = textInput.value; const bgColor = bgInput.value; preview.style.color = textColor; preview.style.background = bgColor; const ratio = contrastRatio(textColor, bgColor); const passed = ratio >= 4.5 ? '达到正文标准' : '未达正文标准'; const largePassed = ratio >= 3 ? '达到大号文字标准' : '未达大号文字标准'; result.textContent = `对比度：${ratio.toFixed(2)}，${passed}，${largePassed}`; } textInput.addEventListener('input', update); bgInput.addEventListener('input', update); update(); </script>

实际用的时候，我会先固定一个背景色，再手动拖动文字色，观察预览区里文字的变化。你会发现有些色值明明肉眼看着还行，但对比度工具告诉我只有3.2，这种“直觉”和“数据”之间的偏差，就是你文字颜色学习里最需要积累的部分。

我还给这个小工具加过两个扩展功能：一是自动推荐同色系里能达到4.5:1的替代色，二是在预览区用真实字号展示小字效果。因为大标题和小字对对比度的要求不同，同一套配色在大字上没问题，缩到12px辅组说明时就不一定合格。

5. 学习文字颜色过程中被问得最多的几个问题

5.1 设置了 color 却没生效，是哪里出了问题？

这个问题我自己刚写CSS时也遇到过，排查顺序基本是这样的：

第一步看选择器优先级。类选择器、ID选择器、内联样式之间是有优先级规则的。如果是组件库里的样式覆盖了你后写的class，你不管怎么改都不生效。打开开发者工具，看最终计算样式到底是谁在起作用，这是最快的方法。

第二步看拼写和属性错误。color不是font-color，也没有text-color这种叫法。还有像background-clip: text这种要写浏览器前缀的属性，漏掉-webkit-在旧设备上就不显示。

第三步看是不是被伪元素继承了。::before和::after里的文字颜色虽然默认会继承父元素，但如果你在伪元素上设置了color: inherit，它可以跟着父级走；如果你在伪元素里用了特殊字体图标，那个图标的颜色可能不是文字属性控制的，需要单独设置。

5.2 同一个颜色，在电脑和手机上看起来不一样

这个问题几乎人人都会遇到，主要原因是屏幕色域和色温不同。

现在很多高端屏幕支持广色域，而网页标准历来是按sRGB来定义的。你选的颜色如果落在了广色域范围之外，在这个屏上显示偏浓，在那个屏上显示偏淡。文字颜色尽量选择sRGB范围内的成熟色值，能减少不少跨设备差异。

另一个影响因素是系统级的色彩调节，比如夜间模式、护眼模式，它们会给整个屏幕加上暖黄色滤镜。这种情况下，任何精确色值都会失真。你不需要在一开始就追求所有设备“一模一样”，更现实的目标是保证文字在任何设备上都清晰可读。所以我的建议是：跨设备检查时重点看对比度是否达标，而不是细抠那一点色相偏移。

5.3 打印、导出图片和阅读场景下还有什么坑？

先说打印。前面讲过屏幕是加色、打印是减色，所以浅灰色的辅助文字经过打印之后可能几乎看不见。如果你的内容会走打印流程，比如合同、报告、学习资料，要给打印样式单独加一层颜色重置：

@media print { body { color: #000000; } .text-weak { color: #333333 !important; } }

再说导出图片。很多项目用canvas把页面内容画成图片，canvas导出和屏幕渲染不完全一致，特别是使用了rgba半透明文字、渐变文字、mix-blend-mode这类效果的场景。你看到的是带透明度的文字叠在浅色背景上，导出后背景变了，文字混出来的颜色也跟着变了。所以涉及导出的内容，尽量使用不透明色值。

还有一个容易被忽略的：文字的阴影。有些人为了让浅色文字在亮色背景上看起来“高级”，给文字加上一层淡淡的投影。这种做法的本质是在弥补对比度不足。与其用阴影硬撑，不如直接把文字加深一个层级，效果更干净，也更少出问题。

5.4 让文字颜色整体“变协调”的几个小技巧

学到最后你会发现，真正决定一个页面高级感的，不是某一个颜色有多好看，而是颜色之间的关系是否稳定。

我自己的常用技巧有三个：

一是给项目建一套中性色变量。把正文、次级、辅助、禁用这些等级都定义好，后续写代码只允许引用变量，不允许随手写色值。这样才能保证整个产品在不同页面上的文字颜色是一致的。

二是让强调色和中性色保持同一个色相家族。比如主色调是蓝，那正文里的深灰色也可以带一点点蓝味，整个页面就会比纯灰搭纯蓝更和谐。用HSL来做这件事非常简单，只需把正文色的色相调到和品牌色一致，再降低饱和度和明度。

三是控制页面里的颜色数量。一个内容页面，最多三组颜色：背景色、中性文字色、品牌强调色。超过这个数量，用户会分不清重点。文字颜色学习到最后，做的其实是减法，而不是加法。

最后说点我的个人体会

文字颜色看起来是前端基础里的基础，但越往深做，越会发现它串联着设备、人眼、设计规范和无障碍体验。我在经历了不少“上线后被反馈看不清”的尴尬之后，才慢慢养成一个习惯：每换一个文字颜色，就顺手用对比度工具验一下，并且把它对应的使用场景写进代码注释里。

如果你也想系统学习这一块，别急着收藏一堆色板，先跟着本文把对比度检查器做出来，然后拿你手头正在做的页面，把每一处文字颜色都过一遍。把“我觉得可以”换成“数据通过”，这个思维转换完成之后，你的文字颜色功底才算真正扎实了。