颜色对比检查器是如何工作的?

通过输入十六进制代码或使用颜色选择器工具选择前景色和背景色. “WCAG合规信息”图表将显示所选颜色是否符合合规标准.

Select Colors

WCAG Compliance Results

Color Contrast
9.80
Pass
Small text result passed
Small Text
Large text result passed
Large Text
UI components result passed
UI Components
ELEMENT TYPEAAAAA
Small Text Pass Pass
Large Text Pass Pass
UI Components Pass-

免责声明和附加信息

这个对比度检查器旨在以最大的准确性测量对比度. However, 可能存在这样的情况:颜色组合符合计算比例,但总体上仍然失败. 这可能是由于其他视觉因素,如悬停或焦点状态和效果. 有关色盲的更多信息,请访问我们的网站 knowledge base.

WCAG符合性的强制对比度

Level AA – Text

4.普通文本5:1,大文本3:1(18或14 pt +粗体).

WCAG Success Criterion 1.4.3

Level AA – Non-Text

3:1 for UI components & graphics.

WCAG Success Criterion 1.4.11

Level AAA – Text

7:1 for regular text and 4.大字体5:1 (18pt或14pt +粗体).

WCAG Success Criterion 1.4.6

Other Tools and Resources

探索可访问性资源和工具以检查可访问性遵从性并对其进行补救.

可访问性语句生成器

向世界展示你致力于使你的网站易于访问.

访问无障碍语句生成器

All in One无障碍知识库

向我们的专家询问任何可访问性问题并浏览已回答的主题.

访问All in One无障碍知识库

颜色对比检查常见问题

颜色对比检查器是一种用于评估数字界面上文本与其背景之间亮度或颜色差异的工具. 它确保文本在其背景下易于阅读, 尤其是对有视觉障碍的人来说.

颜色对比检查器通常使用考虑亮度对比等因素的算法来计算文本与其背景之间的颜色差异, color brightness, and hue difference. 然后,他们提供一个评级或分数,表明对比是否符合可访问性标准.

如果您的设计未通过颜色对比检查, 您应该调整文本和背景的颜色,以提高对比度. 这可能包括选择较深或较浅的颜色, changing the text size, 或修改背景颜色,以确保可读性和可访问性.

利用上面提供的颜色对比检查器-只需输入您的网站的前景和背景颜色, 这个工具会立即为你计算对比度.

颜色对比对于确保可读性和可访问性至关重要. 文本和背景之间的高对比度可以提高可读性, 尤其是那些有色盲或弱视等视觉障碍的人. 它还有助于满足可访问性标准,如Web内容可访问性指南(WCAG)。.

根据WCAG指南,文本的对比度应该至少为4.正常文本5:1,大文本3:1 (18pt或14pt粗体). 这确保了大多数用户的可读性,包括那些有视力障碍的用户.

而颜色对比对文本的可读性尤为重要, 它对于按钮等其他界面元素也是必不可少的, images, icons, and form fields. 确保这些元素有足够的颜色对比,可以提高所有用户的整体可用性和可访问性.

根据W3C WCAG色盲标准:

  • 颜色不应该是传达信息或迅速回应的唯一媒介.
  • 对于文本的视觉呈现和文本的图像,有一个定义的颜色对比度(4).5:1).

欲了解更多信息,请访问此 blog.