本周馬克筆設(shè)計(jì)留學(xué)的安老師想跟大家分享一個(gè)你八成不了解關(guān)于文字顏色的知識(shí)點(diǎn)。

根據(jù)世界衛(wèi)生組織的統(tǒng)計(jì)報(bào)告，全球范圍內(nèi)，大約有22億人擁有視力受損（visually impaired）的問(wèn)題。這其中包含了從輕度的視力問(wèn)題，到重度的眼部疾病，甚至完全失明的人群。那么在這個(gè)高度電子化的時(shí)代，大量信息來(lái)源于網(wǎng)絡(luò)，而獲取這些信息需要使用屏幕進(jìn)行閱讀，所以緊隨而來(lái)的問(wèn)題就出現(xiàn)了，如何讓視覺(jué)受損人群舒適的閱讀這些信息呢？

這里就要提到WCAG，全稱(chēng)是Web Content Accessibility Guidlines（網(wǎng)頁(yè)內(nèi)容無(wú)障礙指南），它們是一組是網(wǎng)頁(yè)內(nèi)容更容易訪(fǎng)問(wèn)的建議，主要針對(duì)殘疾人，WCAG 2.1于2018年6月成為W3C推薦標(biāo)準(zhǔn)。 這個(gè)指南中給出了相關(guān)建議，可使網(wǎng)站內(nèi)容更容易訪(fǎng)問(wèn)。遵循這些原則，web內(nèi)容更易為廣大殘疾人士所接受，這些包括盲人和低視患者、聾人和重聽(tīng)人、學(xué)習(xí)障礙、認(rèn)知障礙、行動(dòng)不便、言語(yǔ)殘疾、光過(guò)敏患者和這些病癥的復(fù)合患者。而我要和大家分享就是其中關(guān)于視障礙人群的在文字用色方面的小知識(shí)。

通過(guò)在文本和背景之間提供足夠的對(duì)比度，讓弱視人群在不使用增強(qiáng)對(duì)比度的輔助技術(shù)的前提下可以較省力的閱讀該文本。對(duì)于沒(méi)有色盲的人，通過(guò)閱讀性能評(píng)估，色相和保護(hù)度對(duì)可讀性的影響很小或者沒(méi)有影響。

文字顏色和背景顏色的標(biāo)準(zhǔn)分為一下幾種，從上到下為不合格到最高標(biāo)準(zhǔn)：

• 不合格（Fail）- 文字顏色和背景顏色沒(méi)有形成足夠的反差

• AA Large – 對(duì)于18號(hào)或以上字號(hào)的文字內(nèi)容，這個(gè)級(jí)別的反差度是最低要求。反差度不低于3:1

• AA – 低于18號(hào)的文字的最優(yōu)級(jí)別。反差度不低于4.5:1

• AAA – 對(duì)比增強(qiáng)，對(duì)比度不小于7:1

這里要注意的是，裝飾性文字內(nèi)容和品牌logo不需要考慮最小對(duì)比度問(wèn)題。

那么如何知道你的文字顏色和背景顏色的對(duì)比度到底符不符合標(biāo)準(zhǔn)呢，這里推薦一個(gè)比較簡(jiǎn)單易用且直觀的工具，來(lái)自Adobe Color里的“Accessibility Tools”中的對(duì)比度檢查工具（Contrast Checker）。

（https://color.adobe.com/create/color-accessibility）

通過(guò)使用這個(gè)工具，你就可以輕松知道你選擇的文字顏色和背景顏色是否達(dá)到了無(wú)障礙要求。比如上圖中的白色文字和橙色底圖。

在雙AA的標(biāo)準(zhǔn)下，白色字體和橙色背景的對(duì)比為3.68:1，低于了AA的4.5:1的標(biāo)準(zhǔn)，所以我們可以看到，17號(hào)或以下字體就沒(méi)有通過(guò)。

而在最嚴(yán)苛的AAA標(biāo)準(zhǔn)下，3.68:1的對(duì)比度遠(yuǎn)遠(yuǎn)低于最低標(biāo)準(zhǔn)7:1，所以無(wú)論是大字號(hào)還是小字號(hào)甚至是圖形，都無(wú)法通過(guò)。

經(jīng)常被大家吐槽的各地警方的通告藍(lán)經(jīng)過(guò)我的測(cè)試，都是可以通過(guò)AA標(biāo)準(zhǔn)的，甚至有一些還可以通過(guò)AAA標(biāo)準(zhǔn)。

再比如，很多同學(xué)喜歡使用的橙黃色背景配白色文字的情況，反而連AA標(biāo)準(zhǔn)都完全通過(guò)不了，對(duì)比度只有可憐的1.71:1。顯然這種情況，甚至?xí)o視覺(jué)正常的人也造成一定的閱讀困擾，長(zhǎng)時(shí)間閱讀可能會(huì)造成視覺(jué)疲勞。

不過(guò)，在實(shí)際的操作中，大家還是要根據(jù)具體的情況而定，也不一定非要符合這個(gè)標(biāo)準(zhǔn)。比如剛提到的這種橙黃色搭配白色字體的情況，如果沒(méi)有大面積使用，只是偶爾出現(xiàn)的話(huà)，我認(rèn)為也是沒(méi)有什么太大問(wèn)題的。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷   作者：馬克筆設(shè)計(jì)留學(xué)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)