2. 🎨 色彩 Colors ★★☆☆☆
🌏 Web 网页规范
- 色彩系统: HSL / RGB / HEX 格式
- 可访问性: WCAG 2.1 对比度 (AA 4.5:1 / AAA 7:1)
- 主题实现: CSS 变量动态切换
- 广色域支持: 主要是 sRGB，高阶支持 P3
📱 App 移动端规范
- 色彩系统: Asset Catalog / ARGB 格式
- 可访问性: 系统级高对比度检测与色彩过滤
- 主题实现: Native 皮肤包 / XML Theme 覆盖
- 广色域支持: 深度支持 Display P3 宽色域
💡 什么是 WCAG 2.1 可访问性标准？
WCAG (Web Content Accessibility Guidelines)，即《网页内容无障碍指南》，是由 W3C 制定的全球通用标准。版本 2.1 旨在确保残障人士（如视力障碍、色盲、阅读障碍或认知障碍用户）能够平等无障碍地浏览网页。
为什么要遵循该标准？
- 消除数字鸿沟：帮助色盲（约占男性的 8%）、低视力及老年人群清晰阅读屏幕内容，提升社会包容性。
- 保障最低可读性：设定对比度硬性红线（普通文本 4.5:1 / AA 级，大文本 3:1），即使在强光折射、低亮度屏幕等日常恶劣环境下，也能确保基本识别率。
- 法律合规与 SEO 友好：在许多国家，企业网站未达 WCAG 2.1 AA 级可能面临诉讼风险；同时，符合无障碍标准的页面也更易于搜索引擎收录和评分。
网页端遵循 WCAG 2.1 可访问性标准，前景色与背景色对比度需至少达到 4.5:1 (AA 级)，采用 CSS 变量与 HSL 调色系统实现多套色彩主题无缝切换。
App 端高频使用系统原生语义色（如 iOS systemBackground），在深色模式下优先适配 OLED 纯黑 (#000000) 以降低屏幕能耗，并适配 Android Material You / iOS AccentColor 动态配色系统。
LIVE PLAYGROUND: HSL 动态调色与 AA 级可读性自动分析
滑动调整背景 HSL 参数，查看前景色对比度系数分析
https://web.meta-ui.edu/colors
动态文本色彩测试
拖动左侧滑块，前景色将根据对比度安全公式自动切换深浅色。
渐变背景框
🔍 推荐搭配: 白色 | 比值: 4.8:1
(AA 级安全)
📋 大模型统一 Prompt (LLM Prompt)