大号文字预览
普通文字 — 视而不见，听而不闻，食而不知其味。
关于颜色对比度检查器
这款免费的颜色对比度检查器可测量文字颜色与背景颜色之间的对比度，并告诉您它在普通文字和大号文字上是否符合 WCAG AA 与 AAA 标准。
它在您的浏览器中运行——不会上传任何内容。
对比度数值的含义
对比度比较两种颜色的相对亮度——各自发出或反射多少光——取值范围从 1:1 到 21:1。
- 1:1——两种颜色完全相同，文字不可见
- 21:1——纯黑配纯白，可达到的最大值
- 4.5:1——WCAG AA 对普通正文的最低要求
关键细节在于，这个计算依据的是亮度，而不是两种颜色看起来有多不同。两种颜色可能给人感觉差别很大，却仍然不合格。红配绿就是典型例子：视觉上很抢眼，亮度却几乎相同，对许多人来说几乎无法阅读。
这也是您无法凭肉眼判断对比度的原因。设计师在优质显示器上、在受控的光线下、用年轻的眼睛工作，而在工作室里显得优雅的浅灰，到了阳光下的手机上就消失了。
阈值
WCAG 设定了两个级别，具体要求取决于文字的大小。
AA 级——通常的目标，也是多数无障碍法规所引用的级别：
- 普通文字 4.5:1
- 大号文字 3:1
- 用户界面组件和承载含义的图形 3:1
AAA 级——更严格的标准，适用于面向低视力读者的内容：
- 普通文字 7:1
- 大号文字 4.5:1
大号文字指 18pt（24px）及以上，或 14pt（18.66px）粗体及以上。字母越大笔画越粗，因此能承受较低的对比度。
对多数网站而言，AA 是现实的目标。AAA 在整套设计中都达到很困难，一般内容也不会被要求做到。
为什么这影响的人远比您想象的多
把对比度归入"边缘情况"很容易。但数据并非如此。
约每 12 名男性中有 1 人、每 200 名女性中有 1 人存在某种形式的色觉缺陷——全球大约 3 亿人。其中红绿色觉缺陷最为常见。
几乎所有 40 岁以上的人都会经历对比敏感度下降，而且眼球晶状体会随年龄泛黄，改变对蓝色的感知。
每个人都会遇到。 对比度不足也会影响视力正常的人：在户外阅读时、屏幕调暗时、使用廉价显示器时，或是在公交车上透过沾满污渍的手机屏幕阅读时。在这里，无障碍方面的改进就是对所有用户的可读性改进。
这还有法律层面。在实践中，WCAG 2.1 AA 被《美国残疾人法案》（Americans with Disabilities Act）引用，被美国联邦采购中的 Section 508 引用，被《欧洲无障碍法案》（European Accessibility Act）引用，也被英国、加拿大和澳大利亚的同类规定引用。对比度是无障碍投诉中最常被指出的问题之一，很大程度上正是因为它极易测量。
设计通常在哪里出问题
- 表单字段中的浅灰色占位文字——极为常见，而且几乎总是不合格
- 照片上的白色文字——对比度会随图像各处而变化；请加一层叠加或压暗层
- 把品牌色用作文字颜色——白底上的中间调企业蓝或橙往往落在 3:1 附近
- 禁用状态——虽不受该要求约束，但仍值得保持可读
- 仅靠颜色区分的链接——如果链接与周围文字明度相同，请加下划线
- 黄底白字，或灰底灰字——常年的老毛病
- 深色模式——纯黑上的纯白理论上是 21:1，却会造成光晕；稍加柔化的颜色读起来更舒服
- 白底上的红色错误提示——偏偏是最要紧的那条信息，常常低于 4.5:1
修复不合格的配色
当某个组合不合格时，请改变明度而不是色相。通常您可以在把品牌色调暗或调亮到足以通过的同时，仍让它保持可辨认。
实用做法：
在大型元素上保留品牌色——标题、按钮、图标，这些地方的阈值是 3:1——正文则改用较暗的变体。
只调整一侧。 把文字调暗通常比改变背景的影响更小。
在图片上加一层压暗层——在照片与文字之间放一层半透明的深色。无论照片内容如何，它都能保证对比度。
不要仅靠颜色来传达含义。加上图标、文字标签或下划线，让完全无法分辨颜色的人也能获得这一信息。
使用方法
- 选择一个文字颜色和一个背景颜色
- 查看对比度以及 AA / AAA 的通过或未通过标记
- 阅读实时预览自行判断，然后调整颜色
需要知道的事
- 测试实际使用的颜色，包括任何不透明度。不透明度为 70% 的文字，相对于背景而言其实是另一种颜色。
- 两种主题都要检查。 在浅色模式下通过的配色，在深色模式下可能不合格。
- 徽标不受对比度要求约束，附带性文字和装饰性文字也一样。
- 细体字在实际使用中需要比数值所示更高的对比度。 标准不测量笔画粗细，但您的读者感受得到。
- 如果可以，请在白天用手机检查。 这比任何显示器都更诚实。
- 通过只是底线，不是目标。 4.5:1 是可接受的最低值，而不是追求的水准。
常见问题
多少对比度才算好？
普通正文至少要 4.5:1 才能满足 WCAG AA——这是多数无障碍法规引用的级别。大号文字，即 18pt/24px 或 14pt/18.66px 粗体及以上，需要 3:1。更严格的 AAA 级要求普通文字达到 7:1。请把这些数字当作最低值而非目标；舒适阅读的水平通常远高于此。
WCAG AA 和 AAA 有什么区别？
AA 是多数法规和机构采用的实用标准，要求普通文字 4.5:1、大号文字 3:1。AAA 更严格，分别为 7:1 和 4.5:1，面向专门服务低视力读者的内容。AAA 在整套设计中都达到很困难，通用型网站也不会被要求做到。
为什么我觉得没问题的配色却不合格？
因为对比度是根据亮度计算的，而不是根据两种颜色看起来有多不同。红色和绿色看着差别很大，亮度却相近，所以这个搭配不合格。个人判断同样不可靠：设计师通常在优质屏幕上、在受控光照下、以良好的视力工作，而多数读者并不具备这些条件。
图像和图标也需要考虑对比度吗？
需要。WCAG 要求用户界面组件以及承载含义的图形达到 3:1，例如表示状态的图标或表单字段的边框。纯装饰性的图像和徽标则不受约束。常见的问题是放在照片上的文字，因为对比度会随图片各处而变化——加一层半透明叠加即可解决。
如何在不丢掉品牌色的前提下修复不合格的配色？
调整明度而不是色相。同一颜色更深或更浅的版本通常仍能被认出是品牌色，同时又能越过阈值。您也可以在只需要 3:1 的标题、按钮和图标上保留原色，而在适用 4.5:1 的正文上使用较暗的变体。
纯黑配纯白是最佳选择吗？
它以 21:1 达到最大值，但未必最舒适。非常高的对比度会引起光晕——字母周围泛起发光的效果——在深色模式下以及对部分有阅读障碍或散光的读者尤为明显。用米白底上的深灰，或深灰底上的柔化白色，往往读起来更舒服，同时仍能轻松通过。
我选择的颜色会被发送到别处吗？
不会。您选色的同时，对比度就在您的浏览器中计算出来，因此不会传输或保存任何内容，本工具也可离线使用。
