網頁無障礙｜使用 Firefox 瀏覽器模擬色弱，改善界面

Jan 28, 2022

我們在開發網站應用時，我們常常會使用不同的顏色作為狀態的區分。例如常見有紅色代表有問題或警示，綠色代表可通行或正常。但我們在使用這些顏色時，可能需要把色弱甚至色盲也一併考慮。否則，一些用戶介面操作，將會讓色弱人士遇上使用困難。在各色弱中，以紅綠色弱最為普遍，總體有約 8% 的男性有紅綠色弱。而由於紅綠色弱是 X 染色體引起，故主要表現在 XY 染色體的男性上。

我們在開發網站應用時，我們常常會使用不同的顏色作為狀態的區分。例如常見有紅色代表有問題或警示，綠色代表可通行或正常。但我們在使用這些顏色時，可能需要把色弱甚至色盲也一併考慮。否則，一些用戶介面操作，將會讓色弱人士遇上使用困難。

在各色弱中，以紅綠色弱最為普遍，總體有約 8% 的男性有紅綠色弱。而由於紅綠色弱是 X 染色體引起，故主要表現在 XY 染色體的男性上。

例子：確認及取消按鈕

例如，若果我們有以下一個確認或取消的確認框介面，使用了綠色及紅色背景。乍看之下沒有甚麼問題。

但若有綠色色弱的人士，大致上將會看到以下畫面。可以看見紅綠兩隻顏色幾乎沒有分別。當然，我們用戶還是可以通過文字來判斷哪個按鈕是哪個。但想像一下如果這些文字是不懂的外文，例如假設在外國網站購物或航班網站進行操作時，有一版半版的文字沒有做多語言支擾，這時色弱的人們們，望著介面就只剩下黑人問號了。

這例子的其中一個解決方法，是只為重要的按鈕設定有色底框，而次要或非首選的按鈕，則使用完全不同的樣式。例如以下修改後，主按鈕就明顯了，若在操作過程中出現這個確認按鈕，使用者便大致可以按對主按鈕並繼續操作。

在 Firefox 中模擬不同的色弱

在 Firefox 瀏覽器中，我們可以模擬不同的色弱。以便開發者對界面的顏色進行調試。工具放在開發者面板的無障礙頁內。可以按鍵盤 F12 或在網頁中右鍵選「檢視」（Inspect）打開開發者面板（Developer Panel），在不同的工具頁中，找到無障礙（Accessibility）。

在這個無障礙工具的上方工具列，有一個 👁 眼睛圖標的，旁邊寫著「模擬」（Simulate），按下可以有不同的色弱視覺效果選擇，包括紅色、綠色、藍色的色弱，灰階色弱模擬。另外亦可以模擬低對比下的視覺情況。

注：這頁無障礙檢測工具，還有其他功能很實用，例如可以生成潛在錯誤列表、檢視文件結構等，和之前介編過的 axe、WAVE、和 headingMaps 有類同之處，我稍後另撰文介紹。

當我們選擇了某一種色弱的視覺效果，整個網頁的顏色就會渲染為假若色弱人士會望到的版本。

以彩虹色做例子

以下以之前介紹的 CSS 畫彩虹色作例子，以下是正常情況下的彩色效果。

接著我們打開 Firefox 的無障礙工具，分別模擬看看不同的色弱人士，看到的是甚麼顏色組合。

紅色色弱：

綠色色弱（常見）：

可以看出綠色色弱人士看到接近原色的紅色和綠色幾乎都一樣。只有很些微的深淺之分。

藍色色弱（非常罕有）：

灰階（非常罕有）：

實例：澳門巴士報站資訊網

從上述各圖中可見，原色的紅色（#FF0000）和原色的綠色（#00FF00）對綠色色弱人士是很難區分的。而偏偏這兩隻色在網站中頗為常用。例如以下為澳門巴士報站網頁為例。

網址為：

https://bis.dsat.gov.mo:37812/macauweb/routeLine.html?routeName=12&direction=0&language=zh-tw

注：澳門的讀者們，若您們平時有搭巴士需要使用巴士報站 App。可以考慮直接將上述網址加到手機主畫面，一步直接打開平時要搭的巴士路線。有多條路線的，可以將當中的巴士數字替換，都加到主畫面目錄中便可。以後當要查看巴士在哪時，您一鍵打開看完，別人還在等 App 載入或在列表中找路線。

有部份的巴士路線，會有紅綠黃色代表該段的道路塞車情況。以下為紅/綠色弱人士看到的情況，當中代表塞車的紅色和代表暢通的綠色非常相似，甚至一樣。

由於紅色和綠色的深淺度在色弱人士眼中是可以有分別的，所以其中一個解決方法是避免使用原色的純紅和純綠。而是選擇較暗的紅綠色作為介面顏色，或使用不同深淺及相近色相的顏色作調節。以下，我使用開發者面板將當中的紅色和綠色分別換成暗紅及另一隻鮮綠。正常的視覺效果如下，可見紅色偏啡了些許，但仍保持紅黃綠三色的界面功能性。