404页面CSS必须内联，禁用外部文件以防路径错误导致白屏；采用系统字体、内联SVG、WCAG 2.1 AA对比度≥4.5:1、响应式@media嵌入style块、绝对路径链接、可访问SVG语义化。
404页面的CSS必须内联，不能用
外部CSS文件在404路径下极大概率加载失败——比如访问/blog/post/xxx时触发404，浏览器会尝试从/blog/post/styles.css加载样式，而这个路径本身也404。结果就是白屏或裸文本。
实操建议：
-
<style>标签直接写在<head>里，控制总大小在1KB以内 - 字体栈优先用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 避免
@import、url()引用字体或图片，这些都会触发额外HTTP请求 - 背景图改用内联SVG或data URI，例如
background-image: url("data:image/svg+xml,...")
文字对比度和可读性有硬性要求
WCAG 2.1 AA标准要求正文文字与背景对比度≥4.5:1。很多“好看”的渐变背景（比如浅灰配淡紫）实际不达标，屏幕阅读器用户或弱视用户可能根本看不到
内容。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
#eee文字配#fff背景 → 对比度仅1.5:1，不可用 - 用Canvas或SVG动态画“404”但没提供
<h1>文本 → 屏幕阅读器读不到核心信息 - 加了CSS动画但没设
prefers-reduced-motion: reduce兜底 → 晕动症用户不适
验证工具推荐：webaim.org/contrastchecker
响应式布局要覆盖所有设备宽度，但别依赖媒体查询外链
移动端用户更可能因链接跳转错误进404页，所以max-width: 768px以下必须保证按钮可点、文字可读。但媒体查询本身没问题，问题出在它常被写在外部CSS里。
正确做法：
- 把
@media规则直接塞进<style>块中，不拆分 - 按钮用
padding和min-width保障点击区域≥44×44px - 禁用
transform: scale()缩放文字——会破坏可访问性计算 - 所有
<a>链接用绝对路径：href="/"而非href="../"或href="./"
SVG图标可以加，但得是内联且带语义
用<img src="404-icon.svg">又引入一次HTTP请求，失败概率高。内联SVG能避免这个问题，但必须补上可访问性支持。
关键点：
- SVG必须包裹在
<svg>标签里，不能只贴base64字符串 - 加
aria-hidden="true"（如果只是装饰）或role="img"+<title>（如果是主视觉） - 不要给SVG加
width/height内联样式，用viewBox和CSS控制尺寸 - 动画用CSS
@keyframes，不用<animate>标签——部分旧浏览器不支持
<style>里的那几百字节，就是用户能看到的全部。 
