WCAG（Web Content Accessibility Guidelines）作為無障礙網(wǎng)頁內(nèi)容的國際標準，確保了無論用戶的視覺能力如何，都能清晰地閱讀和理解網(wǎng)頁內(nèi)容。本文將詳細介紹WCAG中關(guān)于色彩無障礙設(shè)計的要求，包括對比度的測算方法和不同字號下應(yīng)達到的AA級與AAA級標準，幫助設(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ù)值。

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

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

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

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

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

三、AA級標準及AAA級標準字號對照表

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

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

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

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

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

Stark Accessibility Tools

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