颜色对比度检查器

即时判断文字颜色和背景颜色的对比度比以及易读性标准(WCAG AA)的合否

特点

即时判断对比度比

输入文字颜色和背景颜色后立即显示WCAG AA的合否

支持选择器和代码输入

支持粘贴HEX、简写形式、rgb()格式和颜色选择

两种尺寸的样本显示

即时确认普通文字和标题的实际显示效果

一键应用合格颜色

快速应用保持色相、仅改变亮度的建议颜色

使用方法

1

指定文字颜色

使用颜色选择器选择,或输入#333333、#333、rgb(51, 51, 51)这三种格式中任意一种的颜色代码

2

指定背景颜色

用同样的方式指定背景颜色。无需按按钮,输入的同时结果会自动更新

3

确认比率、合否和样本

确认对比度比、普通文字和大文字的合否、简要评价以及样本文字的显示效果

4

应用建议颜色后重新确认

如果不合格,点击"将文字颜色改为…"等建议按钮应用合格的颜色。也可以使用交换按钮互换文字颜色和背景颜色

使用场景

幻灯片和资料的配色确认

在制作前确认公司内部资料或幻灯片的文字颜色和背景颜色是否易读

网站配色检查

确认网站或横幅的配色是否符合无障碍标准(WCAG AA)

品牌色文本应用判断

在使用品牌色作为文字颜色时,决定要加深到什么程度才能用于正文

修正不合格配色

将被指出的配色改为合格颜色,同时保持原有色相

基础知识

什么是对比度比

对比度比是用1:1到21:1的数值表示文字颜色和背景颜色明度差异的指标。黑色和白色的组合达到最大的21:1,相同颜色则是最小的1:1。

  • 计算原理:对比度比是将两种颜色转换为sRGB相对亮度,然后将明亮的亮度和较暗的亮度各加上0.05后进行除法得到的值。
  • 数值参考:对于白色背景(#FFFFFF),灰色#777777的对比度比为4.47:1,#999999为2.84:1,黑色(#000000)为21:1。

WCAG AA和AAA的区别

WCAG是关于网络内容无障碍访问的国际指南,它为对比度比的合格线设定了AA和AAA两个等级。

  • AA(标准水准):AA标准要求普通文字4.5:1以上,大文字3.0:1以上,是一般网站所瞄准的水准。
  • AAA(更严格的水准):AAA标准要求普通文字7:1以上,大文字4.5:1以上,旨在让低视力人群也能易读。

大文字的定义

WCAG中的大文字是指约18点(24px)以上,或粗体14点(约18.7px)以上的文字。

  • 普通文字:普通文字是指不符合大文字条件的尺寸,包括正文和注释等可读内容,需要4.5:1以上的对比度比。
  • 与标题的关系:即使是标题,如果尺寸小于24px且不是粗体,也会被视为普通文字,因此需要同时确认尺寸和粗细。

安全性和隐私

浏览器内完成

输入数据仅在您的浏览器内处理,不会发送至外部。

仅在浏览器内处理

对比度比的计算和颜色建议完全在您的浏览器内进行,输入数据不会发送到服务器。

通信采用HTTPS加密

页面加载也通过TLS加密,第三方无法读取内容。

不向第三方发送

不向广告网络、跟踪器等外部服务发送输入内容。

结果不自动保存

输入的文字颜色或背景颜色和输入建议不会保存到服务器。

在Google搜索中关注RAKKOTOOLS

194个实用工具,在Google搜索和AI搜索中更容易找到!

  • 在搜索中找到
  • 在AI搜索中也显示
  • 发现新工具

更新信息

相关工具