无障碍与伦理设计Accessible & Ethical
以 WCAG 增强级对比度为硬约束：正文 7:1、最小字号 16px、3–4px 焦点环、44px 触控区。视觉克制，但可用性优先于风格表达。
典型场景公共服务 · 医疗教育 · 政企系统
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
以 WCAG 增强级对比度为硬约束：正文 7:1、最小字号 16px、3–4px 焦点环、44px 触控区。视觉克制，但可用性优先于风格表达。
关键词
效果与动效
Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets
设计系统变量
--contrast-ratio7:1--font-size-min16px--focus-ring3-4px--touch-target44x44px--wcag-targetenhanced--keyboard-accessibletrue--sr-test-requiredtrue配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Measured high-contrast pairs (4.5:1 normal-text baseline; 7:1 enhanced target), simple primary, clear secondary, high luminosity (7:1+)
辅色 / Secondary
Symbol-based colors (not color-only), supporting patterns, inclusive combinations
强调色在页面底色上的对比度约 5.1:1，可用于正文与图标。
适用场景
适合 / Best For
- Government
- healthcare
- education
- inclusive products
- large audience
- legal compliance
- public
避开 / Do Not Use For
- None - accessibility universal
框架兼容
能力矩阵
实现要点
落地清单
- complete-page conformance tested against the chosen target,
- 7:1+ contrast checked,
- Keyboard navigation tested,
- Screen reader tested,
- Focus visible 3-4px,
- Semantic HTML used,
- Touch targets 44x44px
CSS / 技术关键词
color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer
AI 提示词
Design toward enhanced accessibility criteria; verify complete-page conformance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.