WCAG（Web Content Accessibility Guidelines）作為無障礙網(wǎng)頁內(nèi)容的國際標(biāo)準(zhǔn)，確保了無論用戶的視覺能力如何，都能清晰地閱讀和理解網(wǎng)頁內(nèi)容。本文將詳細(xì)介紹WCAG中關(guān)于色彩無障礙設(shè)計的要求，包括對比度的測算方法和不同字號下應(yīng)達(dá)到的AA級與AAA級標(biāo)準(zhǔn)，幫助設(shè)計師和開發(fā)者提升網(wǎng)頁內(nèi)容的可訪問性。

一、什么是WCAG？

WCAG （Web Content Accessibility Guideline）《無障礙網(wǎng)頁內(nèi)容指南》是萬維網(wǎng)聯(lián)盟(W3C)無障礙網(wǎng)頁倡議組織(WAI)發(fā)布的一系列無障礙網(wǎng)頁指南中的一部分。

在WCAG 2.0中定義了文本呈現(xiàn)的對比度，就是文字與背景色兩個顏色之間的對比度數(shù)值。

比如上面??標(biāo)簽中：文字色色值為#FFFFFF，背景色色值為#2334FF，將這兩個色值輸入到對比度測算網(wǎng)站中，就可以獲得一個對比度值。

對比度測算網(wǎng)站：https://webaim.org/resources/contrastchecker/

通過測算網(wǎng)站計算得出該文字和顏色的對比度為6.98

二、如何衡量對比度的好壞？

在WCAG中主要定義了2個標(biāo)準(zhǔn)：AA級和AAA級。AAA級比AA級的要求更苛刻，比如同樣14px的小字號，想要達(dá)到AA級，對比度至少為4.5:1，如果想要達(dá)到AAA級，對比度至少為7:1。比如上面的案例中，對比度為6.98:1，14px字號的情況下，就達(dá)不到AAA級標(biāo)準(zhǔn)。

三、AA級標(biāo)準(zhǔn)及AAA級標(biāo)準(zhǔn)字號對照表

在WCAG中還專門定義了小字號和大字號下的兩個標(biāo)準(zhǔn)分別應(yīng)該達(dá)到哪些對比度：

界面設(shè)計中最常用的2個數(shù)值

通常來說：界面中字體是低于18pt的Normal狀態(tài)，按照AA級標(biāo)準(zhǔn)，要達(dá)到4.5:1；大于18pt以上要達(dá)到3:1。這也是日常界面設(shè)計中最關(guān)注的兩個數(shù)值。所以日常在做界面時，如果發(fā)現(xiàn)界面中文字太弱的情況，要及時進(jìn)行對比度測算，然后調(diào)整顏色色值，讓用戶「看得清」，不然真的會極大地拉低產(chǎn)品的用戶體驗(yàn)。

四、Figma插件推薦 —— 快速測算對比度

Stark Accessibility Tools

直接吸取頁面中的顏色幫助計算，很方便！