當前位置：首頁 > 人工智能 > pytorch >内容正文

pytorch

人脸识别及对比_没有“色彩对比可及性的神话”

發布時間：2023/12/9 pytorch 61 豆豆

生活随笔收集整理的這篇文章主要介紹了人脸识别及对比_没有“色彩对比可及性的神话” 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

人臉識別及對比

重點 (Top highlight)

When you need to work on interfaces, color contrast is a real thing you have to take into account to make it accessible. You have the right to be afraid of losing part of the aesthetics of your beautifully well-designed interface, and you are right if you are used to a poor contrast ratio. Accessibility comes with its constraint, but not much more than UX (User Experience) Design.

當您需要使用界面時，必須考慮到色彩對比度，才能使其易于使用。您有權害怕失去設計精美的界面的部分美感，如果習慣了對比度差的話，您是對的。可訪問性帶有其約束，但僅比UX(用戶體驗)設計多。

Originally published at CreativeJuiz Blog on December 2, 2019.

最初于 2019年12月2日發布在 CreativeJuiz博客上。

定義 (Definitions)

I would like to start with my definitions of Accessibility and User Experience. I know the definition of both is quite complex and not always shared by the experts, so sorry not sorry, I’ll give it a try.

我想從我對輔助功能和用戶體驗的定義開始。我知道兩者的定義都非常復雜，專家們并不總是同意，所以對不起，對不起，我將嘗試一下。

用戶體驗 (User Experience)

The User Experience is the feeling, the attempts, the hope, the actions, the failure and success, the frustration, the memory, etc. a person has with a product or a service. Depending on the goal you want to reach, this experience can be bad or good. Even with the idea of reaching a bad experience, it could totally be on purpose by the designer of this experience. Oftentime as a designer you tend to provide a memorable experience in a good way to make your users understand, use and love the product/interface. Making interfaces usable comes with the need to understand a specific group of people so that you can help them achieve a precise task with efficiency, effectiveness and satisfaction.

的 用戶體驗 是人們對產品或服務所具有的感覺，嘗試，希望，行動，失敗與成功，挫敗感，記憶力等。根據您要達到的目標，這種體驗可能是不好的也可能是好的。即使有了不好的體驗的想法，這種體驗的設計者也可能完全故意這樣做。通常，作為設計師，您往往會以一種很好的方式提供令人難忘的體驗，以使您的用戶理解，使用和喜歡該產品/界面。使界面可用需要了解特定的人群，以便您可以幫助他們以效率，有效性和滿意度來完成精確的任務。

輔助功能 (Accessibility)

In our domain, Accessibility is the practice of making websites or application usable by as many people as possible. We often think it’s applicable to only people with disabilities, which is by definition the case, but it definitely benefits other groups of people in some specific cases or context.

在我們的領域中， 可訪問性是一種使盡可能多的人可以使用網站或應用程序的實踐。我們通常認為它僅適用于殘疾人，從定義上講就是這種情況，但是在某些特定的情況或情況下，它肯定會使其他人群受益。

Where user experience tend to satisfy a precise group of people, accessibility tends to include as many people as possible in a common good experience, but both are not mutually exclusive.

在用戶體驗趨向于滿足一組精確的人群的情況下， 可訪問性往往會在一個共同的良好體驗中包括盡可能多的人，但兩者并不相互排斥。

顏色對比可及性的神話 (The Myths of Color Contrast Accessibility)

This blog post is an answer to an eponymous article you might have cross some month ago. I won’t link it here, I don’t want to promote it, but I’ll sometimes talk to Anthony the author of the answered blog post.

這篇博客文章是對您一個月前可能遇到的同名文章的解答。我不會在這里鏈接它，我不想推廣它，但有時我會與已回答博客文章的作者安東尼交談。

First, I would like to thank Anthony for pointing out some of the things that seem to be myths around the designer community. I personally discovered some of them by reading the article. The issue is perhaps not so much what Anthony says but the way in which he says it — it makes you think that you shouldn’t trust one of the most known Accessibility Guidelines (WCAG), because it is not what users need.

首先，我要感謝Anthony指出設計師社區中似乎有些神話的事情。我通過閱讀文章親自發現了其中的一些。問題可能不只是Anthony所說的，而是他所說的方式—它使您認為您不應該信任最著名的可訪問性指南( WCAG )之一，因為這不是用戶所需要的。

The article guide readers through several visual examples with one solution that is supposed to be accessible, and one that is supposed to be inaccessible, arguing that the inaccessible solution is preferred by people with disabilities. That leads you to a false risky conclusion: could the inaccessible solution be a better (the best?) solution?

本文通過幾個視覺示例為讀者提供指導，其中一個應該被認為是可訪問的解決方案，而另一個應該被認為是不可訪問的解決方案，理由是無法使用的解決方案是殘疾人的首選。這會導致您得出錯誤的冒險結論：難以獲得的解決方案會是更好的(最好的)解決方案嗎？

I want to work and guide you on a better path: analyze the issue and find a better solution for each example demonstrated by Anthony. This guide should help you better understand some principles around color, available solutions, and tips to really test your hypothesis.

我想工作并引導您走上一條更好的道路：分析問題并為安東尼演示的每個示例找到更好的解決方案。本指南應幫助您更好地了解有關顏色的一些原理，可用的解決方案以及真正檢驗假設的技巧。

誤解1：WCAG要求始終是最佳的 (Myth 1: The WCAG requirements are always optimal)

Indeed they are not. As the name said, WCAG are only guidelines to help designer and developers build better interfaces. When you start building your design with colors, both people’s tastes and user needs will bother your sense of beauty and your feelings about what is delightful or not.

確實不是。顧名思義，WCAG只是幫助設計人員和開發人員構建更好的界面的指南。當您開始用顏色構建設計時，人們的品味和用戶需求都會打擾您的美感和對令人愉悅與否的感覺。

Anyway, designing is neither about your preferences nor about your taste. It’s about usability and matching the user needs. Most of the time, color is not essential in terms of usability. Start with fifty shades of gray compositions.

無論如何，設計既不關乎您的喜好，也不關乎您的品味。它與可用性和滿足用戶需求有關。在大多數情況下，就可用性而言，顏色并不是必不可少的。從五十種灰色成分開始。

Some people I know are going way further than me: they design with black and white. (wink wink Inclusive-Components.design by Heydon)

我認識的某些人比我走得更遠：他們用黑白設計。 (由Heydon眨眨眼Inclusive-Components.design )

顏色經過測試 (The colors tested)

But let’s back to our colored stuff. When you need to design accessible interfaces with colors, 2 things are not important:

但是，讓我們回到彩色的東西。當您需要設計帶有顏色的可訪問界面時，兩件事并不重要：

your ego, even if we will need a bit of your taste and expertise to compose the interface and find harmony,
您的自我 ，即使我們需要您的一些品味和專業知識來構成界面并找到和諧，
the brand color definition: if those are not accessible, change them. I don’t mean you should change the original brand color, but pick one close but more contrasted for your interface. Here we could use your taste to pick the good one 😀
品牌顏色定義 ：如果無法訪問，請進行更改。我并不是說您應該更改原始的品牌顏色，而是選擇一種接近但對比度更高的界面。在這里，我們可以根據您的喜好挑選一個好😀

I know that’s not always possible though. Another Idea could be alternative stylesheet, but to me it’s the last solution to keep both users and branding folks happy.
我知道這并不總是可能的。另一個想法可能是替代樣式表，但是對我來說，這是讓用戶和品牌推廣者都感到高興的最后一個解決方案。

Let’s take the same example as Anthony.

讓我們以與安東尼相同的例子為例。

The 2 buttons compared initially最初比較的2個按鈕

I used white and dark background on this illustration because Anthony had the idea of making a poll using the dark image, but then argumenting on color contrast on his blog post with a white background.

我在此插圖上使用了白色和深色背景，因為Anthony想到了使用深色圖像進行民意測驗的想法，但隨后在他的博客文章中使用白色背景的顏色對比作為論據。

Just for you to know: context changes the way you feel and read colored things. But that’s another topic (I take a quick shot at it later in this blog post). For the rest of the blog post, I’ll study those buttons with a light background. I won’t play with all the background colors, I’m pretty sure you get the idea with one example.

您只需要知道： 上下文會改變您的感覺和閱讀彩色事物的方式 。但這是另一個主題 (我將在本博客文章的后面對此進行快速介紹 )。在博客的其余部分中，我將研究淺色背景的按鈕。我不會使用所有的背景色，我敢肯定您會舉一個例子。

white on blue White: #FFF, Blue: #57ACF9
白色/藍色白色：#FFF，藍色：＃57ACF9

Font-size: 16px — Font-Weight: medium.
字號：16像素-字號：中等。

Contrast ratio: 2.5:1 (minimum 4.5:1)
對比度：2.5：1(最低4.5：1)
dark on blue Dark: #2D2D2D, Blue: #57ACF9
深藍色深：＃2D2D2D，藍色：＃57ACF9

Contrast ratio: 5.6:1 — (expected 4.5:1)
對比度：5.6：1-(預期為4.5：1)

Here’s the data about the contrasts. Tests are made with a font size of 16px and a font-weight of medium, because both of those text styles matter in the analysis:

這是有關對比的數據。測試使用的字體大小為16px，字體粗細為medium，因為這兩種文本樣式在分析中都很重要：

Looking to the “source” of a survey, the white text is preferred by the people who answered.

著眼于調查的“ 來源 ”， 回答者更喜歡白色文本 。

Well! I’ve got an issue with that. Considering the simple fact that almost 5% of the worldwide people are colorblind (consider a way bigger number if you include other visual impairments), and that 29% of the people who answered the poll prefer the accessible version… I don’t want to transpose or compare the numbers, but potentially the people who answered are colorblind, and even if they are not, some of them prefer the accessible version… a lot of them.

好！ 我對此有疑問。 考慮到一個簡單的事實，全世界將近5％的人是色盲(如果包括其他視覺障礙，則這個數字會大很多)，而接受調查的人中有29％的人更喜歡可訪問的版本……我不想對數字進行轉置或比較，但回答的人可能是色盲的，即使他們不是，他們中的一些人還是喜歡可訪問的版本…很多。

Another thing is that you can’t find the right solution by asking “do you prefer A or B”. You should ask: “How many people easily read A?” then on another separate question “How many people easily read B?”. And ideally, instead of a binary “easily read” question, you should probably even use a rating scale.

另一件事是，您無法通過詢問“您喜歡A還是B”來找到正確的解決方案。您應該問：“有多少人容易閱讀A？” 然后是另一個單獨的問題“有多少人容易讀B？”。理想情況下，您可能甚至應該使用評級量表，而不是二進制的“輕松閱讀”問題。

I would say both of the solutions proposed here are not ok, but why?

我會說這里提出的兩種解決方案都不行，但是為什么呢？

Maybe because the WCAG are using Maths for calculating things that are all about perception, and it’s a real issue. It has even been recorded as an issue on the WCAG Repository.

也許是因為WCAG正在使用“數學”來計算所有與感知有關的事物，這是一個現實問題。它甚至已在WCAG存儲庫中記錄為問題。

To go further, the proposed solutions totally forgot the Brightness and Color differences, which is very important in color “contrast” analysis. It covers another aspect of color perception, also known as Irlen Syndrome: this syndrome is about high contrast sensitivity. I’d say that WCAG is talking about “color contrast”, but it’s not really about contrast and more about luminance difference between 2 colors. Anyway.

更進一步，所提出的解決方案完全忘記了亮度和顏色差異 ，這在顏色“對比度”分析中非常重要。它涵蓋了色彩感知的另一個方面，也稱為艾倫綜合癥：該綜合癥與高對比度敏感度有關。我想說的是WCAG談論的是“色彩對比”，但它并不是真正的對比，而是更多關于兩種顏色之間的亮度差異。無論如何。

Brightness is not related to the contrast, it’s related to the perception of light. That’s why analyzing contrast where brightness act is kind of a non-sense.

亮度與對比度無關，它與光線的感知有關。這就是為什么在亮度起作用的情況下分析對比度是沒有意義的原因。

Let’s go back to our set of colors and check for Brightness difference and color difference.

讓我們回到我們的顏色組，檢查亮度差異和顏色差異。

white on blue
白底藍

Brightness difference: 107 (minimum 125)
亮度差：107(最低125)

Color difference: 277 (minimum 500)
色差：277(最低500)
dark on blue
深藍色

Brightness difference: 103 (minimum 125)
亮度差異：103(最低125)

Color difference: 353 (minimum 500)
色差：353(最低500)

Both have a lack of differences. That’s why dark on blue is still not enough to create a real difference when you ask people. They will be more likely to answer with taste preferences.

兩者都缺乏差異。因此，當您問別人時，深藍色仍然不足以產生真正的差異。他們將更有可能回答口味偏好。

So yes, WCAG uses the wrong measure, but the proposed solutions are not correct at all. Let’s find out together how to improve a little bit the readability of our buttons.

因此，是的，WCAG使用了錯誤的度量，但是提出的解決方案根本不正確。讓我們一起找出如何提高按鈕的可讀性。

如何固定色彩對比？ (How to fix color contrast?)

If the preferred color seems to be white on blue, you would rather keep the white as text color and change for a better blue background to improve your contrast and color differentiation.

如果首選的顏色似乎是藍色的白色，則您寧愿將白色保留為文本顏色，并更改為更好的藍色背景以改善對比度和顏色差異。

I love to play with Color.review, a useful tool that gives you indicators to help you pick the right accessible set of colors, with a projection of the rendering.

我喜歡使用Color.review ，這是一個有用的工具，可為您提供指示器，以幫助您選擇正確的可訪問顏色集以及渲染圖。

Color Review is a great tool to find alternative accessible color combination“顏色查看”是查找替代的可訪問顏色組合的好工具

By playing a little bit with the blue, I finally find something respecting the AA requirements and that feel visual good and close enough from the original one. Using Color Contrast Analyzer I realized that the picked colors have way better color and brightness differences.

通過稍微玩些藍色，我終于找到了一些符合AA要求的東西，并且感覺到視覺效果很好，并且與原始要求相當接近。使用Color Contrast Analyzer，我意識到所選擇的顏色具有更好的顏色和亮度差異。

The new button in between the 2 first proposals前兩個提案之間的新按鈕

With this new blue background, we get some new data that are way close to the expected WCAG requirements:

有了這個新的藍色背景，我們得到了一些與預期的WCAG要求非常接近的新數據：

NOT accessible white on blue White: #FFF, Blue: #57ACF9
藍白色無法訪問白色 ：#FFF，藍色： ＃57ACF9

Contrast ratio:
對比度：

2.5:1 (minimum 4.5:1)
2.5：1 (最低4.5：1)

Brightness difference:
亮度差異：

107 (minimum 125)
107 (最低125)

Color difference:
色差：

277 (minimum 500)
277 (最低500)
Accessible white on blue White: #FFF, Blue: #0B77D8
藍色可訪問白色白色：#FFF，藍色： ＃0B77D8

Contrast ratio:
對比度：

4.5:1 (minimum 4.5:1)
4.5：1 (最低4.5：1)

Brightness difference:
亮度差異：

158 (minimum 125)
158 (最低125)

Color difference:
色差：

419 (minimum 500)
419 (最低500)

And to confirm this is a real solution and not a matter of taste, I asked on a questionnaire about people’s preferences on readability, and I also asked I also asked the respondents if they were colorblind. See the next section for more detail on the numbers.

為了確認這是一個真正的解決方案而不是品味問題，我在問卷中詢問了人們對可讀性的偏愛，還詢問了受訪者是否有色盲。有關數字的更多詳細信息，請參見下一部分。

比較指標 (Comparative metrics)

No surprise here: when you ask separately what is the more readable, people will be more likely to give you the “readability” answer and not only their taste in term of color. Anyway, here is some extracted data.

毫不奇怪：當您單獨詢問什么更具可讀性時，人們將更有可能為您提供“可讀性”答案，而不僅僅是他們的口味。無論如何，這是一些提取的數據。

For each visual proposition of a button, I asked the same question: “Can you easily read the text on this button?”. For each, the same answer where available as a rating between 1 and 5, where 1 is “Not easily [readable]”, and 5 is “Yes I read it easily”

對于按鈕的每個視覺主張，我問了一個相同的問題：“您能輕松閱讀此按鈕上的文字嗎？”。對于每個答案，可以使用相同的答案，等級介于1到5之間，其中1是“不容易[可讀]”，而5是“是，我很容易閱讀”

On the next graphs, you will see numbers between 1 and 5 on the horizontal axis, those are the rating of the visual proposition. On the vertical axis you will find the number of responses.

在下一張圖上，您將在水平軸上看到1到5之間的數字，它們是視覺命題的等級。在縱軸上，您將找到響應數。

Proposal 1: Button with white text and blue light background

建議1：帶有白色文字和藍色淺色背景的按鈕

People are pretty at ease with this contrast, even if a lot are still rating less than 4/5 this visual.

即使有很多人仍將這個視覺效果評為低于4/5，人們仍然可以輕松自在地使用這種對比。

Proposal 2: Button with dark text and blue light background

提案2：帶有深色文字和藍色淺色背景的按鈕

A big amount of mixed feelings here. This solution is not good at all if we want to reach our goal.

這里有很多的混合感。如果我們要實現我們的目標，那么該解決方案根本不是很好。

Proposal 3: Button with white text and blue accessible background

提案3：帶有白色文字和藍色背景的按鈕

There is almost no debate on this solution. I think we did good.

這種解決方案幾乎沒有爭議。我認為我們做得很好。

Proposal 4: Button with white shadowed text and blue light background

提案4：帶有白色陰影文字和藍色淺色背景的按鈕

This last test wanted to solve the contrast problem by using a drop shadow under the text while keeping the set of non-accessible colors. This did not have the desired effect.

上一個測試希望通過在文本下方使用陰影同時保留一組不可訪問的顏色來解決對比度問題。這沒有達到預期的效果。

結果解釋 (Results interpretation)

Arbitrarily, I’ll take for “readable enough” the percentage of people included in the upper range (4 and 5 points) to be able to compare our solutions.

為了使我們能夠比較我們的解決方案，我會任意選擇“足夠可讀”的范圍(4分和5分)的人員比例。

The more readable button
更具可讀性的按鈕

Proposal 3 — Proposed more contrasted button.

建議3-建議使用更多對比按鈕。

Rating: 89.5%

評分：89.5％

Proposal 1 — Anthony’s inaccessible light blue with white text.

建議1-安東尼難以接近的淺藍色和白色文字。

Rating: 68.8%

評分：68.8％

Proposal 4 — The text shadowed version.

提案4-文本陰影版本。

Rating: 56,6%

評分：56.6％

Proposal 2 — Anthony’s accessible version with dark text.

提案2-安東尼的深色文本無障礙版本。

Rating: 46,5%

評分：46,5％

Colorblind Preferences
色盲首選項

Proposal 3 — The proposition I made in term for contrast with the white text.

提案3 –我提出的與白色文本形成對比的提案。

Rating: 45–90%

評分：45–90％

Proposal 1 — Anthony’s inaccessible light blue with white text.

建議1-安東尼難以接近的淺藍色和白色文字。

Rating: 40–80%

評分：40–80％

Proposal 4 — The text shadowed version.

提案4-文本陰影版本。

Rating: 35–50%

評分：35–50％

Proposal 2 — Anthony’s accessible version with dark text.

提案2 –安東尼的深色文字版本。

Rating: 35–50%

評分：35–50％

The result is all about accessibility here: we succeed at proposing a solution which makes the button readable by 89.5% of the population if we keep only the 4 and 5 ratings, and 90% of the people with colorblindness. (the ratings would probably have been closer with more voters)

結果就是這里的可訪問性：我們成功地提出了一種解決方案，如果我們僅保留4和5等級，則90.5％的人口可以閱讀該按鈕，而90％的有色盲的人也可以閱讀。 (隨著更多的選民的評分可能會更高)

N.B: it’s probably a percentage of the population that do not use a screen-reader to read the content. Keep in mind that there are many different degrees of visual impairment, my survey did not ask for more information to focus on color.

注意： 可能是不使用屏幕閱讀器閱讀內容的人口百分比。請記住，有許多不同程度的視力障礙，我的調查并沒有要求提供更多信息來關注顏色。

While you’ll likely never find a solution that works for 100%, your job as a designer is to include as many people as you can — and if you’re not sure, give them control over your interface.

盡管您可能永遠找不到一個適用于100％的解決方案，但作為設計師的工作是盡可能多地招募人員-如果不確定，請讓他們控制您的界面。

色彩對比更進一步 (Going Further with Color Contrast)

When people think about color accessibility, they usually come with the idea that their design will end up ugly. I don’t really know where does this idea come from, but I’m really curious about that.

當人們想到顏色可訪問性時，他們通常會想到他們的設計將變得丑陋。我真的不知道這個想法從何而來，但是我對此很好奇。

As a designer, you already know that design is always about working within some kinds of constraints:

作為設計師，您已經知道設計總是要在某些約束下進行：

a more or less precise budget
或多或少的精確預算
a certain type of material
某種材料
a limited space (smartphone, tablette, small areas if you are into home staging for example)
有限的空間(例如，智能手機，平板電腦或小區域，如果您要進入家庭舞臺)
etc.
等等

Accessibility should only by another constraint, and like the others, should be seen as a focus for creativity and not a blocker.

可訪問性應僅受另一個約束，并且與其他約束一樣，應被視為創造力的焦點，而不是障礙。

Daryl Koopersmith and Wilson Miner wrote a pretty good blog post on Designing Accessible Color Systems. It’s a good example of how you can work on your color system to make it accessible and build efficient components with it.

達里爾·庫珀史密斯 ( Daryl Koopersmith)和威爾遜·米納 ( Wilson Miner )在“ 設計無障礙色彩系統”上寫了一篇不錯的博客文章。這是一個很好的示例，說明了如何在色彩系統上工作以使其易于訪問并使用它構建高效的組件。

Note: I heard some stuff about Stripe not being accessible for Screen Readers. That’s another topic, baby steps are better than nothing.

注意：我聽到一些有關Stripe無法供屏幕閱讀器訪問的信息。那是另一個話題，嬰兒步總比沒有好。

關于上下文：深色界面VS淺色界面 (About context: Dark interface VS Light interface)

I told you earlier that the buttons tested were on white background but I have shown you 2 different backgrounds on purpose.

之前我告訴過您，測試的按鈕是在白色背景上，但我故意為您顯示了2種不同的背景。

The context can demonstrate the perceptive aspect of the color and its interpretation by your eyes and your brain. Color perception is a complex thing referencing under the abbreviation of HVS (Human Visual System model).

上下文可以顯示顏色的感知方面，以及您的眼睛和大腦對顏色的解釋。顏色感知是在HVS (人類視覺系統模型)的縮寫下引用的復雜事物。

To quickly explain my point here, when you have a light interface, a blue button and a white text, your eye doesn’t really need to adjust. At the opposite, working with dark text on the button will ask your eye to adjust a little bit more and will be perceived harder to read. Supposedly.

為了在這里快速解釋我的觀點，當您有一個淺色界面，一個藍色按鈕和一個白色文本時，您的眼睛實際上并不需要進行調整。相反，在按鈕上使用深色文字會要求您的眼睛進行更多調整，并且難以識別。應該。

It’s a bit like when you’re in a bright room and you pass by a dark room, it takes a while for your eyes to adjust to the lack of light to start drawing the contours of objects.As I said the perception and the brain are complex things.

這就像您在明亮的房間里經過黑暗的房間時，您的眼睛需要一段時間才能適應光線不足以開始繪制物體的輪廓。正如我所說的，感知和大腦是復雜的東西。

誤區2：文字需要符合AAA要求，否則無法訪問 (Myth 2: Text needs to meet the AAA requirement, or it’s inaccessible)

Despite the fact that I never heard of that myth before, the minimum required for most of the European Administration website is AA.

盡管我以前從未聽說過這個神話，但大多數歐洲政府網站的最低要求是AA。

[…] in the EU Member States are obliged by law to ensure that the information they publish is subject to accessibility standards, in particular the Web Content Accessibility Guidelines (WCAG) AA standards. — Source

歐盟成員國中的[…]法律有義務確保其發布的信息符合可訪問性標準，特別是Web內容可訪問性指南(WCAG)AA標準。 — 來源

Patrick H. Lauke, himself described as WCAG trash panda, Web Standards and Accessibility expert, explained it to me in overly simplified terms:

帕特里克·H·勞克 ( Patrick H. Lauke )自己被描述為WCAG垃圾熊貓，是Web標準和可訪問性專家，他以過于簡化的方式向我解釋了該問題：

“The core point of A/ AA/ AAA is that they are separate levels of compliance. and they cover things based on population affected and how critical a failure of a criterion is. A affects a lot of people and will be a very detrimental/critical problem. AAA will affect a relatively smaller percentage of the population, is is likely less of a show-stopper and more of a surmountable but annoying issue that will disproportionally affects that particular user population. Also, AAA are generally criteria that require more fundamental changes (in design/layout/etc) to address. So the myth is right only in that “you need to meet AAA requirements if you want to claim AAA compliance and be accessible to the widest audience”. AA is generally accepted as the baseline. AAA goes above and beyond, to help people with more severe visual conditions.”

“A / AA的核心點/ AAA是，它們是遵守的單獨的水平。它們涵蓋了根據受影響人口以及準則失敗的嚴重程度而定的內容。一個影響很多人，將是一個非常不利的/關鍵的問題。 AAA將影響相對較小的人口比例，可能不那么令人矚目，而更多的是可克服但令人討厭的問題，將不成比例地影響該特定用戶群體。同樣， AAA通常是需要進行更多基本更改(在設計/布局/等方面)才能解決的標準。因此，神話是正確只有在“需要滿足AAA的要求，如果你想要求AAA合規性和是最廣泛大眾的”。 AA通常被認為是基線。 AAA超越了一切，為視覺狀況更為惡劣的人們提供了幫助。”

Again, the goal with the minimum is to encourage people doing some effort for people in needs with better readability and legibility. If WCAG has 3 levels of requirements it’s to encourage you to go further and learn the benefits of being accessible. If you cover all the simple A requirements, it’s already a good job. Next step AA 🙂

同樣，最小的目標是鼓勵人們以更好的可讀性和可讀性為需要幫助的人們做些努力。如果WCAG有3個級別的要求，那就是鼓勵您走得更遠，學習獲得可訪問性的好處。如果您滿足所有簡單的A要求，那就已經很不錯了。下一步AA🙂

If you are told that AAA requirements is only for aged people (because they are “mostly” the only ones with a vision loss of 20/80) and people who don’t use screen-reader, just to give you an excuse not to meet those requirements, then you are not making things inclusive.

如果您被告知AAA要求僅適用于老年人 (因為他們是“大多數”唯一的20/80視力喪失者)和不使用屏幕閱讀器的人，只是為了給您一個借口，不要滿足那些要求，那么您就沒有使事物具有包容性。

Furthermore my source seems to say that the number of people with impaired vision is about several million in the US. In 2017, 3 894 406 persons with visual impairment less than 20/40, 1 483 703 persons with less than 20/60, and 1 082 790 with 20/200 or less. And those impairments take into account people above 45 years old.

此外，我的消息來源似乎說，美國視力受損的人數約為數百萬。 2017年，視障人士少于20/40的有3894406人，視障人士少于20/60的有1483703人，視障者為20/200以下的1082790。這些障礙考慮了45歲以上的人。

There are 2 good reasons for making things match the AA or AAA requirements:

使事物符合AA或AAA要求有兩個充分的理由：

Your user research told you so.
您的用戶研究告訴您。
You want to be accessible and inclusive by default.
您希望默認情況下可訪問且包含所有內容。

Use global studies to give you a tendency, but don’t get stuck at it: do your own research for your population/users.

使用全球研究可以給您一種趨勢，但不要被它所束縛：為您的人群/用戶進行自己的研究 。

誤解3：灰色文字和按鈕無法訪問，外觀被禁用。 (Myth 3: Gray text and buttons are inaccessible and look disabled.)

Depends.

要看。

In our recent user tests I conducted at Foyer, the first Insurance Company in Luxembourg, we had 100% of our testers ending up with the same behavior: thinking that gray buttons were disabled despite the effective contrast.Sadly I can’t provide you the recordings or statistics here, but I can certainly give you the same advice: affordance comes with a lot of contextual parameters.

在我最近在盧森堡第一家保險公司Foyer進行的用戶測試中，我們有100％的測試人員最終表現出相同的行為：認為盡管有有效的對比，灰色按鈕仍被禁用。但是我無法為您提供錄音或統計信息，但我當然可以給您同樣的建議：承受能力帶有許多上下文參數。

Oftentimes, gray buttons are used for secondary action or cancelling actions, action that are willfully less eye-catching to help user focus on what we expected them to do.

通常，灰色按鈕用于輔助動作或取消動作，這些動作故意不那么引人注目，以幫助用戶專注于我們期望它們執行的操作。

To do so, you can use another set of stylistic combination:

為此，您可以使用另一組樣式組合：

Secondary column次要列上的醒目按鈕較少

Your boundaries (border for example) don’t have to match a good contrast ratio since the text does.

您的邊界(例如邊框)不必匹配良好的對比度，因為文本可以匹配。

If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast. — WCAG 1.4.3 — Contrast (Minimum)

如果帶有文本的按鈕也具有彩色邊框，則由于邊框不提供唯一的指示，因此沒有超出文本對比度的對比度要求。 — WCAG 1.4.3 —對比度(最低)

Again, do your own research and don’t forget that you will make mistakes, and that’s totally fine! Learn from those mistakes.

再次，做您自己的研究，不要忘記您會犯錯誤，那完全沒問題！ 從這些錯誤中學習 。

誤解四：僅使用顏色提示不足以傳達信息 (Myth 4: Using a color cue alone isn’t sufficient in conveying information)

This isn’t a myth, this is accessibility basics, and at some points it’s even a usability basic knowledge. This section take Use of Colors as reference, but also logical and cognitive disabilities into account.

這不是神話，這是可訪問性的基礎，在某些方面甚至是可用性的基礎知識。本節以“ 使用顏色”為參考，并考慮邏輯和認知障礙。

You can’t take the topic of colors separately among the other various topics of accessibility and usability. Accessibility of your colors is only a small part of the field and have to be combined with other types of topics like cognitive impairment, mobility impairment or auditory impairment.

您不能將顏色主題與其他各種可訪問性和可用性主題分開。顏色的可訪問性只是該領域的一小部分，必須與其他類型的主題(例如認知障礙，行動障礙或聽覺障礙)結合使用。

The accessibility requirement states that:

可訪問性要求指出：

“color should not be used as the only visual means to convey information, indicate an action, or distinguish an element.”

“顏色不應該用作傳達信息，指示動作或區分元素的唯一視覺手段。”

However, this standard only applies to cases where different colors assign specific meanings to inform the user. In other words, if you’re using color differences to convey information you need an extra cue. This is made for visual impairment but also for cognitive impairment.

但是，本標準僅適用于不同顏色賦予特定含義以通知用戶的情況。換句話說，如果您使用色差來傳達信息，則需要額外的提示 。這是為了視覺障礙，也為了認知障礙。

Anthony says “But if you’re using lightness and darkness to convey information, you don’t need an extra cue as long as the contrast difference is high enough.”. What does that mean?I tried to rework the phrasing but I can’t get it right: using color differentiation to bring meanings is not enough, period. You can use lightness and darkness if you want, but it’s still playing with things with no meaning at all.

安東尼說：“但是，如果您使用明暗來傳達信息，只要對比度差異足夠高，就不需要額外的提示。” 這是什么意思？我試圖重述措辭，但我做不正確：使用顏色區分帶來含義是不夠的。您可以根據需要使用明暗，但是它仍然在玩毫無意義的事物。

So yes, technically Anthony’s right, in the strict reading of WCAG. But pragmatically is not enough: it still results in potential confusion for users.

是的，嚴格來講，對WCAG的閱讀是安東尼的權利。但是，實用主義還不夠：它仍然會給用戶帶來潛在的困惑。

Keeping the toggle tokens example, the issue is that if you don’t have enough items you don’t know what the initial state of the tokens is — whether they are activated or not. Same if by default all the items are gray, you don’t know what is checked and what isn’t.

以切換令牌為例，問題在于，如果您沒有足夠的項目，您將不知道令牌的初始狀態是什么-不管它們是否被激活。同樣，如果默認情況下所有項目均為灰色，則您不知道檢查了什么，沒有檢查了什么。

With one more item your brain can guide you by defining a pattern. Similar-looking items have the same state and you can start guessing the state for each item. But howabout we stop guessing and start using visual cues people are used to, and that are actually made for saying “this one is selected”. Another part of accessibility gathers cognitive disabilities, and make people guess what you want to say end up badly sometimes, it’s even more true with people with cognitive disabilities.

再增加一項，您的大腦就可以通過定義模式來指導您。外觀相似的項目具有相同的狀態，您可以開始猜測每個項目的狀態。但是，我們不再猜測，而是開始使用人們習慣的視覺提示，而實際上是為了說“這個被選中”。可訪問性的另一部分是認知障礙，使人們猜測您想說的話有時會很糟，對于認知障礙的人來說更是如此。

And voilà! I mean, what does it cost?

和瞧！我的意思是，這要花多少錢？

Color is for decoration, ambiance, theming. It should support your message, not be the only way to convey it. Colors don’t have real meaning despite the numerous purely cultural interpretations you can easily find on the web. Of course you will use red color for errors, but the real meaning is the words you put on your messages, and the visual indicator next to them. (icons, images, for examples)

顏色用于裝飾，氛圍和主題。它應該支持您的信息，而不是傳達信息的唯一方法。盡管您可以在網絡上輕松找到許多純粹的文化解釋，但顏色沒有真正的意義。當然，您將使用紅色來表示錯誤，但真正的含義是您在郵件上加上的文字以及這些文字旁邊的可視指示器。 (例如，圖標，圖像)

But even there, the icons are easily interpretable, but that’s another accessibility/usability topic.

但是即使在那兒，圖標也很容易解釋，但這是另一個可訪問性/可用性主題。

顏色(對比度)外賣 (Color (Contrast) Takeaways)

I know I gave you a lot of information, sometimes in contradiction to what other experts can shout loud and clear. Here are some takeaways:

我知道我給您提供了很多信息，有時與其他專家可以大聲喊出的內容相矛盾。以下是一些要點：

Always do your own tests with your users.
永遠做你自己的測試與您的用戶。
Don’t let your ego kill users feedback.
不要讓你的自我殺死用戶的反饋。
WCAG are not always 100% correct, they are working on improving their admittedly basic contrast calculation methods, but that’s a reference you need to follow.
WCAG并不總是100％正確，他們正在努力改善公認的基本對比度計算方法，但這是您需要遵循的參考。
If you think about accessibility, you already do more than a lot of designers, now try to practice and stay open for feedback. Allow yourself to make mistakes.
如果您考慮可訪問性，那么您已經做了大量的設計工作，現在嘗試練習并保持開放以獲取反饋。讓自己犯錯誤。
If you feel lost, ask experts, there is a community to help you, I’m part of it.
如果您感到迷路，請咨詢專家，這里有一個社區可以為您提供幫助。
There is always something more to do better, know when to stop.
總會有更多事情要做得更好，知道何時停止。

I’m available: comments and Twitter are there for that 🙂Thanks to Patrick H. Lauke for his kind advice.

我有空：評論和Twitter都在那。Patrick感謝Patrick H. Lauke的友好建議。

資源和其他外部鏈接 (Resources and other external links)

Accessibility Definition (Wikipedia)
輔助功能定義 (維基百科)
Color Vision Deficiency Simulator
色覺不足模擬器
Tips to create an accessible color palette (and tools to help you with)
創建可訪問調色板的提示 (以及可幫助您的工具)