建立一个无障碍网站需要几个关键因素。在确保所有用户都能浏览和消费网站的内容方面，每一个要素都有其作用。
颜色也许是最基础的元素。因为，不管你采取了什么其他措施，一个无法使用的调色板会严重破坏可用性。即使是没有视力障碍的用户也很难阅读和理解文字。
作为设计师，我们倾向于以我们认为好看的方式制作功能，而不总是考虑后果。客户也可能坚持使用品牌颜色--即使它们不是无障碍的。这导致了很多可以避免的问题。
好消息是，遵守WCAG色彩对比标准并不十分困难。正如我们将展示的那样，测试色彩对比度只需几秒钟。从那里，它是一个做任何必要调整的问题。
事实上，最重要的步骤是花时间进行测试。让我们开始吧!
何时测试色彩对比度
在一个完美的世界里，色彩对比度应该在项目的一开始就进行测试。这意味着在网站模型和风格指南中实施一个符合要求的调色板。这样一来，你就可以确信你的设计会通过审核。
当然，当涉及到现有项目时，你可能已经错过了时机。但是，测试一个网站的色彩方案可以在任何时候进行。而且，由于CSS的力量，修复任何不符合要求的组合的过程可以相当简单。搜索和替换就可以了。
然而，可访问性是一个持续的过程。对于经常添加新内容的网站来说，情况尤其如此。如果客户能够使用所见即所得的编辑器，并且能够改变颜色，则可能需要进行常规测试。
这也指出了对客户进行可访问性和最佳实践教育的重要性。使用对比度差的颜色将花费时间和金钱来修复。当客户了解这个问题时，他们将更有可能避免在这个领域做出任何不明智的决定。
网站色彩对比度工具
现在我们已经解决了 "何时测试 "的问题，让我们把重点放在 "如何 "的部分。第一步是找到一个合适的工具来运行测试。
网络上有几个工具可供选择。然而，我们很快就会专注于一对工具。其中一个（WebAIM Contrast Checker）是一个手动工具，而另一个（WAVE Tool）是自动的。
WebAim对比度检查器
这个工具对于测试你的网站的对比度来说是最简单的。输入你的背景和前景颜色的HEX代码，WebAIM对比度检查器将计算出准确的比例。
根据你的得分，该工具将报告你是否符合WCAG AA或AAA标准。如果不符合，你可以使用颜色滑块来调整色调，直到你得到一个合格的分数。
WAVE网络可访问性评估工具
输入你的网站的URL，WAVE会自动扫描你的网站并评估几个可访问性因素--包括颜色对比度。浏览器扩展也可用于Chrome、Firefox和Microsoft Edge。
WAVE提供了大量的数据--有时它也会报告假阳性。关于对比度，这往往发生在HTML文本被分层在图像背景之上的时候。由于该工具依赖于CSS的颜色值，在没有定义背景颜色的情况下有浅色的文本会导致错误。因此，你要做一些进一步的调查来验证它的发现。
这些工具中的任何一个都可以完成工作。然而，值得注意的是自动化工具的局限性。有时，人工测试将需要成为该过程的一部分。
了解标准和解决问题
对于大多数网站来说，目标是要符合WCAG关于 "正常 "文本的AA标准（尺寸低于14点/18.66像素）。AAA标准更为严格，甚至W3的文件也指出，某些类型的内容可能无法满足要求。
如果你的网站的内容领域符合这些标准--好极了！如果不是，任何问题都应该很简单。如果不是，任何问题都应该很容易解决。
对于HTML和CSS，调整你的颜色组合，直到它们达到或超过比例（4.5：1）。如果你使用的是图像背景，你可以使用Photoshop等工具，甚至是CSS过滤器来使事情变得有条理。
最困难的部分可能是说服客户使用不同的色调。希望的是，一旦他们理解了其中的利害关系，他们就会更愿意改变。
此外，还值得直观地研究你需要修复的元素。可能会有这样的情况：你满足了要求，但内容仍然不那么可读。追求更高的对比度可以大大改善用户体验。
为你的网站涂上可访问性的颜色
颜色对一个网站来说意义重大。它们有助于品牌识别和设定一种氛围。但它们最大的影响可能是在可访问性方面。
而且，除非你使用的是普通的黑白颜色，否则符合WCAG标准并不是必然的。这就是测试的作用。
希望这个指南能让你在你的网络项目中考虑到颜色问题。从一个无障碍的调色板开始是最好的，但即使是一个旧的网站也可以使其达到相应的标准。这很值得努力
The postAccessibility Tip: How to Test Color Contrast Ratios appeared first onSpeckyboy Design Magazine.
