2021-6-4 資深UI設(shè)計(jì)者
本周馬克筆設(shè)計(jì)留學(xué)的安老師想跟大家分享一個(gè)你八成不了解關(guān)于文字顏色的知識(shí)點(diǎn)。
根據(jù)世界衛(wèi)生組織的統(tǒng)計(jì)報(bào)告，全球范圍內(nèi)，大約有22億人擁有視力受損（visually impaired）的問題。這其中包含了從輕度的視力問題，到重度的眼部疾病，甚至完全失明的人群。那么在這個(gè)高度電子化的時(shí)代，大量信息來源于網(wǎng)絡(luò)，而獲取這些信息需要使用屏幕進(jìn)行閱讀，所以緊隨而來的問題就出現(xiàn)了，如何讓視覺受損人群舒適的閱讀這些信息呢？
這里就要提到WCAG，全稱是Web Content Accessibility Guidlines（網(wǎng)頁內(nèi)容無障礙指南），它們是一組是網(wǎng)頁內(nèi)容更容易訪問的建議，主要針對殘疾人，WCAG 2.1于2018年6月成為W3C推薦標(biāo)準(zhǔn)。 這個(gè)指南中給出了相關(guān)建議，可使網(wǎng)站內(nèi)容更容易訪問。遵循這些原則，web內(nèi)容更易為廣大殘疾人士所接受，這些包括盲人和低視患者、聾人和重聽人、學(xué)習(xí)障礙、認(rèn)知障礙、行動(dòng)不便、言語殘疾、光過敏患者和這些病癥的復(fù)合患者。而我要和大家分享就是其中關(guān)于視障礙人群的在文字用色方面的小知識(shí)。
通過在文本和背景之間提供足夠的對比度，讓弱視人群在不使用增強(qiáng)對比度的輔助技術(shù)的前提下可以較省力的閱讀該文本。對于沒有色盲的人，通過閱讀性能評估，色相和保護(hù)度對可讀性的影響很小或者沒有影響。
文字顏色和背景顏色的標(biāo)準(zhǔn)分為一下幾種，從上到下為不合格到最高標(biāo)準(zhǔn)：
不合格（Fail）- 文字顏色和背景顏色沒有形成足夠的反差
AA Large – 對于18號(hào)或以上字號(hào)的文字內(nèi)容，這個(gè)級(jí)別的反差度是最低要求。反差度不低于3:1
AA – 低于18號(hào)的文字的最優(yōu)級(jí)別。反差度不低于4.5:1
AAA – 對比增強(qiáng)，對比度不小于7:1
這里要注意的是，裝飾性文字內(nèi)容和品牌logo不需要考慮最小對比度問題。
那么如何知道你的文字顏色和背景顏色的對比度到底符不符合標(biāo)準(zhǔn)呢，這里推薦一個(gè)比較簡單易用且直觀的工具，來自Adobe Color里的“Accessibility Tools”中的對比度檢查工具（Contrast Checker）。
（https://color.adobe.com/create/color-accessibility）
通過使用這個(gè)工具，你就可以輕松知道你選擇的文字顏色和背景顏色是否達(dá)到了無障礙要求。比如上圖中的白色文字和橙色底圖。
在雙AA的標(biāo)準(zhǔn)下，白色字體和橙色背景的對比為3.68:1，低于了AA的4.5:1的標(biāo)準(zhǔn)，所以我們可以看到，17號(hào)或以下字體就沒有通過。
而在最嚴(yán)苛的AAA標(biāo)準(zhǔn)下，3.68:1的對比度遠(yuǎn)遠(yuǎn)低于最低標(biāo)準(zhǔn)7:1，所以無論是大字號(hào)還是小字號(hào)甚至是圖形，都無法通過。
經(jīng)常被大家吐槽的各地警方的通告藍(lán)經(jīng)過我的測試，都是可以通過AA標(biāo)準(zhǔn)的，甚至有一些還可以通過AAA標(biāo)準(zhǔn)。
再比如，很多同學(xué)喜歡使用的橙黃色背景配白色文字的情況，反而連AA標(biāo)準(zhǔn)都完全通過不了，對比度只有可憐的1.71:1。顯然這種情況，甚至?xí)o視覺正常的人也造成一定的閱讀困擾，長時(shí)間閱讀可能會(huì)造成視覺疲勞。
不過，在實(shí)際的操作中，大家還是要根據(jù)具體的情況而定，也不一定非要符合這個(gè)標(biāo)準(zhǔn)。比如剛提到的這種橙黃色搭配白色字體的情況，如果沒有大面積使用，只是偶爾出現(xiàn)的話，我認(rèn)為也是沒有什么太大問題的。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：馬克筆設(shè)計(jì)留學(xué)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.b186.net