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, **/*.jsdescription说明这是一套面向 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-themedark] { --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, [tabindex0]:focus-visible { outline: 2px solid var(--color-focus-outline, #0969da); outline-offset: 2px; }对应 WCAG 2.4.7Focus VisibleAA 级——用高对比的冷色 outline 替代浏览器默认样式与本文高对比组合的推荐方向一致。九、落地自检清单将上面的规则压缩成一条可在代码评审时逐项打勾的检查表便于团队和 Copilot 快速执行背景色为白/米白、浅冷色或柔和中性色没有紫/品红/红/橙/黄/粉等热色大面积打底配色遵循 60-30-10主色 60%冷/浅色、次级色 30%冷/浅色、强调色 10%互补热色文字为深中性色如#1f2328、#24292f配浅背景或近白色#ffffff–#f0f2f3配深背景没有黄/粉文字、浅底浅字或深底深字正文对比度 ≥ 4.5:1大号文字 ≥ 3:1UI 组件与图形 ≥ 3:1参考 a11y.instructions.md颜色不作为传达信息的唯一手段警告需伴随图标或文字参考 WCAG 1.4.1热色仅用于告警/错误/紧迫场景且局限于小面积强调优先考虑图标或加粗文字替代渐变色差极小、同一色系、无冷暖混搭背景优先线性渐变未出现亮紫/品红、亮粉/霓虹、高饱和热色等低质感颜色。十、结语让配色规范成为 Copilot 的默认审美html-css-style-color-guide.instructions.md的价值不在于罗列几种颜色而在于把一套可执行的审美与可访问性约束注入 Copilot 的生成决策冷色做基调、中性色做骨架、热色做信号、对比度做底线、渐变做层次。当它与仓库中的 a11y.instructions.mdWCAG 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），仅供参考