Accessibility has always been a tough sell. Admittedly, less so than in the ‘nineties, when no prospective client was interested. But even today — more enlightened times — the majority of companies I encounter still prefer to make a lot of noise about accessibility without actually making a serious effort to address it (that is not an exaggeration, and I am talking about household names).

一个 ccessibility一直是一个艰难的销售。 诚然，这不像90年代那样，当时没有潜在的客户感兴趣。 但是，即使在今天(更开明的时代)，我遇到的大多数公司仍然希望对可访问性大加喧noise，而实际上并没有认真地努力解决它(这不是夸张，我所说的是家喻户晓的名字)。

Creating a colour palette from scratch is not something designers — even freelancers — get to do very often. Sure, there are greenfield projects out there, but they are slightly less commonplace than talking horses. The overwhelmingly likely scenario is that you will inherit a palette created by someone else (and not necessarily by a designer — it could be the fruits of the marketing department).

从头开始创建调色板并不是设计师(甚至是自由职业者)经常要做的事情。 当然，那里有一些绿地项目，但是比会说话的马少一些。 绝大多数情况是您将继承其他人(不一定是设计师创建的调色板)，这可能是市场部的成果。

Failures in the colour palette — how the colours are applied in the UI — are among the most prevalent of accessibility issues. So what happens when you know the palette you are working with has multiple points of failure? You cannot simply carry on regardless, churning out designs that you know fail accessibility requirements. To make matters worse, style guides can — and often do — call for foreground/background colour combinations that do not meet the minimum standard for contrast (particularly true when dealing with colours with opacity).

调色板故障(如何在UI中应用颜色)是最常见的可访问性问题之一。 那么，当您知道所使用的调色板有多个故障点时会发生什么？ 您不能简单地继续进行，要制造出您知道失败可访问性要求的设计。 更糟糕的是，样式指南可能会(而且经常会)要求使用不符合最低对比度标准的前景色/背景色组合(在处理不透明的颜色时尤其如此)。

Checking a colour palette against accessibility standards and identifying failures is one thing. But selling a revised palette to your stakeholders is quite another. Getting a multinational to change anything is a tough ask at the best of times. But getting them to change their corporate colour palette is marginally less challenging than skiing a mogul field with an egg balanced on a spoon. Marketing departments will usually opt to change their designer over changing their palette.

根据可访问性标准检查调色板并识别故障是一回事。 但是，向您的涉众出售经修订的调色板是另一回事。 在最佳时机，让跨国公司改变一切都是一个艰难的要求。 但是，让他们改变公司的调色板所面临的挑战要比在勺子上平衡着鸡蛋的大亨滑雪场要困难得多。 市场部门通常会选择更换设计师，而不是更改其调色板。

It can be achieved, however. And, like so many things, it is all down to presentation. The best way of illustrating this is to take you through a real-life case study.

但是可以实现。 而且，就像很多事情一样，这完全取决于演示。 说明这一点的最好方法是引导您完成现实生活中的案例研究。

更改公司的调色板 (Changing a Corporate Palette)

A few years back, I was approached by the global head of digital inclusion for a major international corporation in the IT sector. Discretion being the better part of valour, I shall not name the company. But suffice to say, the company has a presence in over 70 countries and more than 100,000 employees.

几年前，我与一家IT领域的大型国际公司的数字包容性全球负责人联系。 自由裁量权是最重要的部分，我不愿透露公司名称。 但足以说，该公司在70多个国家/地区拥有业务，并拥有100,000多名员工。

The head of digital inclusion knew the corporate palette failed accessibility (although had not quantified it). But despite calling for a change over some years, his pleas had fallen on deaf ears.

数字包容性负责人知道公司调色板无法访问(尽管尚未量化)。 但是尽管多年来要求改变，但他的恳求却置若de闻。

My brief was to quantify the points of failure in the palette (against WCAG Level AA) and propose the minimum changes necessary to bring the palette into compliance. I therefore concentrated on low-vision and colour-blind end users.

我的简介是量化面板中的故障点(相对于WCAG AA级)，并提出使面板达到合规性所需的最小更改。 因此，我专注于低视力和色盲的最终用户。

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as icons, form input field borders, etc.).

WCAG 2.0级AA要求普通文本的对比度至少为4.5：1，大文本的对比度至少为3：1。 WCAG 2.1要求图形和用户界面组件(例如图标，表单输入字段边框等)的对比度至少为3：1。

现有调色板 (The Existing Palette)

The existing palette consisted of seven colours and five greys, as shown in the figure below. Whatever you may think of the colour selections (and that is probably not a lot) this is what Marketing had long-since signed off and were reluctant to change (to say the least).

现有的调色板由七种颜色和五种灰色组成，如下图所示。 无论您想到什么颜色选择(可能不多)，这都是Marketing长期以来就签署并不愿更改(至少可以说)的东西。

The company had many hundreds of websites, portals and applications worldwide. And, in the absence of formal guidelines, the palette was applied inconsistently and, very often, in a way that breached accessibility guidelines.

该公司在全球拥有数百个网站，门户网站和应用程序。 而且，在没有正式指南的情况下，调色板的使用不一致，并且经常以违反可访问性指南的方式使用。

My first task was to map the entire palette as a matrix of all possible foreground text and background colour combinations — a bit like a mileage chart. I then analysed all the combinations against WCAG AA and removed the points of failure. This provided an immediate impression of what worked and what didn’t, as shown in the in the animated comparison below.

我的第一个任务是将整个调色板映射为所有可能的前景文本和背景颜色组合的矩阵-有点像里程表。 然后，我针对WCAG AA分析了所有组合，并消除了故障点。 如下面的动画比较中所示，这提供了对有效和无效的直接印象。

That certainly got the stakeholders’ attention. Even some foreground/background combinations that passed, barely did so. I knew matters would become worse once I revised the matrix to that as viewed by the colour-blind. So I created three further versions of the matrix as viewed by those with:

这当然引起了利益相关者的注意。 即使通过了某些前景/背景组合，也几乎没有这样做。 我知道一旦将矩阵修改为色盲所见的矩阵，情况就会变得更糟。 因此，我创建了矩阵的三个其他版本，这些版本被使用：

• protanopia
  盲目
• deuteranopia
  十足的
• tritanopia
  Tritanopia

This revealed further points of failure, as the contrast in some instances dropped below the minimum, depending on the type of colour blindness in question.

这揭示了更多的故障点，因为在某些情况下，对比度下降到最小值以下，具体取决于所讨论的色盲的类型。

I presented all these variations of the matrix as an interactive PDF. Clicking buttons (not shown in these animations) allowed the stakeholders to navigate between them and immediately understand the impact.

我以交互式PDF形式展示了矩阵的所有这些变化。 单击按钮(这些动画中未显示)使涉众可以在它们之间导航并立即了解影响。

By now, the horses — talking or otherwise — were well and truly frightened.

到现在为止，无论说话与否，这些马匹都已经真正地受到了惊吓。

拟议的新调色板 (The Proposed New Palette)

Dramatic changes to the palette was never going to fly — I had already been told that at the outset. So I identified those colours that caused most problems and tweaked them by increasing saturation and/or decreasing lightness just enough to bring the contrast into compliance (including for the colour-blind).

调色板的戏剧性变化永远不会实现-一开始我已经被告知。 因此，我确定了导致大多数问题的那些颜色，并通过增加饱和度和/或降低亮度恰好使对比度达到标准(包括色盲)来对其进行了调整。

I presented the proposed palette (on the right, in the figure below) alongside the existing one (on the left). No changes to the five greys were necessary.

我在现有调色板(左侧)的旁边展示了拟议的调色板(右侧，在下图中)。 无需更改五个灰色。

As it turned out, only four of the seven colours needed adjustment (and the change to the orange was barely perceptible). I was then able to remap the matrix, this time with the proposed new palette and showing only the foreground/background combinations that met with the WCAG AA contrast requirements, shown below.

事实证明，只有七种颜色中的四种需要调整(几乎看不到橙色的变化)。 然后，我能够使用建议的新调色板重新映射矩阵，并仅显示满足WCAG AA对比度要求的前景/背景组合，如下所示。

结果 (The Result)

In my presentation, I compared the matrices of the existing colour palette with the proposed one, as shown below. If you look closely, you will see that the proposed palette yielded more accessible colour combinations than the existing one. This delighted the client which, by now, had fully accepted that the palette needed to change.

在我的演示中，我将现有调色板的矩阵与建议的调色板进行了比较，如下所示。 如果仔细观察，您会发现建议的调色板比现有调色板产生了更多可访问的颜色组合。 到目前为止，客户已经完全接受了需要更改的调色板，这使客户感到高兴。

The result? The company did indeed change its corporate palette to the one I recommended, worldwide. I really cannot overstate what a big deal that is for a multinational. At a later time, over lunch, the head of digital inclusion told me that is was the way in which my analysis was presented that did the trick — it simply couldn’t be ignored.

结果？ 该公司确实确实在全球范围内将公司的调色板更改为我推荐的调色板。 我真的不能高估跨国公司的大事。 后来，在午餐时间，数字包容性负责人告诉我，正是通过这种方式我的分析才得以实现-简直是不容忽视。

A conflation of contrast analysis, an understanding of how to subtly shift colours through saturation and lightness in HSL, and a blow-them-away interactive presentation. That’s all it took to move a mountain.

对比分析的混合体，了解如何通过HSL的饱和度和亮度巧妙地改变颜色，并进行互动演示。 这就是搬山的全部。

Colin Shanley has been a designer and author for more than 30 years. This article is abstracted from his book Colour in User Interface Design, available on Amazon or for direct purchase of the ePUB.

Colin Shanley一直是设计师和作家超过30年。 本文摘自他的书《 用户界面设计中的颜色》 ( 可在Amazon上 购买或直接购买ePUB) 。