Klein's-blue的博客

记录生活，分享技术

0%

视觉与可用性

CSS 视觉与可用性（2025-2026 主流最佳实践）

1. 对比度（Contrast）—— 可访问性核心指标

WCAG 2.2 基本要求（2025-2026 仍然是主流标准）：

级别 普通文本 (小文字 < 18px / 14px bold) 大文字 (≥18px / ≥14px bold) 图形/组件边界 推荐工具
AA 4.5 : 1 3 : 1 3 : 1 必须达标（绝大多数商业项目）
AAA 7 : 1 4.5 : 1 4.5 : 1 追求极致无障碍

现代快速检查与实现方式（2025-2026 常用组合）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 1. 品牌色设计时就考虑对比度 */
:root {
  --primary: #6366f1;          /* 紫色示例 */
  --primary-text: #ffffff;
  --primary-900: #312e81;
  --text: #0f172a;
  --text-light: #64748b;
  --bg: #ffffff;
}

/* 2. 自动强制高对比度（部分场景） */
@media (forced-colors: active) {
  :root {
    --primary: CanvasText;
    --bg: Canvas;
  }
}

/* 3. 常用安全配色组合（AA 以上） */
.text-primary    { color: var(--primary); }
.bg-primary      { background: var(--primary); color: white; }
.text-on-primary { color: white; }               /* 确保对比度 ≥4.5:1 */

推荐工具（日常开发必备）：

  • WebAIM Contrast Checker
  • Stark Figma 插件
  • WAVE / axe DevTools
  • Color Contrast Analyzer

2. 可见焦点（Visible Focus）—— 永远不要只用 outline: none

2025-2026 推荐写法（符合 WCAG 2.2 Success Criterion 2.4.7 & 9.1.4.11）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 最佳实践：使用 :focus-visible（键盘操作时显示） */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* 更明显的环形焦点（常见于大厂） */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 按钮/链接等交互元素专用 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 4px var(--primary-200);
}

/* 高对比度模式友好写法 */
@media (prefers-contrast: more) {
  :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

重要原则：

  • 永远不要 outline: none 而不提供替代方案
  • 使用 :focus-visible 而不是 :focus（避免鼠标点击时出现焦点框）
  • 焦点指示器至少要有 2px 粗细 + 对比度 ≥ 3:1

3. hover / active / focus 状态一致性

现代推荐交互状态顺序与风格统一（2025-2026 主流）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 推荐的交互状态顺序与写法 */
.interactive {
  transition: all 0.15s ease;          /* 统一过渡时间 */
  background: var(--bg-neutral);
  color: var(--text);
  border: 1px solid var(--border-neutral);
}

/* 悬停（鼠标） */
.interactive:hover {
  background: var(--bg-neutral-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);         /* 轻微抬升，常见于卡片/按钮 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 按下（鼠标/触摸） */
.interactive:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  background: var(--bg-neutral-active);
}

/* 键盘焦点 */
.interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-200);
}

/* 禁用态（必须明显区分） */
.interactive:disabled,
.interactive[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

一致性建议：

  • hover → 轻微抬升 + 背景变浅/变深
  • active → 按下感（inset shadow 或 scale 微缩）
  • focus → 外环（永远用 focus-visible）
  • 所有状态保持相同 transition 时间（0.12s~0.2s）

4. 暗色/亮色模式切换（prefers-color-scheme）

2025-2026 主流实现方式（推荐组合）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 1. 使用 CSS 变量 + media query（最推荐） */
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --card: #f8fafc;
  --border: #e2e8f0;
  --primary: #6366f1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
    --card: #1e293b;
    --border: #334155;
    --primary: #818cf8;
  }
}

/* 2. 支持手动切换（最完整方案） */
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e2e8f0;
  /* ... 其他变量 */
}

[data-theme="light"] {
  /* 亮色变量 */
}

/* 3. 跟随系统 + 手动切换（JS 配合） */
html {
  color-scheme: light dark;      /* 告诉浏览器支持两种模式 */
}

常用技巧：

  • 使用 color-scheme: light dark; 自动适配 <select> 等原生控件
  • 所有颜色都尽量用 CSS 变量管理
  • 测试时使用 DevTools → Rendering → Emulate CSS prefers-color-scheme

5. 打印样式（@media print）关键点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@media print {
  /* 1. 隐藏不必要的元素 */
  nav, footer, .no-print, .sidebar, .ads {
    display: none !important;
  }

  /* 2. 优化排版 */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  a {
    text-decoration: underline;
    color: black;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }

  /* 3. 避免分页断在元素中间 */
  h1, h2, h3, table, figure {
    page-break-inside: avoid;
  }

  /* 4. 强制黑白 + 高对比 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: black !important;
    background: white !important;
  }
}

打印无障碍提示：

  • 保留重要链接（显示 URL）
  • 表格不要隐藏边框
  • 字号不要太小（推荐 11pt~14pt 正文）
  • 避免背景色（强制白底黑字）

总结：2025-2026 视觉与可用性核心口诀

  • 对比度：文本 ≥4.5:1，大文字 ≥3:1
  • 焦点：永远 :focus-visible + 3~4px 外环
  • 交互：hover抬升 → active按下 → focus外环
  • 暗色模式：CSS变量 + prefers-color-scheme + 手动切换
  • 打印：隐藏导航/广告 + 显示链接 + 黑白高对比 + 防分页断裂