3、核心要素识别：色彩、字体、图标、布局、图片等视觉元素的合规性关键点

视觉设计合规性检验并非对美学风格的评判，而是对设计决策中“可感知、可理解、可操作、可兼容”四大维度的系统核查。色彩、字体、图标、布局与图片是构成视觉界面的五大基础要素，每一项都承载着特定的信息传达功能与用户交互责任。合规性检验的核心逻辑是：每一个视觉元素都必须有明确的语义指向、足够的感知对比度、稳定的呈现一致性，并且不因用户差异或环境差异而丢失其功能价值。本章将逐一拆解五大要素的合规关键点，并给出可直接落地的检验方法与判断标准。

上图展示了视觉合规性检验的整体框架：五大要素并非孤立存在，而是通过“可感知、可理解、可操作、可兼容”四个维度相互关联。例如，色彩对比度不足会同时影响“可感知性”和“可理解性”；图标缺乏替代文本则同时违反“可感知性”与“可操作性”。因此，合规性检验必须采用“单项核查 + 交叉验证”的双层策略。

3.1 色彩合规性：对比度、色盲安全与语义一致性

核心原理

色彩在界面中承担三种核心职能：信息区分（如状态标签）、交互暗示（如按钮主次）、品牌传达（如企业色）。合规性要求色彩不能是唯一的编码通道——即任何仅通过颜色传达的信息，必须同时提供文字、图标或纹理等冗余表达。此外，色彩对比度必须满足可读性底线，且色盲用户（约占人口8%）不能因色相混淆而丢失信息。

判断方法与操作流程

1. 对比度检测：使用 WebAIM Contrast Checker 或 axe DevTools 检测前景色与背景色的对比度比值。正文文本需 ≥ 4.5:1，大号文本（≥18pt 或 14pt 加粗）需 ≥ 3:1，图形元素（图标、边框）需 ≥ 3:1。
2. 色盲模拟：使用 Color Oracle 或 Stark 插件模拟红绿色盲、蓝黄色盲和全色盲视图，确认信息不因色相缺失而丢失。
3. 语义映射检查：列出所有状态色（成功、警告、错误、信息），确认每种颜色同时配有图标或文字标签。
4. 品牌色合规：品牌色用于装饰性元素时不受对比度限制，但用于文本或关键图形时必须满足对比度要求。

3.2 字体合规性：可读性、语义层级与国际化适配

核心原理

字体合规性包含三个层面：物理可读性（字号、字重、行高是否满足阅读舒适度）、语义层级（标题/正文/辅助信息的视觉区分是否清晰）、技术兼容性（字体文件是否支持所需字符集，是否允许用户缩放）。合规的字体系统应保证在 200% 缩放下内容不丢失、不重叠。

判断方法与操作流程

• 最小字号核查：正文不小于 12px（建议 14-16px），辅助信息不小于 11px。若目标用户包含老年人，正文建议 ≥ 16px。
• 行高与字距：行高建议为字号 1.4-1.6 倍；中文正文行高不低于 1.5 倍。字距不宜过紧，避免笔画粘连。
• 层级对比：标题与正文的字号差至少 2 级（如 16px vs 20px），且配合字重或颜色变化，不能仅靠字号区分。
• 缩放测试：在浏览器中设置 200% 缩放，检查文本是否溢出容器、是否被截断、是否与相邻元素重叠。
• 字体子集检查：确认使用的 web font 包含中文、数字、拉丁字符及特殊符号（如 ©、®、™）的完整字形。

案例拆解：金融 App 字体合规整改

背景与约束：某银行 App 面向 45 岁以上用户占比 60%，原设计使用 11px 辅助文字标注利率信息，行高 1.2 倍，且标题与正文仅靠字号差 2px 区分。

初始现象：用户反馈“字太小看不清”“分不清哪里是重点”。合规检测发现：11px 文字在部分 Android 设备上渲染模糊，行高过密导致相邻行笔画重叠。

分析判断：问题根源在于设计稿基于桌面端视觉习惯，未考虑移动端实际渲染密度和老年用户视觉能力。合规标准要求正文 ≥ 14px，辅助信息 ≥ 12px，行高 ≥ 1.5 倍。

操作步骤：① 将利率标注从 11px 提升至 13px，并加粗至 500 字重；② 正文行高从 1.2 调整为 1.55；③ 标题字号从 16px 提升至 20px，并增加 600 字重；④ 在 200% 缩放下进行全页面走查，修复 3 处文本溢出。

结果对比：整改后，用户投诉率下降 42%，关键信息查找时间平均缩短 1.8 秒。风险提示：字号增大导致单屏信息密度下降，需配合布局调整避免滚动过长。

3.3 图标合规性：语义清晰、触达尺寸与替代文本

核心原理

图标是界面中的“视觉速记符号”，其合规性要求包括：语义自明性（用户能否不借助文字理解含义）、物理可触达性（点击区域是否足够大）、技术可访问性（屏幕阅读器能否正确朗读图标含义）。图标不能作为唯一的信息传达方式，必须配合文字标签或替代文本。

判断方法与操作流程

1. 触达尺寸检测：可点击图标的实际触达区域（含 padding）不得小于 44×44 CSS 像素（iOS HIG 标准）或 48×48（Material Design 标准）。
2. 替代文本检查：使用屏幕阅读器（如 NVDA、VoiceOver）遍历页面，确认每个功能性图标都有 aria-label 或 alt 文本；纯装饰性图标应设置 aria-hidden="true"。
3. 语义一致性：同一图标在全站范围内必须代表同一含义，不能出现“齿轮”既表示“设置”又表示“高级选项”的歧义。
4. 对比度与清晰度：图标线条与背景的对比度 ≥ 3:1，且图标在 16px 和 32px 两种尺寸下均能清晰辨认。

3.4 布局合规性：焦点顺序、响应式与键盘可达性

核心原理

布局合规性关注的是信息架构的秩序感与交互路径的完整性。合规的布局应保证：键盘用户能够按逻辑顺序遍历所有交互元素；屏幕阅读器用户的朗读顺序与视觉顺序一致；在 320px 至 1280px 的视口范围内，内容不丢失、不重叠、不横向滚动。

判断方法与操作流程

• 键盘遍历测试：仅使用 Tab 键和 Shift+Tab 遍历页面，检查焦点是否按视觉顺序移动，是否出现焦点“卡死”或“跳过”现象。
• 焦点可见性：当前焦点元素必须有明显的视觉指示（如 2px 蓝色描边），不能仅靠浏览器默认样式。
• 响应式断点检查：在 320px、375px、768px、1024px 宽度下分别检查布局，确认无内容溢出、无横向滚动条。
• 缩放适配：在 200% 缩放下，检查布局是否退化为单列、文字是否被截断、交互元素是否仍然可用。
• DOM 顺序与视觉顺序一致性：使用浏览器开发者工具检查 DOM 顺序，确认与视觉呈现顺序一致。

案例拆解：企业后台管理系统布局整改

背景与约束：某 SaaS 后台的侧边栏导航在移动端被折叠为汉堡菜单，但展开后焦点顺序混乱——先跳到内容区，再回到菜单项。键盘用户无法高效导航。

初始现象：使用 Tab 键遍历时，焦点从汉堡按钮直接跳到页面主内容，侧边栏菜单项被完全跳过。屏幕阅读器朗读顺序为“按钮、表格、菜单”，与视觉顺序“按钮、菜单、表格”不一致。

分析判断：原因是汉堡菜单展开时使用了 position: fixed 定位，但 DOM 顺序中菜单仍位于内容之后。键盘导航遵循 DOM 顺序，而非视觉顺序。

操作步骤：① 调整 DOM 结构，将侧边栏菜单移到主内容之前；② 为汉堡按钮添加 aria-expanded 状态；③ 菜单展开时，将焦点自动移至第一个菜单项；④ 在 320px 宽度下测试，确认无横向滚动。

结果对比：整改后，键盘用户完成“从首页到报表页”的导航耗时从 28 秒降至 9 秒。风险提示：DOM 调整可能影响现有 CSS 选择器，需同步更新样式绑定。

3.5 图片合规性：替代文本、清晰度与信息冗余

核心原理

图片合规性包含三个维度：信息可替代性（图片承载的信息是否通过替代文本传达）、物理可感知性（图片是否足够清晰、是否因压缩而失真）、内容安全性（图片是否包含可能引发癫痫的闪烁内容）。合规的图片策略是：图片是信息的增强，而非唯一载体。

判断方法与操作流程

1. 替代文本核查：信息性图片必须有 alt 文本，描述内容与功能；功能性图片（如图标按钮）的 alt 应描述操作结果；装饰性图片的 alt 必须为空。
2. 清晰度检测：在 200% 缩放下检查图片是否模糊、锯齿或出现伪影。关键信息图（如数据图表）应使用 SVG 或 Canvas 而非位图。
3. 闪烁检测：使用 PEAT（Photosensitive Epilepsy Analysis Tool）检测图片或动画是否包含每秒 3 次以上的闪烁。
4. 版权合规：确认图片使用已获得授权，且符合平台内容政策。

3.6 交叉验证与整体走查

单项要素合规不代表整体合规。五大要素之间存在耦合关系：色彩对比度不足会影响图标和图片的可读性；字体缩放可能导致布局溢出；图标替代文本缺失会破坏键盘导航的语义完整性。因此，完成单项核查后，必须进行交叉验证：

• 色彩 × 字体：在满足对比度的前提下，检查文字是否因字重过细或字号过小而仍然难以辨认。
• 布局 × 图片：在 200% 缩放下，检查图片是否因容器尺寸变化而变形或裁切。
• 图标 × 色彩：色盲模拟下，检查图标是否因颜色缺失而失去辨识度。
• 字体 × 布局：使用系统字体替换 web font 后，检查布局是否因字体度量差异而错位。