WCAG（Web Content Accessibility Guidelines）作為無障礙網(wǎng)頁內(nèi)容的國際標(biāo)準(zhǔn)，確保了無論用戶的視覺能力如何，都能清晰地閱讀和理解網(wǎng)頁內(nèi)容。本文將詳細(xì)介紹WCAG中關(guān)于色彩無障礙設(shè)計(jì)的要求，包括對(duì)比度的測算方法和不同字號(hào)下應(yīng)達(dá)到的AA級(jí)與AAA級(jí)標(biāo)準(zhǔn)，幫助設(shè)計(jì)師和開發(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)的對(duì)比度，就是文字與背景色兩個(gè)顏色之間的對(duì)比度數(shù)值。

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

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

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

二、如何衡量對(duì)比度的好壞？

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

三、AA級(jí)標(biāo)準(zhǔn)及AAA級(jí)標(biāo)準(zhǔn)字號(hào)對(duì)照表

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

如何定义B端产品及B端产品经理方法论

相较于C端产品，B端产品最大的特点是：面向特定领域用户，且数量少得多，但更注重对用户专业领域操作流程的深度挖掘——也就是专业性更强，与业务的结合更紧密。

查看详情 >

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

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

四、Figma插件推薦 —— 快速測算對(duì)比度

Stark Accessibility Tools

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