「網頁安全色」(Web safe) 是 216 色瀏覽器安全調色盤的歷史名稱，並非聲稱這個色盤中的每個色塊都適合用於無障礙文字。這個名稱源自一個許多顯示器只能同時顯示 256 種索引色的時代，而其中 216 種顏色在主要作業系統之間是共通的。現代電腦、手機和瀏覽器能顯示數百萬甚至數十億種顏色組合，因此這個色盤已不再是普通網站樣式設計的相容性要求。相對地，文字的無障礙性取決於特定前景與背景之間的對比率、所使用的字型大小，以及字型粗細。從 216 個色盤中挑選的兩種顏色，很容易無法達到 WCAG 為內文所定義的對比門檻。因此，網頁安全色圖表 是作為參考工具、複製輔助，以及 HEX 比對工具來使用，而非作為無障礙性的最終裁決。在宣告任何文字易於閱讀之前，您仍然需要使用專門的對比工具來測試實際的前景與背景配對。
「Web Safe」實際所指為何
「網頁安全色」這個詞指的是一個固定的歷史調色盤，而非無障礙性的一種特性。它起源於 1990 年代後期，當時大多數顯示器只能同時顯示 256 種索引顏色。兩套主流作業系統為系統介面保留了略有不同的子集，留下 216 種保證在兩個平台上都能呈現相同外觀的顏色。瀏覽器內建了由這 216 種顏色所組成的調色盤，讓設計師可以挑選色調，而不會觸發系統必須即時模擬色域外顏色時所產生的斑駁抖動。
W3C 對 CSS 的歷史性介紹文件中記載了定義這個色盤的六個等距色階值，而 W3C 網頁無障礙計畫在其 WCAG 2.1 工作範例中列出了一個 216 種顏色的選擇器。/color/web-safe-colors/ 上的圖表從紅、綠、藍三軸上六個色階值的笛卡兒積實作了相同的色盤，依紅為主、綠居中、藍為次的確定順序，產生剛好 216 個項目。現代顯示器早已遠離 256 色時代，因此這個調色盤今日留存下來，主要是出於好奇、教學工具，以及刻意的設計限制。這些用途都不帶有隱含的無障礙性保證。
為何 216 色盤無法保證文字可讀性
文字的無障礙性由《網頁內容無障礙指南》中定義的對比率所規範，而非由任何固定調色盤的成員身分決定。對比率是根據兩種特定顏色的相對亮度計算得出，計算結果必須通過一個門檻，該門檻取決於所使用的字型大小和粗細。常見的門檻包括 WCAG 2.x AA 標準下內文 4.5:1、大字 3:1，AAA 標準則有更嚴格的數值。即使兩個顏色都屬於這個歷史調色盤，一對色盤內的顏色仍可能無法通過這些門檻。
試想兩種設計師有時視為「預設」選擇的網頁安全色：例如將接近黑色的 #000000 設在深綠色背景（例如 #003300）上。兩者都屬於這個色盤，但前景比背景更深，導致對比率驟降至約 1.47:1，遠低於 WCAG 認可的任何標準。同樣的問題也出現在像 #999999 配 #666666 這類色盤配對上，它們之間幾乎沒有任何區隔；或是像 #ffff99 這類淡黃色文字搭配 #cccccc 這類淺灰色，雖然兩種顏色都是色盤成員，卻無法通過任何 AA 門檻。屬於 216 個色盤的成員身分，並不能告訴您某個特定前景在某個特定背景上會呈現什麼樣的閱讀效果。
這個圖表明確地不會為色塊標上主觀名稱，也不會暗示從色盤中挑選顏色就能滿足任何無障礙性標準。它最接近的內建提示是視覺化的結果區，但這仍需要在做出任何閱讀決策之前，進行獨立的對比測試。
使用圖表瀏覽並比對 HEX
這是負責任地使用圖表的核心工作流程：先挑選一個起始色塊或擷取一個外部 HEX，然後在確定設計之前使用對比工具進行檢驗。
- 在瀏覽器中開啟網頁安全色圖表。
- 在互動式格狀版面中瀏覽 216 個色塊，並點選任何顏色以選取它。
- 在較大的結果區中讀取完整的六位數 HEX 代碼，它會與對應的 RGB 三元組並列顯示。
- 如果瀏覽器封鎖了剪貼簿存取，請手動複製可見的代碼；標籤和標題屬性一定會包含完整的六位數值。
- 若要擷取外部顏色，請在輸入欄位中輸入有效的三位數 HEX（例如 #abc）或六位數 HEX（例如 #3470d0），然後選擇「尋找對應顏色」。
- 對應工具會依循標準 CSS 規則展開簡寫，並將每個色階獨立四捨五入到 0、51、102、153、204 或 255 中最接近的值。
- 將擷取結果作為歷史調色盤的參考，然後在發布之前，使用顏色對比檢查工具測試實際的前景與背景配對。
構成 216 色盤的六個色階值
216 色的色盤是三個獨立色階上六個允許值的笛卡兒積。每個色階以十六進位寫為 00、33、66、99、CC 或 FF，在十進位中以 51 為單位等距排列。圖表直接從這些色階產生格狀版面，而非複製硬編碼的清單，並會檢查結果是否恰好包含 216 個唯一的 HEX 值，且每個色階都落在六個允許值之內。
| 十進位 | HEX | 色階強度 |
|---|---|---|
| 0 | 00 | 0% — 色階關閉 |
| 51 | 33 | 20% 強度 |
| 102 | 66 | 40% 強度 |
| 153 | 99 | 60% 強度 |
| 204 | CC | 80% 強度 |
| 255 | FF | 100% — 色階全開 |
6 乘以 6 再乘以 6 恰好得到 216 種唯一組合，這就是這個歷史調色盤具有該精確數量的原因。獨立的色階擷取也讓最近色函式易於稽核：每個色階分別進行四捨五入，然後將三個擷取值重新組合。由於各軸獨立且等距分布，這種行為等同於未加權 RGB 色盤中的最近距離，但它並非一種感知色差計算，也未考慮人類視覺對色階變化的權重方式。經伽瑪編碼的 sRGB 值並不具備感知均勻性，因此專業工作流程可能會改在 Lab 或 OKLCH 色彩空間中進行比較、考量 ICC 色彩描述檔，或針對整張影像最佳化調色盤。圖表刻意保留了這個傳統調色盤簡明的建構方式。
測試實際的前景與背景配對
一旦您從圖表中選定了前景與背景的候選顏色，下一步就是測試這組配對本身。使用顏色對比檢查工具輸入兩個 HEX 值，然後依據您所選字型大小和粗細的 WCAG 門檻，讀取所得的比率。對比率達到 4.5:1 或以上通常能通過內文的 AA 標準，而 3:1 則是大字的寬鬆門檻。AAA 標準的目標數值更高，適用於最小的內文字級。
圖表並不會強制執行此步驟。它的功能止於呈現色盤、複製 HEX 值，以及將外部顏色擷取至最近的色盤成員。將擷取結果視為可跳過對比測試的許可，正是今日 216 色盤名稱最常被誤用的方式。W3C 網頁無障礙計畫頁面列出了 216 種顏色的選擇器，正是為了讓作者能在嘗試色彩的同時，仍被預期應依據已公布的對比指南來驗證其配對。
若需要對色盤中特定前景與背景組合及其所產生的對比率進行更深入的探討，位於《網頁安全色無障礙對比：配對與測試》的無障礙專屬指南，為每組常見的色盤配對標示出它實際通過的門檻。
216 色盤仍有用武之地
儘管它已不再是相容性的必要條件，216 色盤在幾個刻意的情境中仍有所發揮。打造懷舊或符合時代風格介面的設計師，可以直接從圖表中擷取道地的 1990 年代後期調色盤。教育工作者在教授十六進位色階時會使用這個色盤，因為其中的數學原理一目了然：每個色階六個等距等級，三個色階組合起來，恰好 216 個項目。像素藝術家和低色彩數量的遊戲開發者將這個受限的調色盤視為一種創作上的約束，而非限制；而重現舊設計的作者，則可以精確比對原始色塊。
在這些情境之外，216 色盤通常並非現代品牌系統、資料視覺化，或任何仰賴細膩色調層次的介面的正確起點。圖表刻意保留這個傳統的建構方式，是為了讓作者了解這 216 個項目代表什麼，以及不代表什麼。請將此圖表視為透明的參考工具、HEX 對應工具和複製輔助；每當需要做出實際的閱讀決策時，請使用對比工具。「網頁安全」從來都不是對可讀性的承諾，而當作者記住這項區別時，圖表才能發揮最大的價值。
如果您正在權衡各種選項，《HTML 顏色名稱圖表是否適合在線上使用？原因在此》對此有詳細探討。