要為一個以長文閱讀為主的網站定配色，光看別人的截圖是不夠的——截圖告訴你「好看」， 但不會告訴你每一組前景與背景的實際對比度是多少、層級是靠什麼手段拉開的。 所以我在 2026 年 8 月 22 日整理了一輪五站的 headless Chromium 快照， 抓出每個可見文字節點的 computed style，沿著祖先鏈解析出有效背景色， 用 WCAG 的相對亮度公式實算對比度，再按前景、背景、字級聚合。
這篇記錄當時的量測方法、數字與本站採用的三個配色方向。活站會改版， 下列數字是那一輪的研究記錄，不代表網站目前所有頁面的狀態。
為什麼是這五個站
最初從 Awwwards 的參考案例尋找閱讀型網站，再加上一個字型廠商部落格。 五站的用途並不完全相同，分析時需要分開：
- JOSHUA’S Magazine（joshuas.io）——長文雜誌。
- AI in Design Report 2026（stateofaidesign.com）——報告轉編輯型閱讀站。
- UNLEARNED（readymag.com/unlearned）——創作者專題；這輪只量落地頁，沒有逐篇量內文。
- The Lookback（tlb.betteroff.studio）——視覺檔案站。 實測後發現它其實是 canvas 加逐字母動畫的視覺檔案站，不是長文站——留著當對照組。
- Klim Type Foundry Blog（klim.co.nz/blog）——字型廠商的長文部落格， 作為閱讀排版的補充樣本，不把它列為本輪 Awwwards 得獎案例。
也剔除了幾個入圍但不合格的：攝影展示微型站、WebGL 作品集， 以及一個底色純黑配 acid-green 的 agency 站——那正是我要避開的配方。
量測方法與限制
方法值得寫清楚，因為「對比度達標」這件事只有可重複量測才有意義：
- 用 Playwright 開頁面，等網路閒置。
- 走訪 DOM 取每個可見文字節點（
TreeWalker，過濾掉空白節點與display: none的祖先）。 - 每個節點取 computed
color與字級；背景色沿祖先鏈往上找第一個 不透明度大於 0.9 的背景色——半透明疊層解析為祖先純色底，這是已知侷限。 - 用 WCAG 相對亮度公式算對比度，按「前景×背景×字級」聚合取眾數。
侷限也要誠實記錄：文字疊在圖片或漸層上的組合會被解析成祖先純色底， 實際對比可能更低；取樣沒有遍歷全站，Klim 的索引與文章也必須分開看。 只憑這些色值不能判定整頁符合哪一級 WCAG，更不能把少量樣本推論成整個獎項的品質。
實測結果
先看快照選到的主要文字——這幾組對比度都在 15:1 以上。 圖中的「主文」欄統稱主要文字；The Lookback 實際量到的是 UI 文字， UNLEARNED 是落地頁文字，不能用來代表它們不存在或尚未量測的長文層級：
- JOSHUA’S 用暗暖棕底
#1a0e01配米色字#eee7ce，20px 主文 15.32。 - 另外四站所列的主要文字是純黑配純白，21（對比度的數學上限）。
再看這輪記錄中未達所選門檻的組合：
- Klim 的索引頁次要文字
#555555在黑底上只有 2.82； 文章頁圖說#8d8d8d配白底 3.32、#aaaaaa只有 2.32。 - UNLEARNED 的紅色 accent 文字 12px，4.00——連 AA 的 4.5 都沒過。
- JOSHUA’S 唯一的失手是藍色色塊上的 45px 大字，4.32， 未達 SC 1.4.6 對大字要求的 4.5:1；這裡談的是 enhanced contrast 門檻。
這組樣本提醒我：只量最大的正文區塊，會漏掉讀者同樣需要閱讀的圖說、日期與色塊文字。 它沒有提供足夠證據解釋設計者的動機，也不能用來判斷評獎機制是否重視可及性。
本站採用的三個方向
一、用有調的深淺底色建立閱讀氣氛。 JOSHUA’S 的暗暖底與米色字保留 15:1 級的對比；AI Report 則提供淺底墨字搭配彩色色塊的參考。 本站想要偏暖、安靜的閱讀氣氛，因此選近黑與近白，再逐組檢查對比。 這是本站的視覺選擇，不把純黑白一概判定為不適合閱讀。
二、層級靠字級與字重表達，不靠降對比。 JOSHUA’S 的 12px metadata 和 20px 主文用同一個顏色，對比同樣是 15.32—— 證明「清楚的視覺層級」不需要犧牲次要文字的可讀性。反面教材就是 Klim 的 2.32–3.32 那幾組圖說。次要文字（日期、圖說、目錄）一律維持 7:1 以上， 層級交給 size、weight 與 letter-spacing。
三、先從兩種 accent 配法建立完整矩陣。
路徑一是 accent 當背景色塊、文字恆用墨色——AI Report 最淺的粉彩塊上
黑字仍有 7.65。路徑二是 accent 當文字時配深底用高亮度色——JOSHUA’S 的
琥珀 #fdbd02 在暗棕底上有 11 到 12:1。失手的組合是飽和色直接當淺底上的
小字（UNLEARNED 的紅 4.00）。還有一個容易漏的角落：彩色面上的大字也要驗——
SC 1.4.6 的大字門檻是 4.5:1，JOSHUA’S 的藍塊 4.32 沒有通過這個門檻。
其他 accent 配法仍可能成立，關鍵是檢查實際文字與背景的組合。
所以這個站要怎麼配
這輪量測直接變成本站色彩系統的驗收條件：內文 7:1 是 gate（WCAG 2.2 SC 1.4.6）， 次要文字不例外；採用有調的深淺底色，並從上述兩種 accent 配法開始； 對比矩陣涵蓋「每一個文字色 × 每一個表面色」的全組合，包含彩色面上的大字。
對我來說，這輪研究最有用的結果是把驗收範圍擴到次要資訊。 圖說、日期與目錄只要仍在承載內容，就值得和主文一起檢查。