无障碍达标不能仅依赖默认类名，因tailwind默认调色板未按对比度设计；text-gray-400与bg-white对比度仅约1.8:1，远低于wcag aa级4.5:1要求；应使用经验证的成对组合如text-slate-800/bg-white（≈11:1），并在开发流程中嵌入自动校验。
不能只靠 text-gray-700 或 bg-blue-100 这类默认类名就认为无障碍达标——Tailwind 默认调色板根本没按对比度设计，必须重定义“可用组合”。
为什么直接用 text-gray-400 + bg-white 会失败
这是最常踩的坑：视觉上“看起来还行”，但实测对比度仅约 1.8:1，远低于 WCAG AA 级正文最低要求 4.5:1。Lighthouse 报错、视力障碍用户反馈“发灰看不清”，根源都在这里。
-
text-gray-500在bg-white上 ≈4.5:1，勉强达标，但语义已模糊（接近禁用态） -
text-slate-800在bg-white上 ≈11:1，更安全，且 Slate 调色板比 Gray 更偏深灰，语义更清晰 - 别迷信数字越大越“深”——
gray-900是黑，但slate-800才是真正兼顾可读性与中性气质的正文黑
在 tailwind.config.js 中定义合规的文本/背景对
不是单改一个颜色，而是锁定“成对可用”的组合。推荐用 theme.extend.colors + 显式声明前景色：
- 状态色必须带
foreground字段：error: { DEFAULT: '#dc2626', foreground: '#ffffff' }，避免误用text-red-200 - 禁用高危类名：在
content配置里排除text-gray-300～text-gray-400，或用 ESLint 插件@atomico/eslint-plugin-tailwindcss拦截 - 中性色优先用
slate替代gray：slate: { 50: '#f8fafc', 700: '#1e293b', 800: '#0f172a' }，text-slate-700在白底上天然达标
如何验证你写的组合真能过 WCAG
手动查对比度数值不现实，必须嵌入开发流程：
- 本地开发：VS Code 安装插件
Color Contrast Analyzer，悬停在text-blue-500 bg-white上直接显示当前对比度 - CI 流程：用
axe-core+ Playwright，在测试中跑page.accessibility.snapshot()，过滤含text-和bg-的元素 - 开发时校验（仅 dev）：
isContrastSufficient('#3b82f6', '#ffffff')返回true才允许生成该工具类
真正难的不是写几行配置，而是让每个设计师、前端、QA 都清楚：颜色不是“选一个看着顺眼的”，而是“选一对被验证过的”。否则改完配置，UI 库里一堆 text-gray-400 还在偷偷上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
