这是一段用于检查正文可读性的说明文字，包含链接色、弱化文本和按钮状态。
语义色
主题预览已生成。
组件预览
项目名称
| 检查项 | 对比度 | 结果 |
|---|---|---|
| 正文 / 背景 | 13.64 : 1 | 通过参考 |
| 背景 / 主色按钮 | 4.61 : 1 | 通过参考 |
| 文字 / 主色 | 2.96 : 1 | 需复查 |
| 强调色 / 背景 | 1.69 : 1 | 需复查 |
:root[data-theme="light"] {
--color-text: #172B46;
--color-background: #F7FAFE;
--color-primary: #136CE9;
--color-secondary: #6B7D93;
--color-accent: #F5B84B;
}
界面主题预览
分别设置浅色和深色主题的文字、背景、主色、次色与强调色，预览按钮、表单和卡片效果，导出 CSS 或 JSON，方便比较界面主题及组件配色。
使用说明
三步完成操作
- 01 · 输入语义色
分别填写文字、背景、主色、次色和强调色。
- 02 · 切换主题
浅色与深色独立预览，避免一套颜色直接反转造成低对比。
- 03 · 检查组件
查看按钮、表单、卡片和焦点提示，并导出 CSS 或 JSON。
常见问题
使用前先了解这些
这些检查等于整站 WCAG 合格吗？
不等于。这里只检查输入色在示例组件中的几组对比关系，真实页面仍需逐组件核对。
为什么按钮文字有时用背景色？
示例按钮默认使用背景色作为按钮文字，帮助快速查看主色承载可读文字的能力。
深色主题会自动生成吗？
首版不自动推导深色主题。请手动填写深色主题色值，减少不可控的对比问题。
CSS 可以直接使用吗？
可以作为语义变量起点；实际项目还要映射到状态、边框、阴影和禁用态。