什么是颜色对比度检查器？
颜色对比度检查器测量前景（文本）颜色和背景颜色之间的对比度，并告诉您该配对是否符合 Web 内容可访问性准则。 它报告一个 1:1 和 21:1 之间的数字，并在正常和大文本大小的 AA 和 AAA 的 WCAG 2.2 阈值以及用户界面组件和图形的单独 3:1 阈值中对其进行评分。
对比度是两种颜色之间相对亮度的差异，而不仅仅是它们看起来有多不同。 对于低视力、色觉缺陷或在明亮的阳光下使用手机的任何人来说，两种颜色都可能感觉不同，同时仍然失败。 该比率是使用 WCAG 定义的确切 sRGB 相对亮度公式计算的，因此结果与审计工具和屏幕阅读器用户的体验相匹配，而不是粗略的视觉猜测。
一切都在您的浏览器中运行。 键入或粘贴颜色为十六进制、RGB、HSL 或 CSS 关键字，观看实时文本预览更新，如果一对失败，您可以应用建议的颜色。 没有上传，没有注册，并且一旦页面加载，该工具就会继续脱机工作。
WCAG 2对比度公式是相对亮度的比率,其阈值是可访问性审核和大多数法律要求的衡量标准,因此它是设计到正确的数字。它也被称为不完美:它可以在黑暗背景上慷慨地浅色文本,在一些中音对上刺耳,这就是为什么后继算法APCA存在并正在为未来的版本进行试验。大文本有一个较低的条,大表示18pt,或粗体时的14pt,大约是24px和18.66px。3:1时,非文本元素被1.4。11单独覆盖,这是最常被遗漏的规则:图标按钮,输入边框和焦点环都需要它,并且设计可以传递每个段落,并且在其形式字段上仍然失败。
如何使用颜色对比度检查器？
输入您的文本颜色
以任何常见格式键入或粘贴前景颜色 - #1a1a1a,rgb(26,26,26),hsl(0,0%,10%),或像navy这样的关键字。颜色样本和原生选择器可让您对其进行微调。
输入您的背景颜色
设置文本所在的背景。 如果您的文本颜色具有透明度，则在测量比例之前将其混合在该背景上，与用户实际看到的内容相匹配。
阅读比率和成绩
精确的对比度显示在正常和大尺寸的 AA 和 AAA 的通过或失败徽章以及 3:1 UI-Component 检查中显示在您背景上的实时文本示例旁边。
立即修复故障
如果组合失败,请应用建议的可访问颜色 - 该工具将文本推得更轻或更深,直到它清除目标级别,然后您可以复制固定值。
主要特点
精确的WCAG比率
使用 WCAG 2.2 中的官方 sRGB 相对亮度和对比度公式，因此该数字将正式审计与小数点后的两个小数点相匹配，而不是近似值
AA、AAA和UI分级
每个结果均针对 AA (4.5:1)、AAA (7:1)、大文本阈值 (3:1 和 4.5:1) 以及非文本 UI 组件和图形对象的 3:1 规则进行分级
实时文本预览
输入时，您所选背景的正态和大文本样本会呈现，因此您可以在数字分数旁边判断可读性
可访问的颜色建议
当一对失败时，该工具会在 HSL 中将文本颜色更浅或更暗，直到它达到您的目标比率并提供您可以一键应用的传递值
Frequently Asked Questions
Related Tools
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!