卡片设计需满足WCAG AA对比度≥4.5:1，深色背景配浅灰文字、浅色卡片用深灰非纯黑文字；强调色限1种且语义明确；卡片组用中性间隔色而非留白或边框；深色模式须独立定义变量并加大圆角。
卡片背景色与文字色必须满足 WCAG AA 对比度要求
很多设计师直接套用品牌主色做卡片背景，结果文字一放上去就看不清。浏览器开发者工具里用 Lighthouse 或 axe DevTools 扫一下，contrast ratio 低于 4.5:1 就算不达标——尤其对小号字体或灰色文字。别信“看着还行”，要测。
实操建议：
- 深色背景（如
#1a1a1a）配浅灰文字（#e0e0e0），别用纯白（#ffffff），刺眼且易反光 - 浅色卡片（如
#f8f9fa）用深灰文字（#212529），避开#000000——印刷感太重，网页上反而发虚 - 用在线工具验证：
webaim.org/contrast-checker，输进你的background-color和color值，它会标出是否通过 AA/AAA
卡片内强调色不宜超过 1 种，且必须有明确语义
看到别人在卡片里加红点、蓝标、绿徽章，就跟着堆颜色？容易让视觉焦点打架。强调色不是装饰，是信号：比如 status-badge 用绿色表示“已发布”，红色表示“草稿”，那就固定下来，不能今天红=成功，明天红=错误。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 同一张卡片里出现
.tag-primary、.tag-success、.tag-warning全部激活——用户根本分不清哪个才是重点 - 强调色和背景色明度差太小，比如
#6c757d放在#e9ecef上，肉眼几乎看不出区别 - 用色没考虑色觉障碍者，比如红/绿混用作状态区分，
color-blindness-simulator.github.io可模拟查看
卡片组之间用中性间隔色，而不是留白或边框
多个卡片垂直排列时，靠 margin-bottom 留白，或加 border-bottom 分隔，都容易显得轻飘或机械。更稳妥的做法是统一加一层薄薄的间隔背景，比如所有卡片外层包一个 .card-grid，再给每张卡片设 background-color: #ffffff，而 .card-grid 本身设 background-color: #f5f6f7——这样卡片之间自然形成柔和过渡，视觉重量也更稳。
参数差异注意点：
- 不要用
rgba(0,0,0,0.05)这类半透黑做间隔色，不同设备渲染差异大，iOS 上可能偏灰，安卓上偏青 - 避免用
box-shadow: 0 1px 0 #e0e0e0模拟分隔线——阴影在高 DPI 屏幕上模糊，且无法选中、打印时消失 - 如果卡片需要悬停效果，确保悬停态的背景变化仍能与间隔色保持层次，比如悬停时从
#ffffff→#f8f9fa，而不是跳到#e9ecef
深色模式下卡片色彩不能简单反转
把浅色模式的 #ffffff 卡片换成 #121212，文字从 #212529 换成 #e0e0e0，看起来像“完成了”，其实埋了坑：深色模式下，纯黑背景会让卡片边缘发虚，内容块缺乏呼吸感；同时，过度依赖系统级 @media (prefers-color-scheme: dark) 容易被用户手动覆盖，导致样式错乱。
更可靠的做法：
- 定义一套独立的深色变量，比如
--card-bg: #1e1e1e、--card-border: #333、--text-primary: #f0f0f0，而非硬写死十六进制值 - 卡片圆角在深色模式下适当加大（如从
8px→12px），增强“浮起”感，弥补暗背景下景深缺失 - 慎用图片背景的卡片——深色模式下图片未适配时，常出现过曝或死黑，优先用 CSS 渐变或 SVG 图案替代
