黑色在 WCAG 的對比公式裡拿到理論上的滿分，純黑 #000000 配純白是 21:1，已經是公式能算出的最大值。可是 Google 替 Material 深色主題挑的底色，卻是帶一點灰的 #121212，不是純黑。
色碼表通常只告訴你黑色的 HEX 是 #000000，沒說這個值該放在哪裡，像是大面積的黑色背景要用純黑還是近黑、黑色文字壓在彩色按鈕上看不看得清楚，或是螢幕稿交給印刷廠之後黑色會變成什麼樣子。這幾個問題都有算得出來的依據，不必靠感覺挑。
螢幕上的黑色在 RGB 裡是三個通道全部歸零，印刷稿裡的黑色卻有單色黑與四色黑兩種做法，兩邊的規則並不相通，同一個黑色在不同場合也就得換不同的寫法與判斷。
黑色在網頁色碼與印刷稿上的標示方式
同一個純黑，在網頁與印刷稿裡有好幾種寫法，常用的整理在下表，色碼可以直接複製。
| 寫法 | 範例 | 說明 |
|---|---|---|
| HEX 六位 | #000000 | 最通用的寫法 |
| HEX 三位簡寫 | #000 | 與 #000000 等值 |
| 色名 | black | CSS 命名顏色，對應 #000000 |
| RGB | rgb(0, 0, 0) 或 rgb(0 0 0) | 三個通道全部為 0 |
| HSL | hsl(0, 0%, 0%) | 明度 0% 即為黑 |
| 半透明黑（HEX） | #00000080 | 最後兩位是透明度，約 50.2% 不透明 |
| 半透明黑（RGB） | rgb(0 0 0 / 50%) | 斜線後接透明度，剛好 50% |
| CMYK 單色黑 | K100 | 只用黑墨一個版 |
| CMYK 四色黑 | 黑墨加少量其他色墨 | 比例向印刷廠確認 |
黑色和白色在寫法上有一個關鍵的不同。RGB 的黑與白都很單純，黑是三個通道全部歸零，白是全部拉滿；到了 CMYK，白色是四色都不上墨，黑色卻要真的上墨，而且有單色黑 K100 與四色黑兩種做法。
網頁寫法有幾個細節值得記。HEX 的三位簡寫是把每一位數重複一次，所以 #000 等於 #000000，黑色剛好可以用簡寫帶過。色名 black 在 W3C 的《CSS Color Module Level 4》命名顏色表裡，對應的就是 #000000，也就是 rgb(0, 0, 0)。HSL 的明度（lightness）只要是 0%，結果就是黑，色相與飽和度填什麼都一樣，所以 hsl(0, 0%, 0%) 與 hsl(200, 80%, 0%) 是同一個黑。
做遮罩，或是在圖片上疊字時，常會用到半透明的黑。CSS 的 HEX 可以多寫兩位當透明度（alpha），00 代表完全透明，ff 代表完全不透明；#00000080 的 80 是十六進位，換算成 128/255，約等於 50.2% 不透明。rgb 寫法則改用斜線接透明度，rgb(0 0 0 / 50%) 剛好是 50%。
印刷稿的黑色，單色黑 K100 只用黑墨一個版，四色黑則是在黑墨之上再加少量的青、洋紅、黃墨。Adobe 的 InDesign 說明文件寫到，色票面板裡的 Black 色票代表 100% 的單色黑；大面積的黑色則建議改用四色黑。四色黑的成分比例會隨印刷廠與紙張而不同，沒有一組通用的百分比，要向印刷廠確認。
還有一件容易被忽略的事，螢幕上的黑也不是真正的零亮度。W3C 的《CSS Color Module Level 4》在描述 sRGB 色彩空間時，把白色亮度寫成 80.0 cd/m²，黑色亮度寫成 0.20 cd/m²。換句話說，#000000 對應的是這個螢幕能呈現的最暗，並不是完全不發光，實務上把它當成螢幕上最黑的那一點使用就夠了。
純黑對比最高，深色主題底色卻取近黑 #121212
純黑和近黑要選哪一個，得看面積。這裡的建議是，大面積的黑色背景、整頁的深色模式底色取近黑，單色標誌與小面積的色塊才用純黑。這是配色建議，不是規範，不過背後有 Google 的設計說明可以對照。
黑色背景不等於 #000000。Google 的 Material 深色主題把介面最底層定在 #121212 的深灰，而不是純黑，理由與文字在深色背景上的顯示方式有關，也和還能不能表現層次有關。
純黑底配純白字的對比最高，邊緣卻容易暈開
W3C 的 WCAG 2.2 說明文件把對比比值定義成 (L1 + 0.05) / (L2 + 0.05)，L1 是較亮那一色的相對亮度，數值範圍從 1:1 到 21:1。純黑的相對亮度是 0，純白是 1，代入算出來剛好是 21.00，所以純黑底配純白字是對比公式的最大值，沒有任何組合能再往上。
只是對比最高，不代表最好讀。Google 的 Material 深色主題教學指出，高強調的文字不用純白，因為 #FFFFFF 這種亮色放在深色背景上會產生視覺上的「震動」，文字的光線看起來也像在深色背景上暈開、模糊，反而影響閱讀。要分清楚的是，這是 Google 的設計說明，WCAG 的對比標準只看亮度比值，並沒有這樣的規定。Material 的做法是文字仍以白色為底，再用不透明度把亮度壓低。
至於耗電，Google 的 Android 開發文件把「降低耗電」列為深色主題的好處，但原文限定了條件，幅度取決於裝置的螢幕技術。所以不能說用黑色一定比較省電。文件同時列出的另外兩項好處，對低視力與對強光敏感的使用者較友善、低光環境下較好用，倒是沒有這個前提。
近黑色碼的常見取值與用途
近黑沒有標準名稱，設計師手上常用的就是下面這幾個值。表中的對比是依 WCAG 公式計算，除了 #000000 與 #121212 有明確出處，其餘都是常見的自訂值。
| 色碼 | RGB | 對 #FFFFFF | 對 #E0E0E0 | 備註 |
|---|---|---|---|---|
#000000 | 0 0 0 | 21.00 | 15.91 | 純黑，CSS 色名 black |
#0A0A0A | 10 10 10 | 19.80 | 15.00 | 常見自訂值，貼近純黑 |
#121212 | 18 18 18 | 18.73 | 14.19 | Material 深色主題最底層表面 |
#1A1A1A | 26 26 26 | 17.40 | 13.18 | 常見自訂值 |
#1E1E1E | 30 30 30 | 16.67 | 12.63 | 常見自訂值 |
#222222 | 34 34 34 | 15.91 | 12.05 | 常見自訂值 |
#2B2B2B | 43 43 43 | 14.16 | 10.73 | 常見自訂值 |
#333333 | 51 51 51 | 12.63 | 9.57 | 常見自訂值，常用於淺色底上的文字 |
這些值各有適合放的位置。#121212 是 Google 的範例拿來當頁面底色的值，#1E1E1E 與 #222222 這類稍亮的近黑，適合放在它上面當卡片或面板的底色，讓兩層之間看得出高低。#1A1A1A、#333333 這類則常被拿來放在淺色底上當文字色，例如 #1A1A1A 對純白的對比仍有 17.40，遠高於一般文字 4.5:1 的門檻。Google 的 Android 開發文件也提到，通用文字色 textColorPrimary 在淺色主題是近黑、在深色主題是近白，可見文字色取近黑與近白，本來就是常見的預設做法。
要提醒的是，這些近黑值不屬於 CSS 命名顏色，也別拿來宣稱是某個品牌的標準色。CSS 的色名裡找不到任何一個專門叫「近黑」的名字，黑色系色名裡最接近的 darkslategray 偏青綠，並不是中性的近黑。
黑色背景的深色模式色碼，包含底色層次與文字分級
搜尋「黑色背景」的人，多半在做深色模式或深色網頁。Google 的 Material 深色主題已經公開一套完整的做法，底色用 #121212，用白色疊層表現高低，文字用不透明度分成三級，彩色的強調色則改用淺色調。這套做法拆開來，就是一組可以直接套用的基礎色票。
本節的對比值都以 #121212 當黑色背景計算，另外附上純黑底的數字供對照。
底色以 #121212 起算，用白色疊層拉開高低
淺色介面靠陰影表現高低，到了深色介面，背景已經太暗，陰影幾乎看不出來。Google 的 Material Components 文件也指出，陰影在深色主題中與背景的對比低、效果較差。Material 的解法是疊層，表面越高，疊上去的白色越多、越亮；Google 的教學把這描述成在背景太暗、無法可靠呈現深色陰影時，傳達高度與階層的方式。
Google 的教學範例把電子郵件卡片的底填成 #121212，再疊一層 2% 不透明度的白色，混色後約是 #171717。混色的算法是 疊後 = 底 + (255 − 底) × 比例，所以 18 加上 237 乘 0.02，約等於 23，也就是十六進位的 17。教學後段把品牌主色帶回表面時，卡片的疊層改用主色色系裡的 #ADC0CB，不透明度為 4%。
白色疊層在不同比例下的色碼，可以用同一條公式推算，下表除了 2% 來自 Google 的範例，其餘都只是示例。
| 疊層比例 | 混出的色碼 | 對 #E0E0E0 對比 | 備註 |
|---|---|---|---|
| 2% | #171717 | 13.58 | Google 範例的卡片 |
| 4% | #1B1B1B | 13.05 | 示例 |
| 5% | #1E1E1E | 12.63 | 示例 |
| 8% | #252525 | 11.61 | 示例 |
這套疊層是較早期的做法。Material Components 的文件註明，這種 elevation overlay 在 Material 元件裡已被 tonal surface color 系統取代，所以上面的色碼是一組好用的範例，不是唯一標準，自己的專案照著算，一樣可以得到順手的層次。
文字依 87%、60%、38% 三級不透明度換算色碼
Google 的教學把深色主題的文字分成三級，高強調文字的不透明度是 87%，中強調是 60%，停用的文字是 38%，文字色以白色為底。下表把它們換成可以直接貼進色票的色碼，並附上依 WCAG 公式算出的對比。
| 層級 | 不透明度 | 在 #121212 上的色碼 | 對比 | 在 #000000 上的色碼 | 對比 | 用途 |
|---|---|---|---|---|---|---|
| 高強調 | 87% | #E0E0E0 | 14.19 | #DEDEDE | 15.61 | 標題、正文 |
| 中強調 | 60% | #A0A0A0 | 7.16 | #999999 | 7.37 | 說明文字、輔助資訊 |
| 停用 | 38% | #6C6C6C | 3.57 | #616161 | 3.39 | 停用狀態 |
| 純白（對照） | 100% | #FFFFFF | 18.73 | #FFFFFF | 21.00 | 不建議當正文 |
38% 這一級在 #121212 上只有 3.57，連一般文字的 4.5:1 都沒有達到，也就不能拿來放正文。這並不算缺點，因為它本來就是給停用狀態用的。W3C 的 WCAG 2.2 說明文件也寫明，不可操作的介面元件上的文字不在對比要求的範圍內，所以停用的按鈕與欄位，可以放心用這一級。
換成純黑底，三級的對比都會再往上抬一點，87% 是 15.61，60% 是 7.37，38% 則是 3.39，仍然低於 4.5。至於高強調文字，Google 用 87% 的白色而不用純白，對比已經有 14.19，既夠高，又避開了純白在黑色背景上暈開的問題。
黑底上的強調色要改用淺色調
黑底上的彩色，不能直接沿用白底那一套。Google 的教學說明，製作 Material 深色主題時，會選擇較淺的色調變體，讓色彩系統保持表現力又維持適當的對比；飽和度高的顏色搭配深色背景，容易在視覺上產生「震動」，讓文字更難讀。
下表是同一色系的飽和版與淺色版，在 #121212 上的對比比較。色值取自 W3C 的 CSS 命名顏色表，對比依 WCAG 公式計算。
| 色系 | 飽和版 | 對比 | 淺色版 | 對比 |
|---|---|---|---|---|
| 藍 | blue #0000FF | 2.18 | lightskyblue #87CEFA | 10.92 |
| 藍（中） | royalblue #4169E1 | 3.87 | dodgerblue #1E90FF | 5.79 |
| 紅 | red #FF0000 | 4.69 | lightcoral #F08080 | 7.23 |
| 紅橘 | crimson #DC143C | 3.75 | tomato #FF6347 | 6.36 |
| 紫 | mediumpurple #9370DB | 4.98 | violet #EE82EE | 8.08 |
純藍 #0000FF 只有 2.18，換成 lightskyblue 就有 10.92，差距非常明顯。crimson 的 3.75 低於 4.5，不能當黑底上的小字；red 的 4.69 數字雖然過關，W3C 的 WCAG 2.2 說明文件仍另外提醒，對比的算法原則上不必區分色覺障礙的類型，唯一的例外是 protanopia（紅色盲）的使用者看紅色這類長波長顏色搭配暗色的情況，因此文件另外提供「避免紅色放在黑底」的建議做法。
Google 的教學也保留了彈性，小型但影響重大的元件，可以選飽和度稍高一點的顏色，只要與底層顏色維持適當的對比。換句話說，淺色調是預設做法，高飽和是例外；一旦換色，記得把對比重新驗過一次。
用 prefers-color-scheme 讀取系統的深淺設定
網頁要自動配合使用者的深淺偏好，最小可用的寫法是 CSS 的 prefers-color-scheme 媒體查詢。下面這段先寫淺色，再在深色偏好下換成前面兩節的色碼。
body {
background: #ffffff;
color: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
body {
background: #121212;
color: #e0e0e0;
}
}Code language: CSS (css)這個查詢讀的是使用者在作業系統或瀏覽器的設定，並不是網站自己去偵測。根據 MDN 的說明，使用者沒有明確表達偏好時，查詢會視為 light。各主流瀏覽器都已廣泛支援這項查詢，自 2020 年 1 月起就能使用。
切換之後，要記得連同文字與強調色一起重新驗對比，不能只換背景。淺色版裡的 #1A1A1A 文字搬到 #121212 上幾乎看不見，dimgray 的次要文字也只剩 3.41，所以文字的三個層級與強調色，都得照前面兩節的色碼重新挑。
CSS 色名中的黑、深灰與帶色相的近黑
W3C 的《CSS Color Module Level 4》命名顏色表裡，屬於黑色系的色名可以分成兩類，一類是沒有色偏的中性黑灰，另一類是帶有色相的深色。
另一個常見的麻煩，是 charcoal、jet、onyx、墨黑、炭黑這些常聽到的名字，查得到色碼卻不知道出處。這幾個名字其實不在規格裡，本來就沒有標準值。
black 與 dimgray、gray、darkgray 的中性黑灰
從純黑往淺走，會依序經過 dimgray #696969、gray #808080、darkgray #A9A9A9，再往上是 silver 與 lightgray。這幾個色名的 RGB 三個值都相同，所以沒有任何色偏。
| 英文色名 | 常見中文譯名 | HEX | RGB | 對白 | 對黑 |
|---|---|---|---|---|---|
| black | 黑色 | #000000 | 0 0 0 | 21.00 | 1.00 |
| dimgray | 暗灰色 | #696969 | 105 105 105 | 5.49 | 3.83 |
| gray | 灰色 | #808080 | 128 128 128 | 3.95 | 5.32 |
| darkgray | 深灰色 | #A9A9A9 | 169 169 169 | 2.35 | 8.94 |
| silver | 銀色 | #C0C0C0 | 192 192 192 | 1.82 | 11.54 |
| lightgray | 淺灰色 | #D3D3D3 | 211 211 211 | 1.50 | 14.03 |
中文譯名是常見叫法，各站不完全一致，溝通時以英文色名或 HEX 為準。darkgray 雖然名字有個「深」字，實際上卻比 gray 還要亮，所以判斷深淺要看色值，不能靠名字，亮度的順序是 black、dimgray、gray、darkgray、silver、lightgray。
每一階適合的位置也不同。dimgray 在白底上有 5.49，過了 4.5，適合在淺色底上放次要文字；gray 在白底只有 3.95，不夠一般文字使用，換到黑底上有 5.32，才夠用；darkgray 在白底只有 2.35，不能當文字，放在黑底上卻有 8.94，是相當舒服的輔助文字色。silver 與 lightgray 已經偏淺灰，在這裡只算黑灰系列的延伸，白底上的 1.82 與 1.50，只適合當分隔線或背景。
帶色相的深色放在黑底上幾乎看不見
darkslategray、midnightblue、navy 這些名字裡帶「深」或「黑」的顏色，本質上是有色相的深色，並不是中性黑。下表把它們對白色與黑色的對比擺在一起。放在白底上，這些顏色的對比很高，放在黑底上卻只有 1.31 到 2.96，幾乎融在背景裡。
| 英文色名 | HEX | RGB | 對白 | 對黑 |
|---|---|---|---|---|
| darkslategray | #2F4F4F | 47 79 79 | 8.93 | 2.35 |
| midnightblue | #191970 | 25 25 112 | 14.85 | 1.41 |
| navy | #000080 | 0 0 128 | 16.01 | 1.31 |
| indigo | #4B0082 | 75 0 130 | 12.95 | 1.62 |
| maroon | #800000 | 128 0 0 | 10.95 | 1.92 |
| darkred | #8B0000 | 139 0 0 | 10.01 | 2.10 |
| darkgreen | #006400 | 0 100 0 | 7.44 | 2.82 |
| saddlebrown | #8B4513 | 139 69 19 | 7.10 | 2.96 |
依色偏大致分成三組。偏青灰的是 darkslategray，在這張表裡最接近中性深灰，卻仍帶著青綠的底色。偏藍紫的有 midnightblue、navy 與 indigo，三個放在黑底上都低於 1.7，幾乎分不出來。偏紅綠褐的有 maroon、darkred、darkgreen 與 saddlebrown，對黑色也都在 3 以下，比藍紫那組稍好，但離文字門檻還差得遠。
所以把這類顏色當成「黑色的替代」之前，要先看清楚它的色偏。它們適合放在淺色底上，或當作面積色使用；和黑色並排時，不要指望靠它們做出層次，因為兩者的亮度差距太小，看起來只會像同一塊黑。
炭黑、墨黑與 charcoal、jet 沒有規格定義值
W3C 的《CSS Color Module Level 4》命名顏色表裡，charcoal、jet、onyx、ebony、raven、obsidian 這幾個色名全部不存在，中文的炭黑、墨黑、漆黑也沒有對應的規格值。各處給出的色碼不一樣，並不是誰抄錯，而是這些名字本來就沒有標準值。
比較務實的做法是，不用色名溝通，直接挑一個 HEX 寫進色票，並且連同用途一起寫下，例如「深色模式底色 #121212」。色名只能在自己的團隊內約定，對外交付時，色碼才是不會誤會的語言。
如果想找一個起點，可以從上面兩張表最接近的色名開始微調。炭黑可以從 dimgray 或 darkslategray 起試，墨黑可以從近黑表裡的 #1A1A1A 起試，這只是建議的起點，不是標準答案，最後要依自己的畫面與對比需求調整。
彩色底上的文字顏色，以相對亮度 0.179 為黑白字分界
按鈕、標籤與色塊的底色是彩色時，上面的文字該放黑還是白，色碼表從來不會告訴你。答案可以算出來，依 WCAG 公式推導，彩色底的相對亮度高於約 0.179，黑字的對比比較高；低於它，白字的對比比較高。
這個結論常常與直覺相反。許多人覺得深色底用白字、淺色底用黑字，但純紅 #FF0000 配白字只有 4.00，過不了一般文字的 4.5，配黑字反而有 5.25。看對比數字選字色，比憑感覺可靠。
黑字與白字對比相等的相對亮度
W3C 的 WCAG 2.2 說明文件把一般文字的對比門檻定在 4.5:1，大字則是 3:1，大字指的是至少 18pt，或 14pt 的粗體。相對亮度的範圍是 0 到 1，黑色為 0，白色為 1，sRGB 的各通道要先經過線性化才代入公式。
黑字放在亮度 L 的底色上，對比是 (L + 0.05) / 0.05；白字的對比則是 1.05 / (L + 0.05)。兩者相等時，(L + 0.05) 的平方等於 1.05 乘以 0.05，解出 L 約為 0.179。
這個分界值給的是判斷準則，不是硬性規定。底色的相對亮度高於 0.179，黑字的對比比較高，低於它，則是白字比較高。但比較高不代表一定夠用，還是得回頭看有沒有過 4.5:1 的門檻。
常見彩色底的黑字與白字對比實算
下表挑了 11 個常見的 CSS 色名，列出相對亮度、黑字對比、白字對比，並標出哪一種字色能過 4.5。色值取自 W3C 的 CSS 命名顏色表，對比依 WCAG 公式計算。
| 色名 | HEX | 相對亮度 | 黑字 | 白字 | 過 4.5 的字色 |
|---|---|---|---|---|---|
| yellow | #FFFF00 | 0.928 | 19.56 | 1.07 | 黑字 |
| gold | #FFD700 | 0.699 | 14.97 | 1.40 | 黑字 |
| tomato | #FF6347 | 0.306 | 7.13 | 2.95 | 黑字 |
| red | #FF0000 | 0.213 | 5.25 | 4.00 | 黑字 |
| seagreen | #2E8B57 | 0.197 | 4.95 | 4.25 | 黑字 |
| teal | #008080 | 0.170 | 4.40 | 4.77 | 白字 |
| royalblue | #4169E1 | 0.167 | 4.33 | 4.85 | 白字 |
| crimson | #DC143C | 0.160 | 4.21 | 4.99 | 白字 |
| blueviolet | #8A2BE2 | 0.126 | 3.52 | 5.96 | 白字 |
| firebrick | #B22222 | 0.107 | 3.14 | 6.68 | 白字 |
| purple | #800080 | 0.061 | 2.23 | 9.42 | 白字 |
亮度高於 0.179 的底色，黑字的對比都比較高。tomato 的白字只有 2.95，只有黑字能用；gold 與 yellow 配白字分別是 1.40 與 1.07，幾乎看不清楚字。純紅配白字的 4.00，在一般文字下不及格，只有大字的 3:1 能勉強過關。
亮度低於 0.179 的深色那端，結果就反過來。blueviolet 的黑字只有 3.52，白字有 5.96；firebrick 的黑字 3.14，白字 6.68；purple 的黑字 2.23，白字 9.42，這些都該用白字。crimson 比較特別，白字 4.99 剛好過關，黑字 4.21 則不行。
teal、royalblue、crimson 與 seagreen 落在黑白字都接近 4.5 的交界帶，兩種字色的對比都在 4 到 5 附近，只差一點點。teal 的黑字 4.40、royalblue 的黑字 4.33，都是「黑白都很接近，但只有白字過關」的例子。遇到這種底色，換了一點色相或明度，結果就可能翻過來，所以換底色後一定要重新計算，不要憑色相直覺選字色。
安全灰 #767676 在純白與純黑都過關，深色主題上對比不足
灰色文字是最常被說「看不清」的顏色，原因在於同一個灰，放在白底和黑底上的對比完全不同。下表是 7 個灰階在四種底色上的對比。
| 灰階 | 對純白 | 對純黑 | 對 #121212 | 對 #1A1A1A |
|---|---|---|---|---|
#595959 | 7.00 | 3.00 | 2.67 | 2.48 |
#696969 dimgray | 5.49 | 3.83 | 3.41 | 3.17 |
#767676 | 4.54 | 4.62 | 4.12 | 3.83 |
#808080 gray | 3.95 | 5.32 | 4.74 | 4.41 |
#999999 | 2.85 | 7.37 | 6.58 | 6.11 |
#A9A9A9 darkgray | 2.35 | 8.94 | 7.97 | 7.41 |
#CCCCCC | 1.61 | 13.08 | 11.67 | 10.84 |
#808080 在純白底只有 3.95，在純黑底卻有 5.32；#595959 在白底有 7.00，換到黑底只剩 3.00。中性灰裡只有 #757575 與 #767676 這兩階，同時在純白與純黑上都過 4.5，以 #767676 來說，分別是 4.54 與 4.62，所以它常被當作兩種底色都能用的「安全灰」。
不過一換成深色主題常用的底色，這個安全灰就不再安全了。#767676 放在 #121212 上只剩 4.12，放在 #1A1A1A 上更只有 3.83。灰色的次要文字搬到深色主題時，不能直接沿用淺色版的灰，要重新挑，#808080 在 #121212 上有 4.74，在 #1A1A1A 上是 4.41，想要有餘裕，可以再往 #999999 挑。
四組黑色配色的色碼與實算對比
四組黑色配色都標明了底色、文字色、點綴色與主要的對比值，可以直接複製使用。選色的邏輯是底色先定，文字再驗對比，點綴色只做小面積。
另外有兩條通則，同樣是建議，不是規範。
- 一個頁面只選一種黑的階層，純黑和近黑並排，會讓表面之間的前後關係變得混亂。
- 高飽和的亮色只用在小面積，不要鋪成大面積。
所有對比值都是依 WCAG 公式實算的結果，請當成建議組合，換了色碼就要重新驗算。
黑底白字配金色強調
黑金是最經典的黑色配色，底色用 #121212，文字色 #E0E0E0，對比 14.19；標題與連結用 gold #FFD700，對比 13.36。
按鈕的用法剛好反過來，gold 變成按鈕的底，上面放黑字 #000000，對比 14.97。同樣是金色，標題裡的金色是黑底上的字，按鈕上的金色卻是托著黑字的底，兩個方向的對比都夠高，可以並用。
金色也有不能搬去的地方。gold 放在白底上只有 1.40，完全不能當文字；如果想要暗一點的金色，常見的自訂值 #D4AF37 在 #121212 上有 8.91，也能使用，但它不屬於 CSS 色名。
近黑底搭薄荷綠與青色，只做小面積點綴
科技、工具與儀表板常見的冷色深色模式，底色用 #1A1A1A，文字色 #E8E8E8，對比 14.20；點綴色可以選 mediumspringgreen #00FA9A，對比 12.55，或是 aqua #00FFFF，對比 13.88，兩個數字都很高。
不過這兩個都是滿飽和的亮色。前面提到，Google 的說明指出飽和度高的顏色搭配深色背景，容易產生視覺上的震動，讓文字更難讀，所以它們只適合用在連結、圖示與進度條，不要拿來鋪大面積，也不要排成長段的文字。
如果想降低飽和度，可以改用前面強調色表裡的淺色版，像是 lightskyblue #87CEFA，在 #121212 上有 10.92，畫面會柔和一些。
黑底配深紅按鈕，紅色不當小字
黑底搭紅色是另一個經典組合，但有個容易踩的坑。底色 #000000，文字 #FFFFFF，按鈕底用 crimson #DC143C，按鈕上的白字對比 4.99，剛好過關；換成黑字只有 4.21，所以按鈕上要用白字。
紅色字放在黑底上是另一回事。red #FF0000 在黑底上是 5.25，數字雖然過關，但前面提到 W3C 另有避免紅色放在黑底的提醒，原因與 protanopia 的使用者有關，這裡點到為止。比較穩的做法是，小字改用亮度更高的 tomato #FF6347，對比 7.13；或是乾脆不用紅字，讓紅色只當按鈕的底色。
白底黑字加黃色警示色塊
最後一組把黑色放回淺色底上。頁面底色 #FFFFFF，文字色 #1A1A1A，對比 17.40；次要文字用 dimgray #696969，對比 5.49。警示或提示的色塊用 yellow #FFFF00 或 gold #FFD700，上面的黑字 #111111 對比分別是 17.58 與 13.46。
黃色底上必須用黑字，白字在 yellow 上只有 1.07，幾乎看不清。黃底黑字的對比很高，而且字與底靠的是亮度差、不是色相差，轉成灰階也分得出來。
次要文字用 dimgray 就夠了，沒必要再往淺挑，#999999 在白底上只有 2.85，並不及格。色塊上的字如果是大字，也就是 18pt 以上，或 14pt 的粗體，門檻才會降到 3:1。
印刷的黑色分成單色黑與四色黑
螢幕上的 #000000 轉到印刷稿，並不是只有一種黑。細字與細線用單色黑 K100，大面積的黑底才考慮四色黑，也就是在黑墨之外，再加青、洋紅、黃墨。具體的百分比因印刷機與紙張而異，一律向印刷廠確認，不要自己抄一組數字。
這些做法都出自 Adobe 的說明文件。另外，從 RGB 轉成 CMYK 時，也要檢查總墨量，才不會出現意料之外的黑。
小字與細線用單色黑 K100
單色黑只有黑墨這一個版，不必和其他色版對齊，細字與細線最怕不同色版之間套不準，所以小字用 K100 最穩。照同樣的道理推想，由多個版疊出來的黑，得靠每一個版都對得準；細字的筆畫本來就細，只要其中一版稍微偏位，邊緣就可能露出別的色墨。
InDesign 也替這件事做了預設處理。Adobe 的說明文件寫到，InDesign 預設會自動將 100% 黑色的填色與線條設為壓印（overprint），避免小黑字壓在彩色區塊上時，因為套印不準而出問題。
這個預設只針對 Black 色票的 100%，黑色的色調（tints），以及用其他方式建立的黑色，都不受影響。想關閉的話，到偏好設定的 Appearance of Black 頁面，取消勾選 Overprint Black Swatch at 100%；偏好設定在 Windows 位於 Edit > Preferences，在 macOS 位於 InDesign > Preferences。
大面積黑色改用四色黑，成分比例向印刷廠確認
單色黑壓印時，底下的墨色有機會透出來。Adobe 的說明文件寫到，標準的 100% 單色黑在壓印時，可能不會顯得完全不透明，底下的墨色會稍微透出；為了避免這種透出的情況發生在大面積黑色或大字上，建議改用四色黑，也就是在黑墨上加少量的青、洋紅與黃。
至於加多少，Adobe 的建議是向服務供應商確認適合自己印刷機與紙張的確切百分比。四色黑的配方因此沒有通用值，哪個比例看起來比較黑，要看實際印在哪張紙上，這件事交給印刷廠最準。
另外有一個容易搞混的詞，Adobe 特別提醒四色黑不要和 Registration（套準色）混為一談。套準色會讓每一個色版都以 100% 上墨，並不是一組調配好的黑，不能拿來當四色黑用。
RGB 的 0、0、0 轉成 CMYK 後要檢查總墨量
把螢幕稿的 #000000 直接轉成 CMYK 時，得到的是 K100 還是四色混合，取決於色彩設定與目的描述檔；同一個 RGB 黑在不同的設定下，轉出來的結果可能不同。
建議的做法是，轉完用 Photoshop 的資訊面板檢查一次。Adobe 的說明文件寫到，資訊面板的色彩讀數選項裡有 Total Ink，會顯示指標所在位置所有 CMYK 墨量的總百分比，計算依據是 CMYK 設定對話框裡的值。把吸管移到黑色區域，就能讀到那個位置的總墨量。
總墨量的上限是多少，由印刷廠與紙張決定，並沒有放諸四海皆準的數字。把讀到的結果和檔案一起交給印刷廠確認，比自己猜上限安全得多。
黑色的色碼從來不只是一個值，它背後還有放在哪裡、配誰、印在什麼上面這幾個前提。下次替專案定義黑色時，不妨在色票裡把每個黑色的用途一起寫下來，像是「深色模式底色 #121212」「標誌專用黑 #000000」，並且用對比公式把每一組文字與底色驗過一遍，印刷稿的黑則交給印刷廠依紙張確認。這樣一來，團隊裡的每個人看到「黑色」，指的才會是同一件事。