Contrast Checker
WCAG contrast check
WCAG contrast check 在您的浏览器中本地运行
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
对比度检查器使用 WCAG 亮度公式测量文本颜色和背景颜色之间的对比度，并告诉您该对通过了哪些辅助功能级别。这是决定正文文本是否真正可读的检查：对于普通文本，最小比例为 4.5 比 1；对于大文本和界面边界，比例为 3 比 1；对于增强合规性，比例为 7 比 1。通过眼睛判断对比度是不可靠的，因为眼睛对绿色的敏感度远高于对蓝色的敏感度，这就是为什么看起来明亮的黄色和看起来暗的蓝色得分几乎相同。
Where people use the
- 检查彩色背景上的正文是否符合 AA。
- 在黑色和白色文本之间选择按钮颜色。
- 在重新设计之前审核现有调色板。
- 在票证中记录无障碍决策。
How to use the
- 1
设置文字颜色
键入十六进制值，例如 1a1a1a，或使用颜色选择器。接受三位数简写，例如 f0a。
- 2
设置背景颜色
背景也一样。当您更改其中之一时，预览会更新。
- 3
读取比例
数字范围从 1:1（相同颜色）到 21:1（黑底白字）。更高意味着更具可读性。
- 4
检查您需要的级别
正常正文文本 AA 需要 4.5 比 1，AAA 需要 7 比 1。 18pt 或 14pt 粗体标题和 UI 边框需要 3 比 1。
- 5
看预览以及数量
一对可以在纸上传递，但在小尺寸或低质量屏幕上看起来仍然很差。如果看起来很难读，那就很难读。
提示和最佳实践
- 使文本颜色变暗，填充颜色保持较亮。
- 检查实际使用的文本的最小尺寸。
- 边框和图标也需要 3 比 1，而不仅仅是文本。
常见问题
对比度的公式是什么？
在伽玛校正后，每种颜色都使用标准权重转换为相对亮度，红色为 0.2126，绿色为 0.7152，蓝色为 0.0722。该比率就是较亮的亮度加上 0.05 除以较暗的亮度加上 0.05。结果范围为 1:1 至 21:1。
为什么我的品牌颜色失败？
因为大多数饱和的中间色调颜色与白色的比例无法达到 4.5 比 1。通常的解决方法是使文本使用的颜色变暗，同时为大填充保留较亮的版本，这正是大多数设计系统对其原色所做的处理。
通过该比率就足以访问吗？
这是必要的，但还不够。非常大或非常小的文本、较细的字体粗细、文本覆盖图像以及某些形式的色觉缺陷都会影响超出比例的可读性。尽可能与真实用户进行测试。
方向重要吗，浅色对深色还是深色对浅色？
不会。比例是对称的，因此黑底白字和白底黑字的得分都是 21:1。实践中的不同之处在于眩光和感知重量，这是一种设计判断，而不是合规性判断。
什么算大文本？
在 WCAG 术语中，粗体时为 18pt 或更大，或者 14pt 或更大。在 CSS 中，像素大约为 24 像素，粗体时大约为 18.66 像素。
计算在哪里进行？
完全在您的浏览器中。没有上传任何内容，因此您可以从尚未公开的品牌指南中检查颜色。