我需要多少对比度才能通过 WCAG AA？
正常文字需要 4.5:1 的对比度；大号文字（18pt 以上，或 14pt 粗体）需要 3:1。WCAG 色彩对比检查器会同时显示这两个阈值，以及你当前的通过或未通过状态。
集合
设计与色彩工具
检查色彩对比度是否符合 WCAG、模拟色盲，并计算宽高比——免费的设计小工具，完全在你的浏览器中运行。
此分类共有 3 个工具
← 首页为什么有这个集合
具备无障碍又比例得当的视觉，从正确的数字开始。这个集合把设计师、开发者与内容创作者用来检查色彩无障碍、模拟视觉状况并确定正确比例的 TeaFun 工具放在一起。
常见用途
- 在交付一个设计之前，先确认正文与其背景达到 WCAG AA 的对比度。
- 透过绿色盲与红色盲预览一组配色，确保状态色彩不是唯一传达意义的东西。
- 在裁剪或导出之前，把图像或视频画面锁定为干净的 16:9 或 4:3 比例。
这个集合包含哪些工具
三个用来把设计背后数字弄对的工具：一个 WCAG 对比检查器、一个色盲模拟器，以及一个宽高比计算器。对比检查器接受一个前景色与一个背景色，并对照 WCAG AA 与 AAA 阈值报告对比度，让你不必猜测就知道文字是否易读。色盲模拟器近似呈现一组配色在常见色觉缺陷者眼中的样子。宽高比计算器则在你缩放或裁剪时维持正确比例。它们是小而专注的工具——属于你在设计接近尾声时做的检查，而不是你用来创作的画布。
如何使用这个集合
只要文字落在有颜色或图片的背景上，就用对比检查器：输入两个颜色，确认对比度对正常文字至少达到 4.5:1，对大号或粗体文字至少达到 3:1。任何由颜色传达意义的东西——一张图表、一组状态徽章、一个表单错误状态——都用色盲模拟器跑一遍，并确保拿掉颜色后信息仍然成立，毕竟有相当一部分用户有某种色觉缺陷。当你需要在不变形的情况下缩放时，就用宽高比计算器：输入一个尺寸与目标比例，它会算出另一个尺寸。
为什么这些检查很重要
无障碍与比例都很容易光凭肉眼就判断错。在你校正过的显示器上看起来没问题的配色，在阳光下的手机上可能就过不了对比；对你而言清楚易读的配色，若颜色是唯一的线索，对色盲用户来说可能就完全失效。WCAG 对比阈值之所以存在，正是因为人对对比的判断并不可靠。比例同样重要：裁剪失准的图片或被拉伸的视频，正是那种人们会注意到、却说不出名堂的小瑕疵。这些工具都不会替你做设计——它们抓出那些好眼力仍可能漏掉、却可以被量化的错误，让你的作品在离开你自己的屏幕之后依然站得住脚。
精选工具
常见问题
色盲模拟器是如何运作的？
它对输入的色彩套用标准的色盲转换矩阵，借此近似不同类型色觉缺陷下这些色彩看起来的样子——全部在你的浏览器中本地计算。
我可以只用颜色来传达信息吗？
不行。由于有些用户无法分辨某些颜色，请为每一个颜色提示再搭配第二种信号——一个标签、一个图标、一种纹理，或一段文字。模拟器能帮你检查：当颜色被拿掉时，你的意义是否仍然保留。
宽高比对图像与视频为什么重要？
裁剪或缩放到错误的比例，不是让内容变形，就是被迫加上黑边。锁定为 16:9 或 1:1 之类的标准比例，能让一切维持比例正确，并在各种显示场合中保持可预期。