设计工具包

三款实用设计工具:WCAG 2.2 对比度检查器(AA 级普通正文要求 4.5:1)、提供 CSS 变量的十一阶配色生成器,以及模块化字号比例生成器。全部在浏览器中运行。

颜色对比度检查器(WCAG)

文字与背景的对比度,用亮度比来衡量,范围从 1:1 到 21:1。WCAG 2.2 在 AA 级别要求:普通文字至少 4,5:1,大号文字(24 px,或加粗的 18,66 px)至少 3:1;AAA 级别则提高到 7:1 和 4,5:1。

示例标题

这段文字展示了这组配色下的阅读效果。

对比度
14,08 : 1
正文 AA (4.5:1)通过
大号文字 AA (3:1)通过
正文 AAA (7:1)通过
大号文字 AAA (4.5:1)通过
图标与边框 (3:1)通过

配色方案生成器

选一个品牌色,得到由 50 到 950 的十一级色阶,以及它的互补色、类似色和三角配色。您可以复制每一个颜色,或把整套色阶复制成 CSS 变量。

互补色
#1CD6E3
类似色 −30°
#E31C73
类似色 +30°
#E38C1C
三角配色
#1CE329

字号比例生成器

模块化字号比例,是把一个基础字号乘以一个固定比例,得出网站里所有的字号。以基础字号 17 px、比例 1,25 为例,正文是 17 px,H4 约 33 px,H1 约 65 px。

展示字号, 81 px您的品牌
H1, 65 px您的品牌
H2, 52 px您的品牌
H3, 42 px您的品牌
H4, 33 px您的品牌
H5, 27 px您的品牌
H6, 21 px您的品牌
正文, 17 px您的品牌
小号, 14 px您的品牌

在您的浏览器中运行。您输入的内容不会发送到任何服务器。

聊聊吧?

告诉我们您的需求,我们会回复一份具体的方案,写明范围和阶段。

带来您想打破的东西。

品牌定制网站、电商,以及 AI 智能体团队。我们会以一份具体的方案回复您。

© 2026 Byte Argentina,布宜诺斯艾利斯 品牌独一无二,网站也该如此。
聊一聊