为负责人提供五个易于使用的 "对比检查器"。

2024/07/29

对比检测器计算网站或图像中前景色（文本和图形元素）与背景色的对比度，即明暗差。该比率是否符合WCAG或JIS等网络可访问性指导方针用于评估的工具根据需要，可以称为对比度检查器或颜色对比度检查器。

在本文中，将介绍五款代表性的对比检测器工具。

在介绍这些工具的同时，也将详细讲解在验证对比度时的要点，因此，负责网络可访问性的工作人员请参考本文。

可访问性负责人易于使用的五种对比检测器

对于设计师和可访问性负责人员来说，必须使用多种类型的对比检测器来验证自己网站或网页内容的对比度。

因此在这里，代表性且易于使用的对比检测器将介绍五款工具。有在网站（浏览器）上使用的工具和可安装使用的工具，但这些都是可以免费使用的工具我们将介绍，因此请先轻松体验一下。

工具名称	特点	使用环境
① WebAIM	是可以随时访问和使用的工具。虽然是英语网站，但界面简单易懂，使用体验良好。	浏览器
颜色测试仪	可以通过拖放图像来检查对比度。由于是安装式，可能在工作场所使用时会有限制。	安装 （Windows / Mac）
③ AdobeColor	除了对比检查功能外，还配备丰富的配色功能。可以与Adobe产品，如Photoshop、Illustrator和inDesign等连携使用。	浏览器
④ WCAG颜色对比度检测器	安装在Google Chrome上并作为扩展功能使用。在验证网站对比度方面是特别有用的工具。	浏览器 （Chrome扩展功能）
⑤ 对比格	是一个可以一览所设颜色对比度的工具，能够设置多个颜色代码，使得不善于配色的人也易于理解，便于选择使用的颜色。	浏览器

 

① WebAIM

设置文字色（前景）和背景色（背景），计算对比度，确认是否满足WCAG的标准可以。颜色可以通过颜色代码和颜色选择器指定，并且可以调整亮度。当设置颜色时，实时计算对比度，并且可以通过常规文本、粗体文本以及复选框等图形对象查看预览。

每个结果是否达到了符合标准的级别，可以通过“通过（Pass）”或“失败（Fail）”一目了然。导航为英语，但简单明了因此，您不会对一般的使用方法感到困惑。

官方网站：WebAIM

颜色测试仪

计算两种颜色的对比度，并根据JIS X 8341-3:2010 (WCAG 2.0)标准进行评估。通过将图像文件拖放到窗口中，自动推测和评估图像的前景色与背景色。。

这款工具是日本制造，且支持Windows和Mac两种操作系统，需要安装工具。。各个操作系统的支持版本是Windows 8.1及以上和Mac OS X 10.10及以上。也有英文版。

官方网站：颜色测试仪

③ Adobe颜色

这是由负责开发和销售创作者工具的Adobe提供的工具。该工具本身作为配色工具，提供了多种有助于创意活动的功能，其中包括用于可访问性检查的对比度检查器。

与其他对比检测器相似的使用体验，但是，它还会为设置的颜色建议最佳对比度颜色。虽然是Adobe的工具，但不需要安装或登录即可使用，登录后可以与其他Adobe产品集成，因此对于日常使用Adobe应用程序的设计师来说是一个易于使用的工具将是。

官方网站：Adobe颜色

④ WCAG颜色对比度检测器

Google Chrome的附加组件（扩展功能）这是一种可以用作工具。可瞬间提取网站页面上使用的颜色，评估每种颜色的对比度。由于可以逐页检查，因此是测试阶段的网站检查和已在运营的网站维护的便利工具。

点击侧边控制面板中显示的任意颜色，会主动放大页面中所使用的部分，可以轻松检查门户网站等信息量大的网站。。

官方网站：WCAG颜色对比度检测器

⑤ 对比网格

大多数对比检测器都是在指定颜色时逐次检查对比度，但此工具是将显示颜色调色板（列表），可以选择想要的对比度组合因此，我推荐这种方法给设计初学者或不擅长配色的人。

访问官方网站后，如上图所示，已经显示了默认的颜色组合。在左侧的框中添加颜色代码后，可以查看调色板上其他颜色的组合。每种颜色的组合合规级别如“AA”或“AAA”以标签形式显示，并且通过标签的颜色差异可以知道是否符合要求。因此，可使用的组合一目了然。

官方网站：对比网格

我们迅速介绍了五种有用的对比检测器，但为何需要验证对比呢？接下来将进行解释。

为什么需要对比检查

根据2024年4月实施的修订残疾人歧视消除法，对于提供合理便利的义务，网络可访问性对策也是必要的措施。有所改善。为此，需要从多方面验证自己的网站的可访问性达成度。

特别是网页中通过视觉获取的信息占据着很大一部分，因此，不仅仅是非障碍人士（无视觉障碍者）：确保站点对于低视觉、高龄用户或色觉特性用户也能够识别文本或图像。应认真验证网络可访问性是否得以保障，并进行适当的改善。

而且，其中一个进行验证所需的指标是“颜色的对比度”对比度指的是屏幕上两个颜色（通常是前景色与背景色）之间的明暗差。这个比率用来定量地表示这两种颜色的相对亮度，较高的对比度意味着更容易区分颜色。通常，对比度的范围是1:1到21:1，数值越高，意味着对比度更强，即更易于识别。。

那么，实际上对比度的差异会如何影响可见度，请参考下面的内容。

◆对比度差异的视觉效果

此外，为了模拟视力低下者看起来模糊的文字，您可以看到上面的图片模糊效果。

◆模糊情况下的视觉差异。

如上所述，当对比度高时，背景和前景颜色之间差异大，易于识别颜色的边界，即可读性提高。例如，当文字颜色和背景颜色为1:1时，两者都无法识别为同一颜色；而在21:1的情况下，白色和黑色的显示则清晰可辨。在包含文本和图像等各种元素的网站上，为了确保网络可访问性，必须在设计时注意对比度的细节。。

因此，需要确保自己网站设计的对比度是是否满足网络可访问性的要求为了判断这一点，对比检查是必须进行的工作，但那是为了进行定量判断，“对比度检查器”是必不可少的工具这就是答案。那么，接下来就将解释网络可访问性的要求。

对比度检查的三个重点

在使用对比检测器验证网站或内容的对比度时，不应凭借个人感觉来判断可行性。需要根据设定的网络可访问性标准进行验证。在此，将解释进行对比检查时需要注意的三个要点。

重点① 理解满足JIS标准的对比度

正如前述，由于修订后的残疾人歧视消除法要求提供合理的便利，确保所有企业的网络可访问性已成为必需。

构成网站的元素种类繁多，但每个元素都有其可访问性标准，所有达标标准是根据国际标准的WCAG 2.0（网页内容可访问性指南2.0）设定的。在日本，JIS标准（JIS X 8341-3:2016）这就是其中之一。

此外，此标准的达成度规定了A至AAA的符合级别，根据总务省的说明，确保网络可访问性需要遵循AA至AAA（推荐）标准。被认为是。

参考：公共机构要求的主页等网络可访问性对策（总务省）

此外，对比度的标准也已设定。

◆为了达到适合级别AA、AAA的对比度

符合级别	所需对比度
AA	高于4.5:1
AAA	高于7:1

也就是说，作为符合网络可访问性的网页，对比度至少要求为4.5:1。许多对比检测器可以自动计算对比度，因此请注意验证这一比率。

此外，AAA对比度的7:1是以视力下降至20/80为基准，W3C假设视力低于20/80的用户通常使用辅助技术来访问内容。

AAA不是必须达成的标准，而仅仅是推荐，如果考虑到没有辅助技术的低视力或色觉特性用户的使用，设计时应意识到7:1的对比度。将是。

参考：理解成就标准1.4.6 | WCAG 2.0解释书（W3C）

重点② 也需注意字体大小

在要点①中提到“对比度至少需要4.5:1以上”，但实际上这是有例外的。在以下情况下，并不一定要满足4.5:1。

◆对比度标准合规的例外

・例外① 大字体和粗体文本
对于大字或粗体（18点以上的常规文本或14点的粗体）对比度为3:1如果符合标准，这通常是因为大字的可读性较高，因此对比度稍低也不会有太大问题。

・例外② 装饰性文本和标志
装饰目的的附属文本和企业标志等不在此对比度要求之内。它们用于设计和品牌识别，而非信息传递的手段。

・例外③ 图像内的文本
照片和图像中的文本也被认为是例外。然而，对于重要的文本信息，即使在图像中也应具有适当的对比度。推荐使用。

重点③ 也需要考虑色觉特性用户

至此，我们专注于对比度进行了详细论述，但考虑到颜色的可访问性，实际上仅靠对比度是不够的。因为，考虑到具有色觉特性的用户这也是需要考虑的因素。

例如，下面是网站邮件表单中常见的按钮排列，但这两个按钮的背景色与文字色的对比度均符合AA配色。

◆符合对比度AA标准的按钮

人们往往认为“对比度已满足标准，因此可访问性得以保障”，但这是草率的。在此按钮上D型色觉（2型二色觉）通过该过滤器来看，效果如下。

◆D型色觉按钮的可见方式

如上所述，两个按钮的颜色相似，初看不易区分。。尽管对比度达到了基准值，但这并不意味着可用性良好。换句话说，在配色时，有必要考虑对比度和色觉特性。

此外，在考虑色觉特性用户的方面，“确保信息不仅通过颜色的不同来传达”这一点也是一个重要的考量。

在UniWeb中，用户可以自行更改对比度。

如果没有自家公司网站的对比检查资源，请参考我们的无障碍工具“Uniweb”建议引入。UniWeb只需在网站源代码中添加一行代码，即可获得各种可访问性功能即日实施是可用的插件型工具。

UniWeb的一个主要特点是，用户可以在浏览网站时使用各种可访问性功能。这一点。实现的可访问性功能中也包含对比度调整功能，只需点击即可切换“反转色”、“暗对比”或“亮对比”，以提高可读性。

◆UniWeb的对比度更改功能

此外，在管理界面中有关网站的网络可访问性对策的诊断报告可以进行确认。报告中将显示每个项目的符合级别（A、AA、AAA），对于需要修正的部分，代码的具体修正措施也将提供，不需要专门使用各种验证工具来查找修改位置，从而实现高效的操作。

◆UniWeb的管理界面

在本文的右下角请点击“蓝色圆形人型图标”如果您这样做，UniWeb的可访问性菜单将会出现。除了对比度切换外，还提供了多种可访问性功能，请务必亲自验证UniWeb的功能。

总结

在信息主要来源于视觉的网站中，确保所有用户的可视性和可读性必须这样做。因此，需要理解低视力、高龄和色觉特性用户所需的照顾，并在公司网站上实施适当的无障碍设计。

对比检测器是实现无障碍设计的非常有用的工具。虽然许多付费的网络可访问性检查工具中也包含此功能，如果是单独使用对比检测器，免费工具就足够了。因此，请先迅速开始检查您的公司网站。

本文集中阐释了在网络可访问性中对比度的验证，如果想了解更多有关网络可访问性的内容，请参考我们网站的过往文章或数字厅提供的《网络可访问性导入指南》。。

参考：过往文章“网站负责人必需实施的网络可访问性对策是什么？”、网络可访问性导入指南（数字厅）

此外，我们的UniWeb提供我们也提供公司网站的免费诊断服务。我们正在实施，因此考虑自家网站的网络可访问性对策的企业请以下链接请更轻松地申请。

可达性免费诊断（uniweb）

对比检测器