无障碍对比与企业标识准则

Question

紧跟here问有关WCAG AA的对比度要求的问题之后，我试图找出WCAG准则与我设计产品的公司标识准则之间冲突的最佳解决方案对于。

在产品的整个用户界面中，品牌的原色主要用于按钮。浅色文字与品牌原色的结合导致对比度不足。为了获得足够的对比度，我尝试使按钮标签的文本颜色或按钮的背景颜色变暗（请参见随附的屏幕截图）。但是，由于各种原因，更改品牌颜色将不是可接受的解决方案。

除了在按钮标签上使用深色文字之外，我还能在不修改品牌原色的情况下获得足够的对比度吗？

Answer 1

可以想象，您可以将图像用作按钮（当然还有替代文字），但仍然声称它符合AA级标准，但这可能有点麻烦。

  

文本图像：了解SC 1.4.5

     

如果由于任何原因，作者无法格式化文本以取得相同的效果，则该效果将无法可靠地呈现在常用的用户代理上，或者使用一种满足此条件的技术会干扰满足其他条件，例如如1.4.4所示，则可以使用文本图像。这包括某些特定的文本表示形式对于所传达的信息必不可少的情况，例如类型样本，徽标，商标等。

     

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html

使用基于文本的按钮而不是图像是非常理想的，但是您可以使用这种方法使每个人（一定程度上）感到高兴。

此外，以这种方式使用该技术对视力有限的访问者没有任何帮助。使用屏幕放大镜的人们仍然必须克服文本的对比度差，并且他们不会从替代文本中受益。

了解这已进入WGAG的主观解释领域。某些人可能不会将此视为主要用于使用否则不允许的颜色的有效技术。您的网站这次可以通过验证，如果重新评估过，其他人以后可能会失败。

Answer 2

如果不更改背景颜色或使用较暗的文本，则无法获得足够的对比度以达到AA级。

为了找到匹配的颜色，您必须将颜色转换为HSL颜色空间而不是RGB。然后保留色相和饱和度，您可以更改亮度并测试颜色。

通过这种方式，您可以找到＃0F7FAD之类的颜色，该颜色将与您的初始颜色相匹配，只是有点暗。

Answer 3

我很同情您，在尝试同时满足A11Y准则和设计语言/品牌准则方面，我付出了很多努力。这不是一场容易或迅速赢得的战斗，但我为您为使网络更具包容性而付出的努力表示赞赏！

过去使我的团队进一步进行对话的一个选项是允许最终用户选择他们需要或希望使用的网站版本。

他们想要高对比度的样式吗？
构建一个替换样式表的选项-并以不同的方法应用品牌颜色。

可能与主题区域相关的其他问题：

您的用户想要放大还是宽大的文本大小？
那么扩大的UI元素呢？
一组色盲的样式表怎么样？

TLDR：用户界面通常不是一种适合所有用户的尺寸，因此请考虑按单点方式定制可访问性产品。让消费者选择他们需要的东西！

希望这会有所帮助，让我知道这是怎么回事！