Web safe colors 正好是 216 種 RGB 組合，每一個紅、綠、藍色版都被限制在六個均勻間隔的層級之一——0、51、102、153、204 與 255——以十六進位表示則是 00、33、66、99、CC 與 FF。「web safe」這個標籤是一個源自 1990 年代晚期的歷史名稱，當時大多數螢幕與瀏覽器一次只能重現 256 種索引色，而共用一個色彩立方體可以減少跨平台可見的抖色現象。現代顯示器能呈現數百萬甚至數十億種顏色，所以這個色彩立方體已經不再能防止相容性問題；它現在是一種刻意選擇的設計限制、一種教學輔助工具，或是一種復古美學。然而，無障礙與對比度是由完全另一套規則所規範。從 216 色立方體中挑出的色票，仍然可能無法通過決定文字是否易讀的 WCAG 對比度門檻，而把調色盤限制在這 216 種顏色內的設計師，並不會因此就自動完成任何無障礙相關的工作。請把Web Safe Colors Chart當成一個透明的調色盤瀏覽器與最近色比對工具來使用，然後在把任何實際配色組合放上正式頁面之前，都用專門的對比度工具逐一驗證。
為什麼「Web Safe」不等於「無障礙安全」
這兩個概念來自不同的年代，解決的也是不同的問題。216 色立方體的設計目的，是讓執行在 8 位元索引顯示器上的瀏覽器，不必把頁面顏色抖色成一團斑駁的近似色；這是一種顯示相容性上的限制，而不是可讀性上的限制。相對地，無障礙則是由 W3C 網頁無障礙倡議（Web Accessibility Initiative）所發布的《網頁內容無障礙指引》（WCAG）所規範。WCAG 定義了前景色與背景色之間的對比度，並在 AA 合格等級下設定了最低門檻，例如一般大小的內文文字為 4.5:1，大型文字（通常是 18 點的一般字重或 14 點的粗體）則為 3:1。從 216 色立方體中選出的一種顏色，是否符合或無法通過這些比例，完全取決於它是和立方體中的哪一個顏色配對、內文的字重是什麼，以及字體實際呈現的大小。
兩種常見的 216 立方體顏色可以說明這個落差。一個純紅色，例如#FF0000，放在純白色背景上，產生的對比度遠低於 4.5:1，無法通過內文文字的 AA 等級，即使這兩種顏色都來自官方的瀏覽器安全調色盤。一個深藏青色，例如#003366，放在同樣的白色背景上，則能通過 AA，並接近 AAA。這兩種顏色本身「web safe」的程度是一樣的；只有配色組合、字型與大小，才能決定讀者是否真的能看清楚文字。把「web safe」和「讀起來安全」畫上等號，是設計師在使用受限調色盤時最常犯的錯誤之一。
216 色立方體背後的六個色版層級
立方體中的每一個項目，都是由同樣的六個色版層級分別套用在紅、綠、藍三個色版上所組成。三個色版各有六種選擇，其笛卡兒積為 6 × 6 × 6 = 216 個獨一無二的十六進位值。以下同時以十進位整數與十六進位配對的形式，列出所有允許的層級。
| 十進位層級 | 十六進位層級 | 與前一級的差距 |
|---|---|---|
| 0 | 00 | — |
| 51 | 33 | +51 |
| 102 | 66 | +51 |
| 153 | 99 | +51 |
| 204 | CC | +51 |
| 255 | FF | +51 |
因為這六個值在每個 8 位元色版上都以 51 為間隔均勻分布，所以立方體中每一個項目都可以寫成三組各兩位字元的十六進位數值，分別從00、33、66、99、CC、FF中選取。同樣的架構也記載於W3C's historical introduction to CSS中，並在W3C Web Accessibility Initiative site上以範例挑色器的形式重現。那個挑色器是這個色彩立方體最典型的示範之一，不依附於任何單一瀏覽器或設計工具。
把任意十六進位色值配對到最接近的立方體成員
內建於 Web Safe Colors Chart 中的比對工具，同時接受三位數的 CSS 縮寫格式與完整的六位數十六進位值。像#abc這樣的三位數項目，會先依照標準的縮寫規則展開成#aabbcc。接著每一個 8 位元色版都會各自獨立四捨五入到 {0、51、102、153、204、255} 之中最接近的允許層級，再把這三個吸附後的層級重新組合成新的十六進位值。因為這個四捨五入是在均勻分布的網格上逐一色版進行的，所以結果會和未加權的 RGB 最近距離完全一致——但這僅僅是因為三個軸互相獨立。這個比對工具並不是一種知覺上的運算：它不會像人類視覺那樣為各色版加權，也不考量 sRGB 經 gamma 編碼後的不均勻性。
以輸入值#3470d0為例，可以逐步展示吸附的過程：
- 紅色色版：0x34 為十進位的 52。在允許的數值中，51 相差 1 步，102 相差 50 步。吸附到
- 51（十六進位 33）。
- 綠色色版：0x70 為十進位的 112。最接近的允許數值是 102（相差 10）與 153（相差 41）。吸附到102（十六進位 66）。
- 藍色色版：0xd0 為十進位的 208。最接近的允許數值是 204（相差 4）與 255（相差 47）。吸附到204（十六進位 CC）。
- 重新組合後：#3366CC。
這個圖表的網格是以紅色為主序、綠色為中序、藍色為次序，從這六個來源層級決定性地產生出來的，而不是從一份不透明的寫死清單中複製而來，結果區域也一律會顯示完整的六位數數值，並附上包含對應 RGB 三元組的無障礙標籤。如果你的瀏覽器封鎖剪貼簿存取，這個可見的十六進位值仍然可以被選取，讓你能手動複製這個數值。
如何為無障礙對比度挑選 Web Safe Colors
- 在瀏覽器中開啟 Web Safe Colors Chart，掃過這 216 色的色票網格，挑出兩到三組在視覺上符合你設計需求的候選配色。
- 點選每一個候選色票，將其選取，並把完整的六位數十六進位值複製到你的調色盤文件中。
- 如果你的品牌或素材使用的是不在立方體內的顏色，就把那組三位數或六位數的十六進位值貼進比對工具的輸入欄位，選擇Find match，把它吸附到最接近的立方體項目上，並記下吸附後的數值。
- 選出符合你想要的視覺層級——內文、標題、按鈕或圖表填色——的前景立方體項目與背景立方體項目。
- 把每一組實際的前景／背景配色，套用到Color Contrast Checker上，對照 WCAG AA 門檻（一般文字 4.5:1，大型文字 3:1）進行檢查，能力所及的話也對照 AAA。
- 如果某一組配色沒有通過，就重複第 4 步與第 5 步，改用較深的前景色或較淺的背景色，直到比例達到你打算使用的字型大小與字重所要求的門檻為止。
請注意，這個圖表並不會把任何色票標示為「易讀」或「高對比」。一組在螢幕上看起來不錯的配色，仍然可能無法通過正式的比例測試，尤其是在小尺寸使用細字重或輕字重字體的情況下。請把這個圖表當成調色盤參考，而把檢查工具當成把關的關卡。
一套能延伸到立方體以外的配色工作流程
當設計需求本身就要求這麼做時——例如 1-bit 街機風格、復古資料儀表板、十六進位色版的教學示範，或是受限的印刷風插畫——web-safe 顏色作為一種透明、容易稽核的調色盤是很有用的。但它們不能取代無障礙測試，也不應該被用來人為限制一個現代品牌，或是需要更豐富色域的資料視覺化作品。這個色彩立方體是一個起點，而不是終點。
對於同時需要復古感又要完全符合 WCAG 規範的專案而言，請讓比對工具與檢查工具並行運作。先為主要版面選一個立方體基礎色，用這個圖表把任何不在立方體內的強調色吸附到最接近的成員，然後在發布前用對比度工具驗證每一組實際組成的配色。如果強調色對你所選定的 WCAG 門檻來說，和主要版面色太過接近，就換成立方體中距離更遠的項目——例如把白底上的#999999，換成較深、能通過測試的#666666，或是在深色版面上使用較淺、能通過測試的#CCCCCC。任何一組特定配色的確切比例，最好直接從對比度檢查工具讀取，因為字型大小、字重，以及你所依循的 WCAG 版本，都會改變通過或不通過的分界線。
當你在為其他設計師或稽核人員記錄這項選擇時，請一併寫下吸附後的十六進位值、RGB 三元組，以及你測得的 WCAG 比例。這份紀錄能讓這個設計可以被重現，讓審核者在字型大小改變時能重新執行對比度測試，也能避免這個歷史悠久的「web safe」標籤被誤讀成一種無障礙上的保證。這套舊有的調色盤對自己的定位很誠實：它就是一個量化過的 RGB 立方體。無障礙相關的工作是發生在配色這一步，而不是在挑選立方體顏色這一步。
相關閱讀：Color Contrast Checker Examples: WCAG AA and AAA Pairs。