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