Tailwind默认调色板不满足WCAG 2.1 AA/AAA对比度要求，因其色阶按视觉均匀性而非对比度设计；例如text-gray-400在bg-white上仅约1.8:1，远低于AA级正文最低4.5:1标准，必须手动组合或借助插件生成合规配色方案。
直接说结论：Tailwind 默认的 colors 调色板本身不满足 WCAG 2.1 AA/AAA 对比度要求，必须手动调整文本/背景组合，或用插件生成可访问配色方案——不能只靠 text-gray-700 这类默认类名就认为达标。
为什么 Tailwind 的默认 color palette 不够无障碍？
Tailwind 的 gray-50 到 gray-900 等色阶是按视觉均匀性设计的，不是按对比度设计的。比如 text-gray-400 在 bg-white 上的对比度只有 ~1.8:1，远低于 WCAG 要求的 4.5:1（正文）或 3:1（大号字）。实测 text-gray-500 才勉强达到 4.5:1，但已接近语义模糊边界。
常见错误现象：
– 页面在 Chrome 的 Lighthouse 检测中报 “Color contrast is insufficient”
– 视力障碍用户反馈文字“发灰看不清”
– 设计师给的 Figma 色值（如 #6b7280）直接塞进 tailwind.config.js 却没验证对应文本/背景组合
如何在 tailwind.config.js 中定义可访问的文本/背景对？
不要只改单个颜色，要定义成“可用组合”。推荐用 plugin + addBase 注入带对比度保障的工具类，或直接扩展 theme.extend.colors 并约束使用范围：
立即学习“前端免费学习笔记（深入）”；
- 用
text-slate-800替代text-gray-700（Slate 调色板更偏深灰，slate-800在白底上对比度 ≈ 11:1） - 禁用
text-gray-300～text-gray-400类名：在purge或content配置里排除它们，或用 ESLint 插件@atomico/eslint-plugin-tailwindcss拦截 - 为关键状态色（如 error、success）强制指定 WCAG 合规值：
error: { DEFAULT: '#dc2626', // red-600 → 对比度 5.3:1 vs white foreground: '#ffffff' // 显式声明前景色，避免误用 text-red-200 }
如何自动化验证 Tailwind 类名组合是否达标？
靠人眼或手动查 contrast ratio 不现实。必须集成到开发流程：
- 用
axe-core+ Cypress 或 Playwright，在 CI 中跑cy.checkA11y()，重点检查[class*="text-"]和[class*="bg-"]组合 - 本地开发时启用 VS Code 插件
Color Contrast Analyzer，悬停在text-blue-500 bg-white上直接显示对比度数值 - 在
tailwind.config.js中加一层运行时校验（仅 dev）：const { isContrastSufficient } = require('color-contrast-checker'); // … 在 theme.extend.colors 后校验常用组合 if (process.env.NODE_ENV === 'development') { const fail = !isContrastSufficient('#3b82f6', '#ffffff'); // blue-500 vs white if (fail) console.warn('⚠️ text-blue-500 on bg-white fails AA'); }
真正难的不是配色本身，而是让团队所有人——设计师、前端、QA——都清楚哪些 text-/bg- 组合是“被批准的”。把可访问性当成 CSS 类名的合约，而不是事后补救。否则哪怕你写了 text-slate-900，别人照样会写 text-gray-400。
