人脸识别及对比_没有“色彩对比可及性的神话”
人臉識(shí)別及對(duì)比
重點(diǎn) (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.
當(dāng)您需要使用界面時(shí)，必須考慮到色彩對(duì)比度，才能使其易于使用。 您有權(quán)害怕失去設(shè)計(jì)精美的界面的部分美感，如果習(xí)慣了對(duì)比度差的話，您是對(duì)的。 可訪問(wèn)性帶有其約束，但僅比UX(用戶體驗(yàn))設(shè)計(jì)多。
Originally published at CreativeJuiz Blog on December 2, 2019.
最初于 2019年12月2日 發(fā)布在 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.
我想從我對(duì)輔助功能和用戶體驗(yàn)的定義開始。 我知道兩者的定義都非常復(fù)雜，專家們并不總是同意，所以對(duì)不起，對(duì)不起，我將嘗試一下。
用戶體驗(yàn) (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.
的 用戶體驗(yàn) 是人們對(duì)產(chǎn)品或服務(wù)所具有的感覺(jué)，嘗試，希望，行動(dòng)，失敗與成功，挫敗感，記憶力等。 根據(jù)您要達(dá)到的目標(biāo)，這種體驗(yàn)可能是不好的也可能是好的。 即使有了不好的體驗(yàn)的想法，這種體驗(yàn)的設(shè)計(jì)者也可能完全故意這樣做。 通常，作為設(shè)計(jì)師，您往往會(huì)以一種很好的方式提供令人難忘的體驗(yàn)，以使您的用戶理解，使用和喜歡該產(chǎn)品/界面。 使界面可用需要了解特定的人群，以便您可以幫助他們以效率，有效性和滿意度來(lái)完成精確的任務(wù)。
輔助功能 (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.
在我們的領(lǐng)域中， 可訪問(wèn)性是一種使盡可能多的人可以使用網(wǎng)站或應(yīng)用程序的實(shí)踐。 我們通常認(rèn)為它僅適用于殘疾人，從定義上講就是這種情況，但是在某些特定的情況或情況下，它肯定會(huì)使其他人群受益。
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.
在用戶體驗(yàn)趨向于滿足一組精確的人群的情況下， 可訪問(wèn)性往往會(huì)在一個(gè)共同的良好體驗(yàn)中包括盡可能多的人，但兩者并不相互排斥。
顏色對(duì)比可及性的神話 (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.
這篇博客文章是對(duì)您一個(gè)月前可能遇到的同名文章的解答。 我不會(huì)在這里鏈接它，我不想推廣它，但有時(shí)我會(huì)與已回答博客文章的作者安東尼交談。
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指出設(shè)計(jì)師社區(qū)中似乎有些神話的事情。 我通過(guò)閱讀文章親自發(fā)現(xiàn)了其中的一些。 問(wèn)題可能不只是Anthony所說(shuō)的，而是他所說(shuō)的方式—它使您認(rèn)為您不應(yīng)該信任最著名的可訪問(wèn)性指南( WCAG )之一，因?yàn)檫@不是用戶所需要的。
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?
本文通過(guò)幾個(gè)視覺(jué)示例為讀者提供指導(dǎo)，其中一個(gè)應(yīng)該被認(rèn)為是可訪問(wèn)的解決方案，而另一個(gè)應(yīng)該被認(rèn)為是不可訪問(wèn)的解決方案，理由是無(wú)法使用的解決方案是殘疾人的首選。 這會(huì)導(dǎo)致您得出錯(cuò)誤的冒險(xiǎn)結(jié)論：難以獲得的解決方案會(huì)是更好的(最好的)解決方案嗎？
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.
我想工作并引導(dǎo)您走上一條更好的道路：分析問(wèn)題并為安東尼演示的每個(gè)示例找到更好的解決方案。 本指南應(yīng)幫助您更好地了解有關(guān)顏色的一些原理，可用的解決方案以及真正檢驗(yàn)假設(shè)的技巧。
誤解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.
確實(shí)不是。 顧名思義，WCAG只是幫助設(shè)計(jì)人員和開發(fā)人員構(gòu)建更好的界面的指南。 當(dāng)您開始用顏色構(gòu)建設(shè)計(jì)時(shí)，人們的品味和用戶需求都會(huì)打擾您的美感和對(duì)令人愉悅與否的感覺(jué)。
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.
無(wú)論如何，設(shè)計(jì)既不關(guān)乎您的喜好，也不關(guān)乎您的品味。 它與可用性和滿足用戶需求有關(guān)。 在大多數(shù)情況下，就可用性而言，顏色并不是必不可少的。 從五十種灰色成分開始。
Some people I know are going way further than me: they design with black and white. (wink wink Inclusive-Components.design by Heydon)
我認(rèn)識(shí)的某些人比我走得更遠(yuǎn)：他們用黑白設(shè)計(jì)。 (由Heydon眨眨眼Inclusive-Components.design )
顏色經(jīng)過(guò)測(cè)試 (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:
但是，讓我們回到彩色的東西。 當(dāng)您需要設(shè)計(jì)帶有顏色的可訪問(wèn)界面時(shí)，兩件事并不重要：
your ego, even if we will need a bit of your taste and expertise to compose the interface and find harmony,
您的自我 ，即使我們需要您的一些品味和專業(yè)知識(shí)來(lái)構(gòu)成界面并找到和諧，
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 😀
品牌顏色定義 ：如果無(wú)法訪問(wèn)，請(qǐng)進(jìn)行更改。 我并不是說(shuō)您應(yīng)該更改原始的品牌顏色，而是選擇一種接近但對(duì)比度更高的界面。 在這里，我們可以根據(jù)您的喜好挑選一個(gè)好😀
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.
我知道這并不總是可能的。 另一個(gè)想法可能是替代樣式表，但是對(duì)我來(lái)說(shuō)，這是讓用戶和品牌推廣者都感到高興的最后一個(gè)解決方案。
Let’s take the same example as Anthony.
讓我們以與安東尼相同的例子為例。
The 2 buttons compared initially最初比較的2個(gè)按鈕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.
我在此插圖上使用了白色和深色背景，因?yàn)锳nthony想到了使用深色圖像進(jìn)行民意測(cè)驗(yàn)的想法，但隨后在他的博客文章中使用白色背景的顏色對(duì)比作為論據(jù)。
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.
您只需要知道： 上下文會(huì)改變您的感覺(jué)和閱讀彩色事物的方式 。 但這是另一個(gè)主題 (我將在本博客文章的后面對(duì)此進(jìn)行快速介紹 )。 在博客的其余部分中，我將研究淺色背景的按鈕。 我不會(huì)使用所有的背景色，我敢肯定您會(huì)舉一個(gè)例子。
white on blue White: #FFF, Blue: #57ACF9
白色/藍(lán)色白色：#FFF，藍(lán)色：＃57ACF9
Font-size: 16px — Font-Weight: medium.
字號(hào)：16像素-字號(hào)：中等。
Contrast ratio: 2.5:1 (minimum 4.5:1)
對(duì)比度：2.5：1(最低4.5：1)
dark on blue Dark: #2D2D2D, Blue: #57ACF9
深藍(lán)色深：＃2D2D2D，藍(lán)色：＃57ACF9
Contrast ratio: 5.6:1 — (expected 4.5:1)
對(duì)比度：5.6：1-(預(yù)期為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:
這是有關(guān)對(duì)比的數(shù)據(jù)。 測(cè)試使用的字體大小為16px，字體粗細(xì)為medium，因?yàn)檫@兩種文本樣式在分析中都很重要：
Looking to the “source” of a survey, the white text is preferred by the people who answered.
著眼于調(diào)查的“ 來(lái)源 ”， 回答者更喜歡白色文本 。
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.
好！ 我對(duì)此有疑問(wèn)。 考慮到一個(gè)簡(jiǎn)單的事實(shí)，全世界將近5％的人是色盲(如果包括其他視覺(jué)障礙，則這個(gè)數(shù)字會(huì)大很多)，而接受調(diào)查的人中有29％的人更喜歡可訪問(wèn)的版本……我不想對(duì)數(shù)字進(jìn)行轉(zhuǎn)置或比較，但回答的人可能是色盲的，即使他們不是，他們中的一些人還是喜歡可訪問(wèn)的版本…很多。
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.
另一件事是，您無(wú)法通過(guò)詢問(wèn)“您喜歡A還是B”來(lái)找到正確的解決方案。 您應(yīng)該問(wèn)：“有多少人容易閱讀A？” 然后是另一個(gè)單獨(dú)的問(wèn)題“有多少人容易讀B？”。 理想情況下，您可能甚至應(yīng)該使用評(píng)級(jí)量表，而不是二進(jìn)制的“輕松閱讀”問(wèn)題。
I would say both of the solutions proposed here are not ok, but why?
我會(huì)說(shuō)這里提出的兩種解決方案都不行，但是為什么呢？
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.
也許是因?yàn)閃CAG正在使用“數(shù)學(xué)”來(lái)計(jì)算所有與感知有關(guān)的事物，這是一個(gè)現(xiàn)實(shí)問(wèn)題。 它甚至已在WCAG存儲(chǔ)庫(kù)中記錄為問(wèn)題 。
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.
更進(jìn)一步，所提出的解決方案完全忘記了亮度和顏色差異 ，這在顏色“對(duì)比度”分析中非常重要。 它涵蓋了色彩感知的另一個(gè)方面，也稱為艾倫綜合癥 ：該綜合癥與高對(duì)比度敏感度有關(guān)。 我想說(shuō)的是WCAG談?wù)摰氖恰吧蕦?duì)比”，但它并不是真正的對(duì)比，而是更多關(guān)于兩種顏色之間的亮度差異。 無(wú)論如何。
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.
亮度與對(duì)比度無(wú)關(guān)，它與光線的感知有關(guān)。 這就是為什么在亮度起作用的情況下分析對(duì)比度是沒(méi)有意義的原因。
Let’s go back to our set of colors and check for Brightness difference and color difference.
讓我們回到我們的顏色組，檢查亮度差異和顏色差異。
white on blue
白底藍(lán)
Brightness difference: 107 (minimum 125)
亮度差：107(最低125)
Color difference: 277 (minimum 500)
色差：277(最低500)
dark on blue
深藍(lán)色
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.
兩者都缺乏差異。 因此，當(dāng)您問(wèn)別人時(shí)，深藍(lán)色仍然不足以產(chǎn)生真正的差異。 他們將更有可能回答口味偏好。
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使用了錯(cuò)誤的度量，但是提出的解決方案根本不正確。 讓我們一起找出如何提高按鈕的可讀性。
如何固定色彩對(duì)比？ (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.
如果首選的顏色似乎是藍(lán)色的白色，則您寧愿將白色保留為文本顏色，并更改為更好的藍(lán)色背景以改善對(duì)比度和顏色差異。
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 ，這是一個(gè)有用的工具，可為您提供指示器，以幫助您選擇正確的可訪問(wèn)顏色集以及渲染圖。
Color Review is a great tool to find alternative accessible color combination“顏色查看”是查找替代的可訪問(wèn)顏色組合的好工具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.
通過(guò)稍微玩些藍(lán)色，我終于找到了一些符合AA要求的東西，并且感覺(jué)到視覺(jué)效果很好，并且與原始要求相當(dāng)接近。 使用Color Contrast Analyzer，我意識(shí)到所選擇的顏色具有更好的顏色和亮度差異。
The new button in between the 2 first proposals前兩個(gè)提案之間的新按鈕With this new blue background, we get some new data that are way close to the expected WCAG requirements:
有了這個(gè)新的藍(lán)色背景，我們得到了一些與預(yù)期的WCAG要求非常接近的新數(shù)據(jù)：
NOT accessible white on blue White: #FFF, Blue: #57ACF9
藍(lán)白色無(wú)法訪問(wèn)白色 ：#FFF，藍(lán)色： ＃57ACF9
Contrast ratio:
對(duì)比度：
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
藍(lán)色可訪問(wèn)白色白色：#FFF，藍(lán)色： ＃0B77D8
Contrast ratio:
對(duì)比度：
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.
為了確認(rèn)這是一個(gè)真正的解決方案而不是品味問(wèn)題， 我在問(wèn)卷中詢問(wèn)了人們對(duì)可讀性的偏愛，還詢問(wèn)了受訪者是否有色盲。 有關(guān)數(shù)字的更多詳細(xì)信息，請(qǐng)參見下一部分。
比較指標(biāo) (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.
毫不奇怪：當(dāng)您單獨(dú)詢問(wèn)什么更具可讀性時(shí)，人們將更有可能為您提供“可讀性”答案，而不僅僅是他們的口味。 無(wú)論如何，這是一些提取的數(shù)據(jù)。
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”
對(duì)于按鈕的每個(gè)視覺(jué)主張，我問(wèn)了一個(gè)相同的問(wèn)題：“您能輕松閱讀此按鈕上的文字嗎？”。 對(duì)于每個(gè)答案，可以使用相同的答案，等級(jí)介于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之間的數(shù)字，它們是視覺(jué)命題的等級(jí)。 在縱軸上，您將找到響應(yīng)數(shù)。
Proposal 1: Button with white text and blue light background
建議1：帶有白色文字和藍(lán)色淺色背景的按鈕
People are pretty at ease with this contrast, even if a lot are still rating less than 4/5 this visual.
即使有很多人仍將這個(gè)視覺(jué)效果評(píng)為低于4/5，人們?nèi)匀豢梢暂p松自在地使用這種對(duì)比。
Proposal 2: Button with dark text and blue light background
提案2：帶有深色文字和藍(lán)色淺色背景的按鈕
A big amount of mixed feelings here. This solution is not good at all if we want to reach our goal.
這里有很多的混合感。 如果我們要實(shí)現(xiàn)我們的目標(biāo)，那么該解決方案根本不是很好。
Proposal 3: Button with white text and blue accessible background
提案3：帶有白色文字和藍(lán)色背景的按鈕
There is almost no debate on this solution. I think we did good.
這種解決方案幾乎沒(méi)有爭(zhēng)議。 我認(rèn)為我們做得很好。
Proposal 4: Button with white shadowed text and blue light background
提案4：帶有白色陰影文字和藍(lán)色淺色背景的按鈕
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.
上一個(gè)測(cè)試希望通過(guò)在文本下方使用陰影同時(shí)保留一組不可訪問(wèn)的顏色來(lái)解決對(duì)比度問(wèn)題。 這沒(méi)有達(dá)到預(yù)期的效果。
結(jié)果解釋 (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.
為了使我們能夠比較我們的解決方案，我會(huì)任意選擇“足夠可讀”的范圍(4分和5分)的人員比例。
The more readable button
更具可讀性的按鈕
Proposal 3 — Proposed more contrasted button.
建議3-建議使用更多對(duì)比按鈕。
Rating: 89.5%
評(píng)分：89.5％
Proposal 1 — Anthony’s inaccessible light blue with white text.
建議1-安東尼難以接近的淺藍(lán)色和白色文字。
Rating: 68.8%
評(píng)分：68.8％
Proposal 4 — The text shadowed version.
提案4-文本陰影版本。
Rating: 56,6%
評(píng)分：56.6％
Proposal 2 — Anthony’s accessible version with dark text.
提案2-安東尼的深色文本無(wú)障礙版本。
Rating: 46,5%
評(píng)分：46,5％
Colorblind Preferences
色盲首選項(xiàng)
Proposal 3 — The proposition I made in term for contrast with the white text.
提案3 –我提出的與白色文本形成對(duì)比的提案。
Rating: 45–90%
評(píng)分：45–90％
Proposal 1 — Anthony’s inaccessible light blue with white text.
建議1-安東尼難以接近的淺藍(lán)色和白色文字。
Rating: 40–80%
評(píng)分：40–80％
Proposal 4 — The text shadowed version.
提案4-文本陰影版本。
Rating: 35–50%
評(píng)分：35–50％
Proposal 2 — Anthony’s accessible version with dark text.
提案2 –安東尼的深色文字版本。
Rating: 35–50%
評(píng)分：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)
結(jié)果就是這里的可訪問(wèn)性：我們成功地提出了一種解決方案，如果我們僅保留4和5等級(jí)，則90.5％的人口可以閱讀該按鈕，而90％的有色盲的人也可以閱讀。 (隨著更多的選民的評(píng)分可能會(huì)更高)
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.
注意： 可能是不使用屏幕閱讀器閱讀內(nèi)容的人口百分比。 請(qǐng)記住，有許多不同程度的視力障礙，我的調(diào)查并沒(méi)有要求提供更多信息來(lái)關(guān)注顏色。
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.
盡管您可能永遠(yuǎn)找不到一個(gè)適用于100％的解決方案，但作為設(shè)計(jì)師的工作是盡可能多地招募人員-如果不確定，請(qǐng)讓他們控制您的界面。
色彩對(duì)比更進(jìn)一步 (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.
當(dāng)人們想到顏色可訪問(wèn)性時(shí)，他們通常會(huì)想到他們的設(shè)計(jì)將變得丑陋。 我真的不知道這個(gè)想法從何而來(lái)，但是我對(duì)此很好奇。
As a designer, you already know that design is always about working within some kinds of constraints:
作為設(shè)計(jì)師，您已經(jīng)知道設(shè)計(jì)總是要在某些約束下進(jìn)行：
- a more or less precise budget 或多或少的精確預(yù)算
- a certain type of material 某種材料
- a limited space (smartphone, tablette, small areas if you are into home staging for example) 有限的空間(例如，智能手機(jī)，平板電腦或小區(qū)域，如果您要進(jìn)入家庭舞臺(tái))
- etc. 等等
Accessibility should only by another constraint, and like the others, should be seen as a focus for creativity and not a blocker.
可訪問(wèn)性應(yīng)僅受另一個(gè)約束，并且與其他約束一樣，應(yīng)被視為創(chuàng)造力的焦點(diǎn)，而不是障礙。
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.
達(dá)里爾·庫(kù)珀史密斯 ( Daryl Koopersmith)和威爾遜·米納 ( Wilson Miner )在“ 設(shè)計(jì)無(wú)障礙色彩系統(tǒng)”上寫了一篇不錯(cuò)的博客文章。 這是一個(gè)很好的示例，說(shuō)明了如何在色彩系統(tǒng)上工作以使其易于訪問(wèn)并使用它構(gòu)建高效的組件。
Note: I heard some stuff about Stripe not being accessible for Screen Readers. That’s another topic, baby steps are better than nothing.
注意 ：我聽到一些有關(guān)Stripe無(wú)法供屏幕閱讀器訪問(wèn)的信息。 那是另一個(gè)話題，嬰兒步總比沒(méi)有好。
關(guān)于上下文：深色界面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.
之前我告訴過(guò)您，測(cè)試的按鈕是在白色背景上，但我故意為您顯示了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).
上下文可以顯示顏色的感知方面，以及您的眼睛和大腦對(duì)顏色的解釋。 顏色感知是在HVS (人類視覺(jué)系統(tǒng)模型)的縮寫下引用的復(fù)雜事物。
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.
為了在這里快速解釋我的觀點(diǎn)，當(dāng)您有一個(gè)淺色界面，一個(gè)藍(lán)色按鈕和一個(gè)白色文本時(shí)，您的眼睛實(shí)際上并不需要進(jìn)行調(diào)整。 相反，在按鈕上使用深色文字會(huì)要求您的眼睛進(jìn)行更多調(diào)整，并且難以識(shí)別。 應(yīng)該。
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.
這就像您在明亮的房間里經(jīng)過(guò)黑暗的房間時(shí)，您的眼睛需要一段時(shí)間才能適應(yīng)光線不足以開始繪制物體的輪廓。正如我所說(shuō)的，感知和大腦是復(fù)雜的東西。
誤區(qū)2：文字需要符合AAA要求，否則無(wú)法訪問(wèn) (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.
盡管我以前從未聽說(shuō)過(guò)這個(gè)神話，但大多數(shù)歐洲政府網(wǎng)站的最低要求是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
歐盟成員國(guó)中的[…]法律有義務(wù)確保其發(fā)布的信息符合可訪問(wèn)性標(biāo)準(zhǔn)，特別是Web內(nèi)容可訪問(wèn)性指南(WCAG)AA標(biāo)準(zhǔn)。 — 來(lái)源
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標(biāo)準(zhǔn)和可訪問(wèn)性專家，他以過(guò)于簡(jiǎn)化的方式向我解釋了該問(wèn)題：
“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的核心點(diǎn)/ AAA是，它們是遵守的單獨(dú)的水平。 它們涵蓋了根據(jù)受影響人口以及準(zhǔn)則失敗的嚴(yán)重程度而定的內(nèi)容。 一個(gè)影響很多人，將是一個(gè)非常不利的/關(guān)鍵的問(wèn)題。 AAA將影響相對(duì)較小的人口比例，可能不那么令人矚目，而更多的是可克服但令人討厭的問(wèn)題，將不成比例地影響該特定用戶群體。 同樣， AAA通常是需要進(jìn)行更多基本更改(在設(shè)計(jì)/布局/等方面)才能解決的標(biāo)準(zhǔn)。 因此，神話是正確只有在“需要滿足AAA的要求，如果你想要求AAA合規(guī)性和是最廣泛大眾的”。 AA通常被認(rèn)為是基線。 AAA超越了一切，為視覺(jué)狀況更為惡劣的人們提供了幫助?！?
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 🙂
同樣，最小的目標(biāo)是鼓勵(lì)人們以更好的可讀性和可讀性為需要幫助的人們做些努力。 如果WCAG有3個(gè)級(jí)別的要求，那就是鼓勵(lì)您走得更遠(yuǎn)，學(xué)習(xí)獲得可訪問(wèn)性的好處。 如果您滿足所有簡(jiǎn)單的A要求，那就已經(jīng)很不錯(cuò)了。 下一步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要求僅適用于老年人 (因?yàn)樗麄兪恰按蠖鄶?shù)”唯一的20/80視力喪失者)和不使用屏幕閱讀器的人，只是為了給您一個(gè)借口，不要滿足那些要求，那么您就沒(méi)有使事物具有包容性。
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.
此外， 我的消息來(lái)源似乎說(shuō)，美國(guó)視力受損的人數(shù)約為數(shù)百萬(wàn)。 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要求有兩個(gè)充分的理由：
- Your user research told you so. 您的用戶研究告訴您。
- You want to be accessible and inclusive by default. 您希望默認(rèn)情況下可訪問(wèn)且包含所有內(nèi)容。
Use global studies to give you a tendency, but don’t get stuck at it: do your own research for your population/users.
使用全球研究可以給您一種趨勢(shì)，但不要被它所束縛：為您的人群/用戶進(jìn)行自己的研究 。
誤解3：灰色文字和按鈕無(wú)法訪問(wèn)，外觀被禁用。 (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.
在我最近在盧森堡第一家保險(xiǎn)公司Foyer進(jìn)行的用戶測(cè)試中，我們有100％的測(cè)試人員最終表現(xiàn)出相同的行為：認(rèn)為盡管有有效的對(duì)比，灰色按鈕仍被禁用。但是我無(wú)法為您提供錄音或統(tǒng)計(jì)信息，但我當(dāng)然可以給您同樣的建議：承受能力帶有許多上下文參數(shù)。
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.
通常，灰色按鈕用于輔助動(dòng)作或取消動(dòng)作，這些動(dòng)作故意不那么引人注目，以幫助用戶專注于我們期望它們執(zhí)行的操作。
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.
您的邊界(例如邊框)不必匹配良好的對(duì)比度，因?yàn)槲谋究梢云ヅ洹?
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)
如果帶有文本的按鈕也具有彩色邊框，則由于邊框不提供唯一的指示，因此沒(méi)有超出文本對(duì)比度的對(duì)比度要求。 — WCAG 1.4.3 —對(duì)比度(最低)
Again, do your own research and don’t forget that you will make mistakes, and that’s totally fine! Learn from those mistakes.
再次，做您自己的研究，不要忘記您會(huì)犯錯(cuò)誤，那完全沒(méi)問(wèn)題！ 從這些錯(cuò)誤中學(xué)習(xí) 。
誤解四：僅使用顏色提示不足以傳達(dá)信息 (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.
這不是神話，這是可訪問(wèn)性的基礎(chǔ)，在某些方面甚至是可用性的基礎(chǔ)知識(shí)。 本節(jié)以“ 使用顏色”為參考，并考慮邏輯和認(rèn)知障礙。
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.
您不能將顏色主題與其他各種可訪問(wèn)性和可用性主題分開。 顏色的可訪問(wèn)性只是該領(lǐng)域的一小部分，必須與其他類型的主題(例如認(rèn)知障礙，行動(dòng)障礙或聽覺(jué)障礙)結(jié)合使用。
The accessibility requirement states that:
可訪問(wèn)性要求指出：
“color should not be used as the only visual means to convey information, indicate an action, or distinguish an element.”
“顏色不應(yīng)該用作傳達(dá)信息，指示動(dòng)作或區(qū)分元素的唯一視覺(jué)手段?！?
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.
但是，本標(biāo)準(zhǔn)僅適用于不同顏色賦予特定含義以通知用戶的情況。 換句話說(shuō)，如果您使用色差來(lái)傳達(dá)信息，則需要額外的提示 。 這是為了視覺(jué)障礙，也為了認(rèn)知障礙。
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.
安東尼說(shuō)：“但是，如果您使用明暗來(lái)傳達(dá)信息，只要對(duì)比度差異足夠高，就不需要額外的提示?！?這是什么意思？我試圖重述措辭，但我做不正確：使用顏色區(qū)分帶來(lái)含義是不夠的。 您可以根據(jù)需要使用明暗，但是它仍然在玩毫無(wú)意義的事物。
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.
是的，嚴(yán)格來(lái)講，對(duì)WCAG的閱讀是安東尼的權(quán)利。 但是，實(shí)用主義還不夠：它仍然會(huì)給用戶帶來(lái)潛在的困惑。
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.
以切換令牌為例，問(wèn)題在于，如果您沒(méi)有足夠的項(xiàng)目，您將不知道令牌的初始狀態(tài)是什么-不管它們是否被激活。 同樣，如果默認(rèn)情況下所有項(xiàng)目均為灰色，則您不知道檢查了什么，沒(méi)有檢查了什么。
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.
再增加一項(xiàng)，您的大腦就可以通過(guò)定義模式來(lái)指導(dǎo)您。 外觀相似的項(xiàng)目具有相同的狀態(tài)，您可以開始猜測(cè)每個(gè)項(xiàng)目的狀態(tài)。 但是，我們不再猜測(cè)，而是開始使用人們習(xí)慣的視覺(jué)提示，而實(shí)際上是為了說(shuō)“這個(gè)被選中”。 可訪問(wèn)性的另一部分是認(rèn)知障礙，使人們猜測(cè)您想說(shuō)的話有時(shí)會(huì)很糟，對(duì)于認(rèn)知障礙的人來(lái)說(shuō)更是如此。
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)
顏色用于裝飾，氛圍和主題。 它應(yīng)該支持您的信息，而不是傳達(dá)信息的唯一方法。 盡管您可以在網(wǎng)絡(luò)上輕松找到許多純粹的文化解釋，但顏色沒(méi)有真正的意義。 當(dāng)然，您將使用紅色來(lái)表示錯(cuò)誤，但真正的含義是您在郵件上加上的文字以及這些文字旁邊的可視指示器。 (例如，圖標(biāo)，圖像)
But even there, the icons are easily interpretable, but that’s another accessibility/usability topic.
但是即使在那兒，圖標(biāo)也很容易解釋，但這是另一個(gè)可訪問(wèn)性/可用性主題。
顏色(對(duì)比度)外賣 (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:
我知道我給您提供了很多信息，有時(shí)與其他專家可以大聲喊出的內(nèi)容相矛盾。 以下是一些要點(diǎn)：
Always do your own tests with your users.
永遠(yuǎn)做你自己的測(cè)試與您的用戶。
- 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％正確，他們正在努力改善公認(rèn)的基本對(duì)比度計(jì)算方法，但這是您需要遵循的參考。
- 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. 如果您考慮可訪問(wèn)性，那么您已經(jīng)做了大量的設(shè)計(jì)工作，現(xiàn)在嘗試練習(xí)并保持開放以獲取反饋。 讓自己犯錯(cuò)誤。
- If you feel lost, ask experts, there is a community to help you, I’m part of it. 如果您感到迷路，請(qǐng)咨詢專家，這里有一個(gè)社區(qū)可以為您提供幫助。
- There is always something more to do better, know when to stop. 總會(huì)有更多事情要做得更好，知道何時(shí)停止。
I’m available: comments and Twitter are there for that 🙂Thanks to Patrick H. Lauke for his kind advice.
我有空：評(píng)論和Twitter都在那。Patrick感謝Patrick H. Lauke的友好建議。
資源和其他外部鏈接 (Resources and other external links)
Accessibility Definition (Wikipedia)
輔助功能定義 (維基百科)
Color Vision Deficiency Simulator
色覺(jué)不足模擬器
Tips to create an accessible color palette (and tools to help you with)
創(chuàng)建可訪問(wèn)調(diào)色板的提示 (以及可幫助您的工具)
Originally published at CreativeJuiz Blog on December 2, 2019.
最初于 2019年12月2日 發(fā)布在 CreativeJuiz博客 上。
翻譯自: https://uxdesign.cc/there-is-no-myths-of-color-contrast-accessibility-7159457420f2
人臉識(shí)別及對(duì)比
總結(jié)
以上是生活随笔為你收集整理的人脸识别及对比_没有“色彩对比可及性的神话”的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： uitest_您在Swift中的第一个U
- 下一篇： 人脸识别技术大起底，你了解多少？