给你的页面配一套耐看的颜色

• 角色明确：背景、正文、主动作、辅助信息各有颜色和用途，强调色只给一个主动作。

• 文字可读：正文和按钮文字达到 4.5:1（大字 3:1），能用对比度数字说明。

• 两种页面一致：同一套配色在封面和表单里都读得清，错误提示不只靠红色。

适合谁

给作品展示页、课程封面或小应用配色的初学者、会做简单页面、想让页面更好读、主次更清楚的人

先修

电脑浏览器（推荐）或手机、一个要配色的页面：作品展示、课程封面或小应用都可以、任意能显示色值的取色工具（设计软件或图片编辑器自带的都行）、无须付费设计软件或专业色彩仪器

1. 1
   学习7 分钟可体验

   颜色先分工，再谈好看

   颜色先按用途分工：背景托底、正文最稳、主按钮最显眼、辅助信息轻一档；读不读得清用对比度判断（正文 4.5:1）。陪练摘要请写：我给四个角色各选了什么颜色、哪一处一开始读不清、我怎么改的。

   先试一小节 →
2. 2
   练习4 分钟

   配色练习 1 · 颜色先分工，再谈好看

   用文字记录：用了什么颜色、数字多少、改了什么、还卡在哪里。

3. 3
   学习7 分钟

   同一个颜色也有轻重

   明度是多亮多暗，主要决定对比度；饱和度是多鲜多灰，主要决定抢不抢眼，只让对比度小幅漂移。陪练摘要：我把主色调了哪两组、数字怎么变、哪一个版本用在哪里。

4. 4
   练习4 分钟

   配色练习 2 · 同一个颜色也有轻重

   用文字记录：用了什么颜色、数字多少、改了什么、还卡在哪里。

5. 5
   学习7 分钟

   让文字能被读清楚

   对比度是一个可以算的数字（1:1 到 21:1）。WCAG 2.2 AA：正文小字 4.5:1；大字（24px 以上，或约 19px 以上粗体）3:1；按钮、边框等部件和相邻颜色 3:1。陪练摘要：我的两组前景和背景色值、对比度数字、用在多大的字上。

6. 6
   练习4 分钟

   配色练习 3 · 让文字能被读清楚

   用文字记录：用了什么颜色、数字多少、改了什么、还卡在哪里。

7. 7
   学习7 分钟

   用少量强调色引导动作

   强调色像荧光笔，画多了等于没画。先定这页最想让人做的一件事，只给它强调色；次要动作降成描边或文字链接。陪练摘要：我的页面目的是什么、强调色原来在几处、留下哪一处、其余怎么降级。

8. 8
   练习4 分钟

   配色练习 4 · 用少量强调色引导动作

   用文字记录：用了什么颜色、数字多少、改了什么、还卡在哪里。

9. 9
   学习7 分钟

   把配色放回不同页面

   换结构，换的是谁压在谁上面。同一个辅助灰在白色表单上过线，压到深色封面上可能掉线；每种结构都要重算对比度，并把修法写进颜色的用法。陪练摘要：我的两种结构、发现的问题、修正前后的数字。

10. 10
    练习4 分钟

    配色练习 5 · 把配色放回不同页面

    用文字记录：用了什么颜色、数字多少、改了什么、还卡在哪里。

11. 11
    学习7 分钟

    留下一套可复用规则

    配色规则不只是色值，还要写什么时候用、什么时候不用，以及颜色以外的线索（图标、文字、位置）。错误用错误红，并配 ✕ 图标和一句说明。陪练摘要：我每个颜色的用法、不用在哪、错误怎么表达。

12. 12
    练习4 分钟

    配色练习 6 · 留下一套可复用规则

    用文字记录：用了什么颜色、数字多少、改了什么、还卡在哪里。

13. 13
    自查4 分钟

    五题概念自查
14. 14
    复盘4 分钟

    复盘：去掉或降低了哪个颜色

学习方式

先试一小节，再决定是否加入。正式学习中包含课件、练习、自查和复盘；完成后留下真实学习记录。