GitHub Copilot HTML/CSS 配色风格指南：基于 60-30-10 法则与 WCAG 对比度的可访问设计规范
【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot
本篇技术指南以开源仓库 awesome-copilot 中的 HTML CSS Style Color Guide 指令文件 为骨架，系统讲解如何让 GitHub Copilot 在生成浏览器渲染的 HTML/CSS 时遵循一套"可访问、专业、克制"的配色规范：从色彩体系分类、60-30-10 配色法则，到背景色、文字色的可用与禁用清单，再到渐变的最佳实践，并结合仓库内真实扩展的样式源码，印证这些规则在工程中的落地方式。读完本文，你将能把这套规则安装进自己的项目，让 Copilot 生成的界面配色不再"翻车"，并满足 WCAG 对比度可访问性要求。
一、这份指令文件是什么，以及如何使用
该指令是 awesome-copilot 仓库instructions/目录下的一个 Copilot 自定义指令（custom instruction），其 Front Matter 明确了它的生效边界：
description: 'Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs.' applyTo: '**/*.html, **/*.css, **/*.js'- description：说明这是一套面向 HTML 元素的配色与样式规则，目标是"可访问、专业的设计"；
- applyTo：当工作区中涉及 HTML、CSS、JS 文件（浏览器渲染相关）时，规则自动参与 Copilot 的决策。
按 docs/README.instructions.md 的说明，在 VS Code / VS Code Insiders 中安装自定义指令有两种方式：点击指令列表中的Install按钮一键安装，或下载*.instructions.md文件手动加入项目的指令集合。要使其生效，可将内容复制到工作区的.github/copilot-instructions.md，或作为任务级指令放入.github/instructions/文件夹（例如.github/instructions/my-color-rules.instructions.md），之后 Copilot 在对应文件类型上会自动应用这些规则。
文档开头有一个容易被忽略但非常重要的总则：颜色名称代表其对应色相范围的完整光谱——例如"blue"不止指纯蓝，还包括 navy（藏青）、sky blue（天蓝）等。理解这一点是正确执行后续所有规则的前提，因为指令中的"冷色""热色"都是按色相家族而非单一色值来判定的。
二、色彩体系基础：四类颜色的定义与角色
指令首先建立了一套统一色彩词汇表，方便 Copilot 在对话和生成中与开发者对齐语义：
| 类别 | 涵盖颜色 | 典型用途 |
|---|---|---|
| Hot Colors（热色） | 橙、红、黄 | 强调、告警、紧迫感 |
| Cool Colors（冷色） | 蓝、绿、紫 | 主色、次级色、大面积背景 |
| Neutral Colors（中性色） | 灰及灰度变化 | 文字、边框、辅助元素 |
| Binary Colors（二值色） | 黑与白 | 文字与背景的极端端点 |
这套分类的核心思想是给每种颜色分配明确的职责：冷色负责"撑场面"（大面积主视觉），中性色负责"安静地工作"（文字与结构），热色只在需要被注意时出场（警告、错误），而黑白色作为对比的边界存在。仓库中的实际代码完全遵循了这种分工，例如 extensions/git-worktree-explorer/public/styles.css 将颜色定义为语义化 CSS 变量：
:root { --surface-muted: color-mix(in srgb, var(--background-color-default, #fff) 96%, var(--text-color-default, #1f2328) 4%); --accent: var(--true-color-blue, #0969da); --success: #1a7f37; --warning: #9a6700; --danger: var(--true-color-red, #cf222e); }注意这里热色（--warning、--danger）被明确限定为"状态色"，而大面积背景、表面色全部使用中性色与浅冷色构成——这正是下面 60-30-10 法则的直接体现。
三、60-30-10 配色法则：让配色有比例可循
指令的核心方法是经典的60-30-10 法则，它给 Copilot（也给人类设计师）提供了一个可量化、可检查的配色比例：
- Primary Color（主色）：60%，使用冷色或浅色；
- Secondary Color（次级色）：30%，使用冷色或浅色；
- Accent（强调色）：10%，使用互补的热色。
该法则适用于所有图形设计元素——背景、按钮、卡片等。它的价值在于防止两种常见失控：要么通篇一种颜色导致单调，要么颜色数量过多导致视觉噪音。60% 的主色建立基调，30% 的次级色支撑信息层级，10% 的强调色只在关键交互点（如主按钮、选中态、链接）出现，让"注意力"成为一种稀缺资源。
仓库中 extensions/chat-cards/assets/canvas.html 的样式注释几乎逐字复述了这条规则：
/* Card theme for the Chat Cards deck. Palette: 60% light cool primary surfaces, 30% secondary cool tones, 10% accent, dark neutral text on light backgrounds. The dark palette is applied via>:root { --surface-raised: color-mix(in srgb, var(--background-color-default, #fff) 92%, var(--true-color-blue, #0969da) 8%); --surface-muted: color-mix(in srgb, var(--background-color-default, #fff) 96%, var(--text-color-default, #1f2328) 4%); } body { background: var(--background-color-default, #fff); color: var(--text-color-default, #1f2328); }用color-mix()以极低比例混合出"带一点冷色/中性色倾向"的表面色，比硬编码#f7f7f7之类更细腻，也更贴合"浅色、柔和中性"的背景推荐。
2. 深底浅字的暗色主题（chat-cards/assets/canvas.html）
:root[data-theme="dark"] { --mcc-bg-a: #161a20; --mcc-bg-b: #12161b; --mcc-surface: #1d232b; --mcc-text: #e8edf2; /* 近白文字 */ --mcc-muted: #9aa7b4; }暗色主题下文字切换为近白色系#e8edf2（落在指令推荐的#ffffff到#f0f2f3区间附近），背景为深冷色而非纯黑——这正是"近白色文字 + 深色背景"配对的正确姿势，同时保留了品牌冷色基调。
3. 焦点可见性（可访问性的最后一公里）
颜色规范不能只停留在"静态配色"。git-worktree-explorer 的样式同时保证了键盘焦点可见：
button:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--color-focus-outline, #0969da); outline-offset: 2px; }对应 WCAG 2.4.7（Focus Visible，AA 级）——用高对比的冷色 outline 替代浏览器默认样式，与本文"高对比组合"的推荐方向一致。
九、落地自检清单
将上面的规则压缩成一条可在代码评审时逐项打勾的检查表，便于团队和 Copilot 快速执行：
- 背景色为白/米白、浅冷色或柔和中性色；没有紫/品红/红/橙/黄/粉等热色大面积打底；
- 配色遵循 60-30-10：主色 60%（冷/浅色）、次级色 30%（冷/浅色）、强调色 10%（互补热色）；
- 文字为深中性色（如
#1f2328、#24292f）配浅背景，或近白色（#ffffff–#f0f2f3）配深背景；没有黄/粉文字、浅底浅字或深底深字； - 正文对比度 ≥ 4.5:1，大号文字 ≥ 3:1，UI 组件与图形 ≥ 3:1（参考 a11y.instructions.md）；
- 颜色不作为传达信息的唯一手段（警告需伴随图标或文字，参考 WCAG 1.4.1）；
- 热色仅用于告警/错误/紧迫场景，且局限于小面积强调；优先考虑图标或加粗文字替代；
- 渐变色差极小、同一色系、无冷暖混搭，背景优先线性渐变；
- 未出现亮紫/品红、亮粉/霓虹、高饱和热色等低质感颜色。
十、结语：让配色规范成为 Copilot 的"默认审美"
html-css-style-color-guide.instructions.md的价值不在于罗列几种颜色，而在于把一套可执行的审美与可访问性约束注入 Copilot 的生成决策：冷色做基调、中性色做骨架、热色做信号、对比度做底线、渐变做层次。当它与仓库中的 a11y.instructions.md（WCAG 2.2 AA 标准）配套使用时，就形成了一套从"配色比例"到"可量化对比度"的完整约束链。开发者只需将指令安装到.github/copilot-instructions.md或.github/instructions/目录，即可在后续每一次 HTML/CSS 生成中持续受益。文中引用的 chat-cards 与 git-worktree-explorer 等仓库源码，则是这套规则从"指令"走向"真实产品"的最佳注脚——这也是 awesome-copilot 社区"Instructions 驱动编码质量"理念的一个缩影。
【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
