16位調(diào)色板和32位調(diào)色板

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年代那樣，當(dāng)時沒有潛在的客戶感興趣。 但是，即使在今天(更開明的時代)，我遇到的大多數(shù)公司仍然希望對可訪問性大加喧noise，而實(shí)際上并沒有認(rèn)真地努力解決它(這不是夸張，我所說的是家喻戶曉的名字)。

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).

從頭開始創(chuàng)建調(diào)色板并不是設(shè)計(jì)師(甚至是自由職業(yè)者)經(jīng)常要做的事情。 當(dāng)然，那里有一些綠地項(xiàng)目，但是比會說話的馬少一些。 絕大多數(shù)情況是您將繼承其他人(不一定是設(shè)計(jì)師創(chuàng)建的調(diào)色板)，這可能是市場部的成果。

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).

調(diào)色板故障(如何在UI中應(yīng)用顏色)是最常見的可訪問性問題之一。 那么，當(dāng)您知道所使用的調(diào)色板有多個故障點(diǎn)時會發(fā)生什么？ 您不能簡單地繼續(xù)進(jìn)行，要制造出您知道失敗可訪問性要求的設(shè)計(jì)。 更糟糕的是，樣式指南可能會(而且經(jīng)常會)要求使用不符合最低對比度標(biāo)準(zhǔn)的前景色/背景色組合(在處理不透明的顏色時尤其如此)。

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.

根據(jù)可訪問性標(biāo)準(zhǔn)檢查調(diào)色板并識別故障是一回事。 但是，向您的涉眾出售經(jīng)修訂的調(diào)色板是另一回事。 在最佳時機(jī)，讓跨國公司改變一切都是一個艱難的要求。 但是，讓他們改變公司的調(diào)色板所面臨的挑戰(zhàn)要比在勺子上平衡著雞蛋的大亨滑雪場要困難得多。 市場部門通常會選擇更換設(shè)計(jì)師，而不是更改其調(diào)色板。

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.

但是可以實(shí)現(xiàn)。 而且，就像很多事情一樣，這完全取決于演示。 說明這一點(diǎn)的最好方法是引導(dǎo)您完成現(xiàn)實(shí)生活中的案例研究。

更改公司的調(diào)色板 (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領(lǐng)域的大型國際公司的數(shù)字包容性全球負(fù)責(zé)人聯(lián)系。 自由裁量權(quán)是最重要的部分，我不愿透露公司名稱。 但足以說，該公司在70多個國家/地區(qū)擁有業(yè)務(wù)，并擁有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.

數(shù)字包容性負(fù)責(zé)人知道公司調(diào)色板無法訪問(盡管尚未量化)。 但是盡管多年來要求改變，但他的懇求卻置若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.

我的簡介是量化面板中的故障點(diǎn)(相對于WCAG AA級)，并提出使面板達(dá)到合規(guī)性所需的最小更改。 因此，我專注于低視力和色盲的最終用戶。

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要求圖形和用戶界面組件(例如圖標(biāo)，表單輸入字段邊框等)的對比度至少為3：1。

現(xiàn)有調(diào)色板 (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).

現(xiàn)有的調(diào)色板由七種顏色和五種灰色組成，如下圖所示。 無論您想到什么顏色選擇(可能不多)，這都是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.

該公司在全球擁有數(shù)百個網(wǎng)站，門戶網(wǎng)站和應(yīng)用程序。 而且，在沒有正式指南的情況下，調(diào)色板的使用不一致，并且經(jīng)常以違反可訪問性指南的方式使用。

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.

我的第一個任務(wù)是將整個調(diào)色板映射為所有可能的前景文本和背景顏色組合的矩陣-有點(diǎn)像里程表。 然后，我針對WCAG AA分析了所有組合，并消除了故障點(diǎn)。 如下面的動畫比較中所示，這提供了對有效和無效的直接印象。

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:

這當(dāng)然引起了利益相關(guān)者的注意。 即使通過了某些前景/背景組合，也幾乎沒有這樣做。 我知道一旦將矩陣修改為色盲所見的矩陣，情況就會變得更糟。 因此，我創(chuàng)建了矩陣的三個其他版本，這些版本被使用：

• 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.

這揭示了更多的故障點(diǎn)，因?yàn)樵谀承┣闆r下，對比度下降到最小值以下，具體取決于所討論的色盲的類型。

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形式展示了矩陣的所有這些變化。 單擊按鈕(這些動畫中未顯示)使涉眾可以在它們之間導(dǎo)航并立即了解影響。

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

到現(xiàn)在為止，無論說話與否，這些馬匹都已經(jīng)真正地受到了驚嚇。

擬議的新調(diào)色板 (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).

調(diào)色板的戲劇性變化永遠(yuǎn)不會實(shí)現(xiàn)-一開始我已經(jīng)被告知。 因此，我確定了導(dǎo)致大多數(shù)問題的那些顏色，并通過增加飽和度和/或降低亮度恰好使對比度達(dá)到標(biāo)準(zhǔn)(包括色盲)來對其進(jìn)行了調(diào)整。

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.

我在現(xiàn)有調(diào)色板(左側(cè))的旁邊展示了擬議的調(diào)色板(右側(cè)，在下圖中)。 無需更改五個灰色。

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.

事實(shí)證明，只有七種顏色中的四種需要調(diào)整(幾乎看不到橙色的變化)。 然后，我能夠使用建議的新調(diào)色板重新映射矩陣，并僅顯示滿足WCAG AA對比度要求的前景/背景組合，如下所示。

結(jié)果 (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.

在我的演示中，我將現(xiàn)有調(diào)色板的矩陣與建議的調(diào)色板進(jìn)行了比較，如下所示。 如果仔細(xì)觀察，您會發(fā)現(xiàn)建議的調(diào)色板比現(xiàn)有調(diào)色板產(chǎn)生了更多可訪問的顏色組合。 到目前為止，客戶已經(jīng)完全接受了需要更改的調(diào)色板，這使客戶感到高興。

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.

結(jié)果？ 該公司確實(shí)確實(shí)在全球范圍內(nèi)將公司的調(diào)色板更改為我推薦的調(diào)色板。 我真的不能高估跨國公司的大事。 后來，在午餐時間，數(shù)字包容性負(fù)責(zé)人告訴我，正是通過這種方式我的分析才得以實(shí)現(xiàn)-簡直是不容忽視。

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的飽和度和亮度巧妙地改變顏色，并進(jìn)行互動演示。 這就是搬山的全部。

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一直是設(shè)計(jì)師和作家超過30年。 本文摘自他的書《 用戶界面設(shè)計(jì)中的顏色》 ( 可在Amazon上 購買或直接購買ePUB) 。

翻譯自: https://medium.com/sketch-app-sources/making-a-palette-accessible-554694dcf037

16位調(diào)色板和32位調(diào)色板

總結(jié)

以上是生活随笔為你收集整理的16位调色板和32位调色板_使调色板可访问的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。