什么是WCAG
Web（Web Content Accessibility Guidelines）內(nèi)容無(wú)障礙指南（WCAG）2.0涵蓋范圍廣泛，涉及了一些建議，這些建議可使Web內(nèi)容更容易訪問(wèn)。遵循這些原則，能夠讓內(nèi)容更易為廣大殘障人士所接受，包括失明和低視力、失聰和重聽(tīng)、學(xué)習(xí)障礙、認(rèn)知障礙、行動(dòng)不便、言語(yǔ)殘疾、光過(guò)敏患者和這些病癥的復(fù)合患者。遵循這些原則也可讓普通用戶更容易訪問(wèn)您的Web內(nèi)容。
WCAG 2.0指南結(jié)構(gòu)
原則 - 首先是四大原則，它提供了Web無(wú)障礙的基礎(chǔ)： 可感知性，可操作性，可理解性和魯棒性。參見(jiàn)理解無(wú)障礙四項(xiàng)原則。
準(zhǔn)則 - 原則之下是準(zhǔn)則。提供的12項(xiàng)準(zhǔn)則是為了達(dá)到這樣一個(gè)基本目標(biāo)：作者應(yīng)努力使內(nèi)容更容易讓不同癥狀的殘障用戶能夠訪問(wèn)。該準(zhǔn)則是不可測(cè)試的，但提供了框架和總體目標(biāo)，以幫助作者了解成功標(biāo)準(zhǔn)和更好地實(shí)現(xiàn)該技巧。
成功標(biāo)準(zhǔn) - 對(duì)每一個(gè)準(zhǔn)則，提供了可測(cè)試的成功標(biāo)準(zhǔn)，以允許WCAG 2.0被用在需要進(jìn)行需求和一致性測(cè)試的地方，例如設(shè)計(jì)規(guī)范，采購(gòu)，管理，合同協(xié)議。為了滿足不同的群體和不同的情況，我們定義了一致性的三個(gè)級(jí)別：A（最低），AA，AAA級(jí)（最高）。關(guān)于WCAG級(jí)別的信息可在理解一致性級(jí)別里找到。
充分性技巧和建議性技巧 - 對(duì)于WCAG 2.0文件里每條 準(zhǔn)則和 成功標(biāo)準(zhǔn)，工作組也說(shuō)明了范圍廣泛的各種技巧。該技巧為告知性的，且分為兩類： 充分達(dá)到成功標(biāo)準(zhǔn)的技巧和 建議性技巧。建議性技巧已超越了獨(dú)立的成功標(biāo)準(zhǔn)的范圍，讓作者更好地理解準(zhǔn)則。一些建議性技巧解決了一些障礙，這些障礙在可測(cè)試的成功標(biāo)準(zhǔn)里沒(méi)有覆蓋到。凡是已知的常見(jiàn)錯(cuò)誤，都已記錄在案。參見(jiàn) WCAG2.0里充分性技巧和建議性技巧。
指南的所有層次（原則、準(zhǔn)則、成功標(biāo)準(zhǔn)、以及充分性技巧和建議性技巧）能夠協(xié)調(diào)工作，以提供使內(nèi)容更易于訪問(wèn)的指南。鼓勵(lì)作者瀏覽和應(yīng)用他們能用上的層次，包括建議性技巧，以盡可能更好地滿足用戶的廣泛需求。
如何在UI設(shè)計(jì)中更好的做到內(nèi)容的可辨別性
在UI設(shè)計(jì)過(guò)程中，我們一般情況下要做到WCAG要求達(dá)到的AA、AAA級(jí)標(biāo)準(zhǔn)？
1、AA級(jí)：
對(duì)比度（最?。? 文本**的視覺(jué)呈現(xiàn)以及文本圖像至少要有4.5:1的對(duì)比度
大文本: 大號(hào)文本文本以及大文本圖像至少有3:1的對(duì)比度;
2、AAA級(jí)：
對(duì)比度（加強(qiáng)）: 文本**的視覺(jué)呈現(xiàn)以及文本圖像至少要有7:1的對(duì)比度
大文本: 大號(hào)文本文本以及大文本圖像至少有4.5:1的對(duì)比度;
如何做到以上的對(duì)比度？
以下推薦的三個(gè)網(wǎng)站都能夠輕松查看前景色和背景色的對(duì)比度
-
Corlor review.png
-
WebAIM.png
-
contrastchecker.png
參照以上三個(gè)網(wǎng)址來(lái)查看自己UI設(shè)計(jì)中的文本是否具有易讀性還是很好的，個(gè)人覺(jué)得color review 在查看是否符合A、AA、AAA級(jí)別標(biāo)準(zhǔn)時(shí)比較方便，畢竟每一條線代表一個(gè)層級(jí)的范圍；contrast checker在調(diào)節(jié)色相、飽和度、對(duì)比度單一數(shù)值上具有明顯優(yōu)勢(shì)。
參考文章：
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG
The new guidelines in WCAG 2.1 explained
Web內(nèi)容無(wú)障礙指南 (WCAG) 2.1
