TECH NOTE
IT中华文章颜色看不清：排查与修复全记录
2026年7月28日 · 对比度问题 · IT中华技术日记
今天收到用户反馈：IT中华已发布的文章中，多处标题和正文在深色主题下几乎看不清。本文把排查过程、根因定位和修复方案完整记录下来，方便后续遇到同类问题时快速参考。
一、问题现象
用户截图中，AI控制手机实操：mobilerun自然语言操作Android和iOS 这篇文章出现多处红框标注，主要表现是：
- 二级标题（h2）在深色背景上变成深灰色，几乎和背景融为一体；
- 部分正文段落、小标题继承主题色后对比度不足；
- 顶部品牌头部和白色引言区反而正常。
二、根因定位
排查下来，问题不是单一原因，而是 文章模板颜色规范 + emlog 主题深色背景 叠加造成的。
2.1 emlog 主题是深色背景
IT中华站点使用的 emlog 主题整体为深色（近似 #0f0c29 / #1a1a2e）。这意味着如果文章中没有显式给每个区块指定背景色，h2/h3 会默认落在这个深色背景上。
2.2 模板中 h2/h3 颜色设成了浅色背景色
之前的颜色规范要求：
- 浅色背景上的 h2/h3 用
#1a1a2e； - 正文用
#333333。
当这些颜色落到 emlog 深色主题背景上时，直接接近背景色，导致看不清。
2.3 部分辅助色对比度本身不足
早期的模板里还出现过 #555555、#888888 这类中灰色。这些颜色在白色背景上尚且勉强，在深色背景下几乎不可读。
三、修复方案
3.1 模板层：确立对比度铁律
- 深色背景（#0f0c29、#302b63、#24243e 等）上的文字只能用
#ffffff或#f0f0f0； - 浅色背景（#ffffff、#f8f9fa 等）上的文字只能用
#333333或#1a1a2e； - 彻底禁用
#555555、#888888、#777777这类中灰色； - 所有 HTML 标签必须显式内联
style="color: ..."，不依赖继承。
3.2 代码层：全站 CSS 兜底
已经发布的文章不可能逐篇修改，因此编写了 contrast_fix.css，通过 emlog 后台「自定义头部代码」注入，全局修复。
CSS 核心做了四件事：
- 深色渐变背景上的所有文字强制变白；
- 深色主题主内容区的 h2/h3 标题强制变白；
- 浅色背景块内的文字恢复为深灰/深蓝黑；
- 表格、代码块保持高对比度可读。
3.3 部署方式
登录 emlog 后台 → 设置 → 自定义设置 → 将 contrast_fix.css 完整内容粘贴到「自定义头部代码」→ 保存
四、后续规范
为避免问题复发，后续所有文章必须遵守以下规范：
- 深色背景 section 中的 h2/h3 必须显式使用
color: #ffffff； - 浅色背景 section 中的正文使用
color: #333333，标题使用color: #1a1a2e； - 发布前在深色主题下预览一次，重点检查 h2/h3 和正文段落。
关于 IT中华
IT中华（www.itzh.vip）是一个技术日记站点，记录构建、思考与持续迭代的过程。我们关注 AI、系统架构、自动化与前端细节，坚持把可复用的经验沉淀下来。
本文档同步更新至 IT中华 项目知识库，欢迎持续关注。