多數人以為只要在手機或電腦裡打開深色模式的開關，滑到的每個網站就會自動跟著變暗。這其實是兩碼事。不少企業在網站改版清單上把「深色模式」放進基本配備那一欄，理由通常不是護眼、省電或無障礙需要，而是「別人有，我們也該有」。
深色模式（Dark Mode）指的是網站或應用程式主動設計的一套暗色調配色方案，讓背景轉為深色、文字轉為淺色；跟使用者裝置本身有沒有開啟系統深色模式，其實是兩件不一定連動的事。深色模式最常被拿來背書的四個理由（護眼、省電、無障礙、美感）攤開來看，沒有一個是放諸四海皆準的，有幾個甚至只在特定條件下才站得住腳，做出來以後的維護成本也常被低估。
先從最根本的誤解拆起。使用者裝置的偏好設定，跟網站要不要接住這個訊號，其實是兩層各自獨立的事。
深色模式是什麼？系統偏好與網站配色方案是兩回事
深色模式（Dark Mode）在瀏覽器裡有個對應的技術判準，叫做 prefers-color-scheme。根據 MDN 官方文件，這是一個 CSS 媒體查詢，讓網站程式碼去偵測使用者在作業系統或瀏覽器裡設定的淺色、深色偏好，語法是 @media (prefers-color-scheme: dark) { … }，可以搭配 color-scheme 屬性一起使用。這項功能自 2020 年 1 月起，就已經是主流瀏覽器都支援的「Baseline 廣泛可用」技術，不是最近才冒出來的新玩意。
問題出在它只是一個偵測機制，不是強制機制。使用者把手機或瀏覽器切成深色，等於對外廣播一個訊號：「我偏好深色介面。」網站程式碼收不收這個訊號、要不要照著切換配色，是網站自己另外要用 CSS 寫的判斷式，不會因為打開系統開關就自動變暗。如果一個網站沒有針對 prefers-color-scheme 寫對應樣式，畫面就會照原本設計的樣子顯示，多半是預設的亮色版面。這件事只靠 CSS 就能做到，不一定要動用 JavaScript。
這個落差正是「深色模式是必備標配」這個迷思的起點。不少人把深色模式想成使用者裝置本身自帶的能力，好像手機支援了、網站就自動跟著支援，卻忽略了網站端要另外投入一套配色系統，逐一檢查每個元件在深色背景下看起來對不對。這筆投入不算小，值不值得做，得看後面幾個常被拿來當理由的說法，是不是真的站得住腳。
環境亮度對護眼的影響，比配色深淺本身更大
「深色模式比較護眼」是最常被拿出來說服人的一句話，但攤開實際的研究結果，落差比多數人想像的更曖昧。Nielsen Norman Group 在一篇探討深色模式的研究裡指出，減少眼睛疲勞確實是使用者最常提到的理由，可是不少研究並沒有找到深色模式與淺色模式在眼睛疲勞、頭痛回報程度上有顯著差異。
同一份研究引用了一項針對 115 位手機使用者的調查，結果大約三分之一的人習慣用深色模式、三分之一習慣用淺色模式，剩下三分之一兩種混著用。沒有哪一種偏好壓倒性勝出，代表深色模式並不是多數人一致認定「比較舒服」的選項。
真正有意思的是一項可以控制環境光源的 VR 頭戴裝置實驗，由 Erickson 等人於 2020 年在 IEEE VR 發表。這份研究發現深色模式在整個虛擬環境本身很昏暗的情況下，對減緩眼睛疲勞最有效果；不過就算在這種最有利的條件下，深色模式相對於「昏暗環境搭配淺色模式」的優勢仍然很小。換句話說，讓環境變暗一點，往往比把介面整個換成深色更有效。真正決定舒不舒服的，是螢幕亮度跟周遭環境亮度合不合拍，不是介面顏色本身深或淺。
這個結論也回應了前一節的重點。如果只是使用者手機開了系統深色模式，網站本身沒有接住這個訊號，畫面顏色根本不會改變，談不上護眼效果會不會出現。
螢幕亮度才是省電效果的關鍵變數
「開深色模式比較省電」同樣只在特定條件下成立，而且多數人日常滑手機的方式，剛好落在效果最弱的那個區間。
決定省不省電的關鍵，其實是螢幕本身的顯示技術。OLED（有機發光二極體）螢幕顯示純黑像素時，那個像素可以直接關閉、不耗電；LCD 螢幕的背光是整片點亮的，就算畫面切成深色，背光還是照樣耗電，省電效果幾乎等於沒有。深色模式的省電效益，一開始就只對用 OLED 面板的裝置成立。
普渡大學電機資訊工程學系教授 Charlie Hu 與研究生 Pranab Dash 在 2021 年於 MobiSys 研討會發表的研究，針對 Google Maps、Google News、YouTube 等六款熱門應用程式，在 Pixel 2、Pixel 4、Pixel 5 與 Moto Z3 四款手機上實測。結果發現螢幕亮度落在 30% 到 50% 之間時，切成深色模式平均只省下 3% 到 9% 的電力，這個亮度區間剛好是多數人日常自動亮度的落點，效果小到大概沒人真的感覺得出來。只有把螢幕亮度拉到 100%，例如大太陽底下勉強看螢幕的時候，深色模式才能省下 39% 到 47% 的電力，是完全不同量級的差異。
這裡還有一個常被忽略的環節。深色模式的省電，是使用者裝置這一層的省電。如果網站本身沒有做出一套深色版面，使用者手機就算開了系統深色模式，瀏覽器渲染出來的網頁顏色也不會因此改變，畫面該亮還是亮，自然談不上省電。這正好呼應第一節「系統偏好」跟「網站配色」是兩回事的論點。
白內障有感，散光族群卻更費力
無障礙常被當成「深色模式一定加分」的理由，但實際上要看使用者的視覺狀況，同一個設計對某些人是幫助，對另一些人反而是負擔，不能一概而論。
Nielsen Norman Group 的研究指出，多項研究都顯示深色模式對白內障、畏光這類眼球介質混濁相關的視覺狀況確實有幫助。強光下這類使用者的眼睛本來就更難聚焦，減少畫面亮度能降低不適感。
但散光族群面對深色模式，情況反過來。散光的成因是角膜或水晶體弧度不均，瞳孔在暗處會放大，加上散光本身造成的聚焦誤差，讓白色文字疊在深色背景上容易出現模糊、暈開的觀感，反而讀起來更費力。這不是極少數人才會遇到的狀況，Hashemi 等人發表於《Journal of Current Ophthalmology》的系統性回顧與統合分析彙整全球上百篇研究，推估成人散光的盛行率整體約 40%，而且會隨地區與年齡不同而有落差。
正因為同一種設計對不同視覺狀況的族群效果相反，Nielsen Norman Group 的結論也很明確，對有視覺狀況的使用者，最好的做法不是由網站強制決定顯示哪一種模式，而是尊重使用者已經在系統層級設定好的選擇。深色模式不是對無障礙一律加分的保證，把選擇權交還給使用者，才是比較穩妥的做法。
美感加分不等於可用性同步提升
「深色模式看起來比較高級、比較潮」，這個感受是真的，但它跟「網站因此比較好用」是兩件不一定同時發生的事，不該把美感直接當成可用性的證明。
心理學上有個現象叫美觀可用性效應（aesthetic-usability effect），指的是當一個設計被認為好看，使用者會不自覺假設它比較好用，即使實際操作起來未必如此。Nielsen Norman Group 的研究就點出這個效應，套在深色模式上格外貼切，深色介面確實普遍被覺得更現代、更有質感，但這種好感多半停留在觀感層次。
不少國際知名的影音串流服務乾脆整個介面都做成深色、不提供切換，Netflix、Hulu、Disney+、Max、Amazon Prime Video 都是這樣。Spotify 官方甚至把自家的深色介面類比成電影院的效果，讓畫面聚焦在色彩豐富的專輯封面、影片縮圖上，介面本身盡量淡出、不搶戲，就像進戲院看電影時燈光會暗下來一樣。這是品牌調性與內容呈現的選擇，不是因為深色比較好操作。
美感是支持深色模式的正當理由之一，但研究也明白提醒，好看的視覺設計無法彌補糟糕的可用性。要判斷深色模式做出來好不好用，實際找使用者跑同一組任務、在深色與淺色模式下各測一次，才是可靠的做法；色彩深淺通常也不會是多數網站最大的可用性問題來源。
半套深色模式的維護成本被嚴重低估
把鏡頭轉到「決定做」之後最容易被忽略的一塊，也就是維護成本。不少團隊低估了做一套深色版面實際要花多少後續心力，結果做出來的深色模式東漏西漏，反而比乾脆不做還讓人尷尬。
深色版面不是把背景色換一下就結束，Nielsen Norman Group 的研究整理出幾類團隊實際踩過的雷：
- 圖片、Logo、插圖如果背景不透明，深色底就會露出一塊突兀的白色方塊，需要另外處理透明背景，建議改用 SVG、WebP 這類支援透明度的格式，而不是 JPG。
- 用陰影製造「浮起來」的層次感，這套手法在深色畫面上會失效。黑底上疊黑色元件，原本用來營造浮起效果的淺色陰影，反而讓元素看起來像在發光，而不是浮在上層，需要改用亮度分層來營造深淺。
- 字重與對比沒抓好，細字體疊在深色背景上，可讀性會明顯下降。
- QR Code、條碼這類需要「深色前景、淺色背景」才能被掃描器辨識的圖像，在深色模式下顏色一旦反轉，就會直接讓掃描失敗。
- 手機內建瀏覽器、應用程式各自的深色模式邏輯不見得同步，使用者從深色的應用程式點進網站，畫面卻跳回亮色，體驗會顯得不連貫。
- 用來分隔區塊的細線，在深色背景下對比不足，容易整條消失，版面的結構感跟著跑掉。
電子郵件是最容易被忽略的一塊。網站本身的深色模式做得再完整，行銷信件在不同信箱客戶端仍可能被強制套用深色顯示，字體、Logo、圖片顏色如果沒有另外檢查，就會在信件裡出狀況。Nielsen Norman Group 的研究也提到，他們看過不少應用程式深色模式做得很好，字型、Logo 與圖片放進信件裡卻顯示得亂七八糟。每新增一個 UI 元件，都要在深色與淺色兩套配色下各檢查一次對比度合不合格，這才是真正要付出的成本。
使用時長、光線環境與媒體佔比，決定深色模式該不該做
前面幾節把常被拿來當理由的四個說法都攤開檢驗過一輪，結論不是「該不該跟流行」，而是要看這個網站、這個頁面的內容類型、使用情境與受眾組成。Nielsen Norman Group 的建議給了幾個具體的判斷依據，而不是憑感覺決定。
長時間閱讀與高頻使用的服務型網站
使用時間長、單次停留久的內容，例如需要長時間閱讀的新聞網站、電子書閱讀介面，眼睛疲勞與耗電的累積效應才會被明顯感受到。Nielsen Norman Group 的建議也把新聞應用程式、電子書閱讀器這類長時間使用階段，列為最值得投入深色模式的情境之一，理由正是使用者盯著畫面的時間越長，這種累積效應就越明顯。
同樣的道理也適用在高頻反覆造訪的服務型網站或後台系統。使用者一天要開好幾次的通訊軟體、專案管理工具，深色模式帶來的舒適度是累積出來的，跟偶爾逛一次的網站完全不是同一回事，即時通訊這類應用程式也因此常被列為深色模式效益最明顯的族群之一。
經常在暗處使用的內容類型
使用情境的光線環境，是比內容本身更關鍵的判斷依據。Nielsen Norman Group 的研究提到，越是可能在暗處使用的設計，使用者瞳孔越是適應了昏暗環境，這時候如果畫面還是一片刺眼的白，反而會讓人更不舒服。電影串流應用程式、白噪音應用程式都屬於這類情境，使用者多半是躺在床上、關了燈才打開來用。
反過來說，經常在明亮環境下短暫使用的內容，深色模式帶來的舒適度差異就沒有那麼明顯，判斷要不要投入之前，先問這個頁面多半是在什麼樣的光線環境下被打開。
圖片與影片佔比低的版面
媒體元素佔比高低，也會直接影響深色模式的實際效益。Nielsen Norman Group 的研究指出，照片與影片這類媒體素材，在深色與淺色模式下看起來幾乎一樣，媒體佔比越高的版面，例如社群平台的動態牆，深色模式能改變的視覺感受就越有限。
反過來，以文字、資訊為主的純內容型介面，深色與淺色模式的畫面差異才夠大，深色模式真正能發揮的地方也在這裡。至於短暫瀏覽、以形象與行銷資訊為主、內容以圖像為主的網站，例如多數品牌官網、形象網站、活動頁，使用者停留時間短、造訪頻率低，深色模式帶來的實際效益有限，投入的維護成本反而不成比例。
已決定要做，配色與對比度不能沿用亮色版數值
如果你評估過前面幾節之後，確定這個網站真的適合投入深色模式，動手做之前有幾件基本功要先抓好。深色版面不是把亮色版的顏色數值反過來套用就好，對比度門檻、圖片格式、切換邏輯都要重新抓一次。
深色版面的對比度標準要往上抓，不能只壓在最低門檻。WCAG 2 對一般文字的最低要求是對比度 4.5:1、大型文字 3:1，但同樣的對比比值在深色背景下視覺感受會偏模糊，多數成熟的深色設計系統都會抓比最低門檻更高的餘裕。純黑色背景搭配純白色文字，容易讓文字看起來邊緣發毛、不好聚焦，改用深灰色背景、搭配非純白（例如淺灰）的文字色，通常讀起來更穩定。
圖片與 Logo 也要一併改用支援透明背景的格式，不透明的背景會在深色底下露出白色方塊，前面維護成本那節已經提過這個問題，做深色版面時要一次處理到位，不要等上線後才逐一補救。
切換邏輯的預設值也有講究，應該讓網站預設鏡像使用者在作業系統層級已經設定好的深色偏好，而不是要求使用者進到網站裡再手動切換一次。多數使用者根本不會特地去找這個切換開關，如果網站的深色模式只能靠手動開啟，等於幫大多數會受益的使用者把這個功能藏了起來。
數位發展部訂定的網站無障礙規範，同樣以 WCAG 為依據，對比度門檻同樣是一般文字 4.5:1、大型文字 3:1，與國際標準一致。深色版面上線前，應該用同一套標準重新檢查一次，不能只檢查過淺色版就算過關。
深色模式值不值得投入，答案從來不是「這是不是現在網站該有的基本配備」，而是這個網站的內容類型、使用情境與受眾組成，搭不搭得上前面拆開的那幾個條件。護眼、省電、無障礙、美感，四個理由攤開來看都有各自成立的條件，也都有各自的但書，沒有一個能單獨撐起「一定要做」的結論。
真正決定要做的時候，配色系統、對比度、圖片格式、切換邏輯都要重新抓一輪，半調子的深色模式，留下的破綻比完全不做更明顯。與其把深色模式當成一項跟流行的裝飾，不如先回頭看你的讀者實際上在什麼情境、用多久、多常回來——答案自然會告訴你，這筆投入划不划算。