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%，對於各種顏色、較小文字皆可正常閱讀，色盲部分則有分為紅綠色盲、藍黃色盲或是全色盲（細分為紅色盲、綠色盲、紅色弱、綠色弱、藍色盲、藍色弱等等），也有像是青光眼白內障，網站會顯示該配色對於這些使用者是否友善，以及模擬後的閱讀效果。

另一種情境是當陽光直射或夜間模式啟用時是否可以正常瀏覽和閱讀內容，將頁面往下拖曳就能看到 Direct Sunlight 和 Night Swift Mode 兩個項目，一樣會有評級和模擬效果。