WCAG色彩無障礙設計
WCAG(Web Content Accessibility Guidelines)作為無障礙網頁內容的國際標準,確保了無論用戶的視覺能力如何,都能清晰地閱讀和理解網頁內容。本文將詳細介紹WCAG中關于色彩無障礙設計的要求,包括對比度的測算方法和不同字號下應達到的AA級與AAA級標準,幫助設計師和開發者提升網頁內容的可訪問性。
一、什么是WCAG?
WCAG (Web Content Accessibility Guideline)《無障礙網頁內容指南》是萬維網聯盟(W3C)無障礙網頁倡議組織(WAI)發布的一系列無障礙網頁指南中的一部分。
在WCAG 2.0中定義了文本呈現的對比度,就是文字與背景色兩個顏色之間的對比度數值。
比如上面??標簽中:文字色色值為#FFFFFF,背景色色值為#2334FF,將這兩個色值輸入到對比度測算網站中,就可以獲得一個對比度值。
對比度測算網站:https://webaim.org/resources/contrastchecker/
通過測算網站計算得出該文字和顏色的對比度為6.98
二、如何衡量對比度的好壞?
在WCAG中主要定義了2個標準:AA級和AAA級。AAA級比AA級的要求更苛刻,比如同樣14px的小字號,想要達到AA級,對比度至少為4.5:1,如果想要達到AAA級,對比度至少為7:1。比如上面的案例中,對比度為6.98:1,14px字號的情況下,就達不到AAA級標準。
三、AA級標準及AAA級標準字號對照表
在WCAG中還專門定義了小字號和大字號下的兩個標準分別應該達到哪些對比度:
界面設計中最常用的2個數值
通常來說:界面中字體是低于18pt的Normal狀態,按照AA級標準,要達到4.5:1;大于18pt以上要達到3:1。這也是日常界面設計中最關注的兩個數值。所以日常在做界面時,如果發現界面中文字太弱的情況,要及時進行對比度測算,然后調整顏色色值,讓用戶「看得清」,不然真的會極大地拉低產品的用戶體驗。
四、Figma插件推薦 —— 快速測算對比度
Stark Accessibility Tools
直接吸取頁面中的顏色幫助計算,很方便!
作者:陳婉寧,公眾號:婉寧交互設計
本文由@陳婉寧 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!