您的品牌颜色具有强烈的情感影响，但对于视力不佳、色盲或面临导致可见性困难的环境因素的网站访问者来说，它们看起来如何？
颜色和对比度对于沟通至关重要，而对于具有无障碍意识的设计师来说，正确掌握这些细节至关重要。
色觉障碍比您想象的更常见。 因此，在这篇文章中，我们将讨论弱视、阅读障碍和色盲等残疾人如何与网络互动。
目录
如何使用颜色检查器来提高网站的可访问性？
这部分实际上很简单，尽管确实需要一些努力。 您将需要使用 WebAIM 的在线对比度检查工具。 WebAIM 是一个位于犹他州立大学的非营利组织，其使命是增强全球网络的可访问性。
只需输入十六进制值（也称为十六进制值）的前景色（例如，文本或图标的颜色）和背景色，如中指定 HTML 或 CSS，对比度检查器会通知您该比率是否足够。 请记住，您应该寻求的最小对比度是 4.5 比 1。白色背景上的黑色文本的对比度为 21 比 1，因此您有很大的余地。
制作每个人都可以看到的网页调色板的 5 个工具
1.WebAIM颜色对比度检查器
输入前景和背景的十六进制颜色。 输出显示普通文本和大文本的 AA 和 AAA 合规性，以及例句。 滑块可以让你改变一些东西，直到找到一个好的组合。
我们的强项
- 简单的工具，具有易于查看的界面。
- 对于初学者来说，这是一个很好、简单的工具，而不仅仅是设计师。
弱点
- 无法比较两种以上的颜色，只能比较两种颜色。
- 亮度滑块并不是选择颜色的好方法。 很难说这个简单的显示器中的颜色有多么吸引人。
2. WCAG 对比度检查器
输入前景和背景的十六进制颜色。 在 Lorem Ipsum 文本示例旁边显示普通文本和大文本的 AA 和 AAA 合规性。 您还可以上传图片。 自动为您选择 9 种颜色的调色板。 然后，您可以将每种颜色作为前景色或背景色进行比较。
我们的强项
- 具有用户友好界面的简单工具。
- 能够从图像制作调色板。
弱点
- 调色板是自动选择的，您可以使用颜色选择器进一步更改它，但这些更改不会保存回调色板。 必须将信息复制并粘贴到新文档中。
3. 彩色立方体
输入调色板的颜色，每种颜色各占一行。 输出显示样本字母，其对比度与小字体和大字体的 AA 标准相比。 三列与白色背景、黑色背景和一组“可用的最清晰的”品牌颜色形成鲜明对比。
我们的强项
- 直观易懂的用户界面 (UI) 组织良好，通过/失败/边缘状态一目了然。
弱点
- 不符合 AAA 制定的标准。
- 不会执行所有可能的颜色组合，并且一开始并不清楚情况是否如此。
4.) 八种形状对比网格
输入调色板颜色。 此外，您还可以为每种颜色命名。 该应用程序制作了一张包含各种可能的颜色组合的表格。 瓷砖有三种尺寸。 有 AA 和 AAA 通过/失败/边缘以及有效对比度的视觉提示。 可以通过拖放在应用程序中移动列和行。 表格数据可以保存、导出和共享。
我们的强项
- 有许多有用的功能可以帮助分析整个调色板。
弱点
- 它比其他更容易使用的工具更难学习。
- 仅比较两种颜色不是正确的方法。
- 不利于弄清楚颜色如何搭配在一起。
- 看起来有点让人不知所措，但显示的信息很多。
5.颜色安全
输入背景颜色。 选择字体的系列、大小和粗细。 选择AA或AAA作为标准。 显示所选颜色及其十六进制代码，以及示例和有效对比度。 具有足够对比度的可能前景色的大缩略图是最好的部分。 您可以选择查看所有颜色或仅查看某些颜色组（绿色、蓝色、紫色等）
我们的强项
- 凭借易于观看的界面，可以轻松找到看起来不错且效果良好的颜色组合。
- 如果您还没有品牌调色板或者想要添加到已有的网络调色板，那么这是一个有用的工具。
弱点
- 您一次只能比较前景色和背景色。
- 如果要保存颜色，则必须将颜色复制并粘贴到单独的文档中。
- 出去为大家做点事情！
一旦您知道如何使用这些工具，您可能会发现一个项目需要多个工具。 也许 Color Cube 是向客户展示您所了解的无障碍功能的最佳方式。 也许您会一直使用 WebAIM 的工具来进行快速抽查。
结论
使用我们刚才讨论的提示、指南和工具，您可以为您的网站提供高对比度的颜色和标签。 这将使视力不佳、阅读障碍和色盲的人更容易阅读您的网站和内容。 如果您的普通受众也发现使用您的网站更容易，请不要感到惊讶。
