Who Can Use 檢查網頁配色對視力障礙使用者友善程度

全球資訊網協會（World Wide Web Consortium，W3C）制定的網頁內容無障礙指南相信大家不陌生，網頁內容無障礙指南（Web Content Accessibility Guidelines，WCAG）用於讓網頁可以更容易被訪問，藉由這些原則，讓內容能夠被廣大的身心障礙人士使用，其中涉及到可感知性、可操作性和可理解性等各種層面。

撇除設計網頁功能等技術不說，網站主比較會注意到的應該就是文字大小和顏色問題，之前推薦過的 Colorable 網頁色彩線上產生器可以產生符合 WCAG 規範的配色；Hex Naw 檢視你的網站配色對比和可視性評分；或是 Koa11y 可檢測網頁有無符合網頁親和力 A11y 各項指標，都能讓你對於色彩和網站易用性之間的連結有一些初步的認知。

昨天在 Twitter 看到網友推薦一個很棒的網站「Who Can Use」，讓我們更了解色彩對比度對於視力障礙者造成的影響，只要設定前景、背景色、文字大小和樣式，網站就會顯示該配色在 WCAG 評級是否對視障使用者友善。

但我覺得最重要的是 Who Can Use 會顯示各種視力障礙類型、說明、人口比例、評級，像是我們很常聽到的色盲（還分為紅綠色盲、藍黃色盲），部分色盲、全色盲、白內障、青光眼、弱視，透過模擬方式顯示這些使用者在瀏覽該配色組合時可能看到的樣貌。也有當陽光直射或夜間模式（Night Shift Mode）啟用的情況下是否能夠正常瀏覽內容。

Who Can Use
https://whocanuse.com/

使用教學

STEP 1

開啟 Who Can Use 後預設是一個紫色背景、白色文字、字體大小 20px 的組合。

STEP 2

我們先從左下角調整要測試的顏色，例如免費資源網路社群 #FFFFFF 背景、#333333 文字顏色，讓大家看得更清楚，我把前景背景稍微對調一下，文字大小提高到 20px ，如果你要測試的文字是粗體，記得要勾選「Bold」選項。

接著 Who Can Use 就會顯示該配色的對比值，以及 WCAG 評分，最好的是 AAA，移動到上方會有相關說明。

STEP 3

前面有提到 Who Can Use 最有價值的部分是對於各種視力障礙族群的評分，像是正常視力約佔 68%，對於各種顏色、較小文字皆可正常閱讀，色盲部分則有分為紅綠色盲、藍黃色盲或是全色盲（細分為紅色盲、綠色盲、紅色弱、綠色弱、藍色盲、藍色弱等等），也有像是青光眼白內障，網站會顯示該配色對於這些使用者是否友善，以及模擬後的閱讀效果。