派迪建站：如何為色盲人士設(shè)計(jì)網(wǎng)頁可讀性

顏色在網(wǎng)頁設(shè)計(jì)中總是很重要——但它在與視力相關(guān)的殘障人士的用戶體驗(yàn)中起著至關(guān)重要的作用。選擇錯(cuò)誤的顏色可能是一個(gè)代價(jià)高昂的錯(cuò)誤。

想象一下，您的訪問者無法閱讀您的內(nèi)容，無法從圖表中挑選出重要信息，也無法點(diǎn)擊您的號(hào)召性用語 (CTA) 按鈕。最有可能的是，他們想要離開您的網(wǎng)站——也許是因?yàn)閷?duì)返回沒有興趣。這就是為什么顏色在網(wǎng)絡(luò)可訪問性中很重要。

影響顏色感知的條件比您想象的更常見。因此，在這篇文章中，我們將討論弱視、閱讀障礙和色盲等殘障人士如何體驗(yàn)網(wǎng)絡(luò)。然后我們將解釋如何通過做出更明智的顏色和設(shè)計(jì)選擇來改善網(wǎng)站的可訪問性和用戶體驗(yàn)。

低視力網(wǎng)頁顏色可訪問性

白內(nèi)障是 40 歲以上人群最常見的視力喪失類型，是一種影響對(duì)比度感知的低視力形式。患有白內(nèi)障的人很難在低對(duì)比度背景下閱讀文本，例如白色背景上的淺灰色。 視力低下的人需要的是高對(duì)比度的配色方案。高對(duì)比度模式實(shí)際上內(nèi)置于 Windows 和 Mac 操作系統(tǒng)中。

然而，并不是每個(gè)需要高對(duì)比度模式的人都意識(shí)到它的存在或知道如何打開它。因此，明智的做法是在您的網(wǎng)站上堅(jiān)持使用高對(duì)比度的顏色以方便訪問。

閱讀障礙的網(wǎng)頁顏色可訪問性

閱讀障礙是一種影響閱讀和寫作的學(xué)習(xí)困難，今天有10% 的人 患有閱讀障礙。閱讀障礙會(huì)影響人們?nèi)绾慰创伾?，這可能會(huì)影響可讀性。 雖然高對(duì)比度配色方案（例如純黑色白色）對(duì)視力受損的人有益，但對(duì)于閱讀障礙者來說，這種對(duì)比度可能太大了——他們可能會(huì)發(fā)現(xiàn)頁面上的文字模糊在一起。更安全的選擇是灰白色背景上的深灰色。 一些網(wǎng)站提供替代配色方案，這對(duì)有閱讀障礙的用戶很有幫助。例如，讀障礙協(xié)會(huì)有一個(gè)允許用戶更改背景顏色的控件。 看一看——用戶可以從這個(gè)改變背景……

對(duì)比一下：

接下來讓我們回顧一下色盲人士是如何看待網(wǎng)絡(luò)的。

你能看到下圖中的數(shù)字嗎？嗯，色盲的人不能。

色盲影響了世界 4.5% 的人口，男性占該百分比的最大部分，因?yàn)槟行陨な桥缘?16 倍。這是 8% 對(duì) 0.5%。 紅綠色盲占色覺缺陷的絕大多數(shù)。

這包括患有紅色盲（紅盲）、紅色盲（紅色弱）、綠色盲（綠色盲）和綠色盲（綠色弱）的人。

色盲人士面臨的一個(gè)大問題是網(wǎng)站上僅通過顏色傳達(dá)的信息。這可能會(huì)減慢或混淆色盲訪客，因?yàn)樗麄儽仨毻Ｏ聛砼宄馑肌?例如，對(duì)于視力正常的人來說，看著下面的餅圖，很容易分辨出哪個(gè)等級(jí)對(duì)應(yīng)哪個(gè)百分比。

現(xiàn)在看看紅色盲患者看到的同一張圖表：

該圖表很難解釋，因?yàn)橛行╊伾雌饋硖嗨屏?。很難說哪個(gè)段對(duì)應(yīng)哪個(gè)值。 更好的方法是將彩色部分鏈接到等級(jí)和百分比，或者將等級(jí)和百分比疊加在每個(gè)部分上。 另一種標(biāo)記彩色區(qū)域的解決方案是使用圖案。國(guó)外的設(shè)計(jì)師設(shè)計(jì)了一種色盲友好模式，用于使用紋理和顏色來標(biāo)記卡片。

現(xiàn)在，回到我們的顏色對(duì)比討論——您如何知道您網(wǎng)站的顏色是否可訪問？有一些指南和工具可以幫助您找到答案。

Web 可訪問性顏色對(duì)比

為了滿足網(wǎng)頁內(nèi)容可訪問性指南 (WCAG)指定的最低對(duì)比度級(jí)別，顏色需要滿足網(wǎng)頁上文本和背景之間的正確對(duì)比度。LOGO不符合 Web 可訪問性顏色對(duì)比度要求。 在查看 WCAG 時(shí)，您可能會(huì)看到術(shù)語 A 級(jí)、AA 級(jí)和 AAA 級(jí)。這些代表了 WCAG 定義的不同級(jí)別的一致性，A 是最低的，AAA 是最高的。雖然每個(gè)級(jí)別都滿足標(biāo)準(zhǔn)的要求，但鼓勵(lì)站點(diǎn)所有者超越最低級(jí)別的一致性，并致力于向更高級(jí)別發(fā)展。

文本要求

WCAG 要求您在文本和背景顏色之間提供足夠的對(duì)比度，以便任何人（包括中等視力低下的人）都可以閱讀它。 文本和背景顏色之間所需的對(duì)比度取決于文本的大小和粗細(xì)。例如，較大的文本在較低的對(duì)比度下更容易閱讀，因此對(duì)比度要求較低。讓我們?cè)谙旅嬷付ㄒ蟆?/p>

普通文本：文本和背景之間的對(duì)比度應(yīng)為 4.5:1。這是為 AA 級(jí)選擇的比率。 大文本：對(duì)于大文本，文本和背景之間的對(duì)比度應(yīng)為 3:1。（約 24 像素）或更大的文本被視為“大”。

如果文本是粗體，則只需 14pt（大約 18.5 像素）或更大即可被視為大文本。 增強(qiáng)對(duì)比度。

普通文本的對(duì)比度為 7:1，大文本的對(duì)比度為 4.5:1 被認(rèn)為是增強(qiáng)的。這是為 AAA 級(jí)選擇的比率。白底黑字的對(duì)比度最高，為 21:1。

顏色要求

僅使用顏色來指示操作、提示響應(yīng)或區(qū)分網(wǎng)站上的元素將排除難以感知顏色的用戶。這就是為什么 WCAG 包含禁止顏色成為傳達(dá)信息的唯一視覺方式的指南。 要滿足此成功標(biāo)準(zhǔn)，您必須提供除顏色之外的另一種視覺方式來傳達(dá)信息。例如，用紅色文本標(biāo)記其必填輸入字段的表單不符合使用顏色的成功標(biāo)準(zhǔn)。但是，如果此表單還用帶有“必填”替代文本的圖標(biāo)標(biāo)記其必填字段，那么它就符合標(biāo)準(zhǔn)。

網(wǎng)站的背景顏色

WCAG的另一個(gè)要求是區(qū)分前景和背景，方便用戶看到內(nèi)容。 這就是您必須指定背景顏色的原因。如果指定了文本顏色，但您的網(wǎng)站上沒有背景顏色，那么它將被視為不符合 WCAG 的“可區(qū)分指南”。這是因?yàn)橛脩舻哪J(rèn)背景顏色是未知的，無法評(píng)估是否有足夠的對(duì)比度。如果指定了背景顏色但未指定文本顏色，則同樣適用。