顏色與對比度課是一門 17 關的交互式教程，教你看懂設計稿與 CSS 裏出現的每一種顏色寫法，並學會用可測量的標準判斷「這兩個顏色搭在一起能不能讀」。每一關給你一到三個取色器和一個具體目標——把亮度調到某個值、讓對比度過 4.5:1、找出色相相隔 120° 的三個顏色、把一對色盲者難以區分的顏色改成可區分——你拖滑桿或輸入色值，數值讀數、對比度徽章、配色輪、色盲模擬表實時更新，判定器告訴你差在哪裏。

課程分四段：顏色模型（RGB、HEX、HSL、HSV、OKLCH 的分量各自控制什麼，為什麼 HSL 的「亮度」和眼睛感覺到的亮度不一樣）；對比度與 WCAG（相對亮度公式、4.5:1 / 3:1 / 7:1 三個門檻分別管什麼）；配色（互補、三角、類似三種色輪關係）；無障礙與實踐（紅綠色盲看到的世界、怎樣選一套色盲安全的配色、從一張 logo 裏統計主色）。最後一關要求你綜合前面所學，交出一套三色並通過全部檢查。

學完約 45 分鐘。面向前端開發者、設計師和任何需要給幻燈片、圖表、海報挑顏色的人；不需要美術基礎。

1. 01看目標與取色器練習區頂部是本關目標；下方一到三個取色器，標註「固定」的不可改（比如指定的背景色），其餘可點色塊選色或直接輸入 #RRGGBB / rgb() / hsl()。
2. 02調顏色選中一個取色器後，滑桿面板出現——RGB 三根、HSL 三根，或兩組都有；「數值讀數」面板同步顯示同一顏色的 HEX、RGB、HSL、HSV、OKLCH 五種寫法。
3. 03看反饋對比度關卡顯示比值與 AA / AAA 徽章，並用真實文字預覽；配色關卡在色輪上標出當前色的互補 / 三角 / 類似位置；色盲關卡列出四種色覺缺陷下的模擬色與色差 ΔE。
4. 04判定與通關滿足目標時結果條變綠、目錄裏該關打勾。部分關卡是填數字或選項，答案框在交互區底部。
5. 05提示、答案、進度「提示」給思路，「看答案」顯示參考色值並可一鍵填入；進度存在本機，刷新不丟，「分享本關」複製帶 ?lesson=n 的鏈接。

第 8 關「WCAG AA：正文至少 4.5:1」把背景固定為白色，要你把文字色調到對比度 ≥ 4.5 且不能是純黑。下面是一次嘗試記錄：

背景（固定）  #FFFFFF   相對亮度 L = 1.000
嘗試 1        #3B82F6   L = 0.228   對比度 = 1.05 / 0.278 = 3.68:1
  判定        ✓ AA 大字（≥ 3）   ✕ AA 正文（≥ 4.5）
嘗試 2        #2563EB   L = 0.153   對比度 = 1.05 / 0.203 = 5.17:1
  判定        ✓ AA 大字   ✓ AA 正文   ✕ AAA 正文（≥ 7）   → 通關

第 15 關「色盲安全」以橙色 #E76F51 為參考，初始的第二個顏色是綠 #8AB17D：正常視覺 ΔE ≈ 0.20 一眼可分，綠色盲模擬下降到 0.056 幾乎重合。把第二個顏色改成中等亮度的藍（如 #2563EB），模擬下 ΔE 回到 0.15 以上，且兩色對白底都 ≥ 3:1，即通關。

第 1–2 關：RGB 與 HEX——屏幕是怎麼發光的

屏幕上每個像素由紅、綠、藍三個子像素組成，rgb(37 99 235) 就是三束光各自的強度，0 是關、255 是全亮。三者全 0 是黑，全 255 是白，相等則是灰。HEX 是同一組數的十六進制縮寫：#2563EB 裏 25 = 37、63 = 99、EB = 235，每兩位一個通道；#FFF 這種三位寫法是每位重複一次的簡寫。這套表示叫 sRGB，是網頁與絕大多數顯示器的默認色彩空間；數值和物理光強之間還有一條伽馬曲線，後面算對比度時會用到。

第 3–4 關：HSL——用人能理解的三個量描述顏色

RGB 對機器方便，對人不直觀：想把一個藍色「調淺一點」，得同時改三個通道。HSL 換了一組座標：色相 H 是色輪上的角度（0° 紅、120° 綠、240° 藍，360° 回到紅），飽和度 S 是顏色有多「純」（0% 灰，100% 最豔），亮度 L 是有多亮（0% 黑、50% 純色、100% 白）。調淺就是拉高 L，做粉彩色就是低 S 高 L——課程第 4 關讓你親手調出一個。CSS 裏寫 hsl(221 83% 53%)，與 #2563EB 是同一個顏色。

第 5 關：HSV 與 HSL 的區別

HSV（也叫 HSB）的 V 是「三通道中最大值」：V = 100% 時顏色最豔或最亮，把 S 拉到 0 得到白色而不是灰。HSL 的 L = 100% 永遠是白。設計軟件的取色器多用 HSV（一個方塊加一根色相條），CSS 只支持 HSL，兩者互相轉換沒有損失，但分量含義不同，不要把 HSV 的數字直接填進 hsl()。

第 6 關：OKLCH——為什麼 HSL 的「亮度」會騙人

HSL 的 hsl(60 100% 50%) 是純黃，hsl(240 100% 50%) 是純藍，兩者 L 都是 50%，但黃色看起來明顯更亮。因為 HSL 只是 RGB 數值的幾何重排，與人眼感知無關。OKLab / OKLCH（Ottosson，2020）在人眼實驗數據上擬合，讓 L 的相等意味着看起來一樣亮，C（彩度）與 h（色相）的變化也更均勻。CSS Color 4 已經把 oklch() 納入標準，主流瀏覽器均已支持。第 6 關要你只看 OKLCH 讀數，把一個顏色調到明度 L 在 0.68–0.72、色相在橙色區間——你會發現 HSL 的 L 讀數與它並不對應。做漸變、生成同一色相的明暗階梯、跨色相保持「一樣亮」，用 OKLCH 會穩定得多。

第 7 關：對比度公式

WCAG 定義的對比度不是任意兩個數的差，而是相對亮度之比：

其中 $L_1 \ge L_2$，0.05 模擬環境光的反射。相對亮度 $L$ 由 sRGB 三通道先做伽馬解碼再加權：

綠色權重最大（0.7152），所以同樣數值的綠看起來比藍亮得多；黑白對比度是 21:1 的上限。第 7 關讓你對着讀數手算一次，之後每一關都由頁面代算。

第 8–10 關：4.5、3、7 三個門檻

WCAG 2.2 的 1.4.3（AA 級）要求正文對比度 ≥ 4.5:1，大字（約 24px 常規或 18.5px 粗體）≥ 3:1；1.4.11 要求圖標、邊框、圖表等「非文字內容」也 ≥ 3:1；1.4.6（AAA 級）把正文提到 ≥ 7:1。這些不是審美標準，而是讓中度低視力用户仍能閲讀的經驗閾值，也是許多國家的法規依據。

第 9 關特意要求「過 7:1 但不用純黑」：#000 配 #FFF 是 21:1 沒有問題，但大面積純黑白容易產生眩光，設計上通常選 #1A1A1A、#24292F 這類深灰，它們仍能輕鬆超過 7:1。反過來，淺灰佔位文字 #9CA3AF 在白底上只有 2.5:1，很多網站在這裏不合規。

第 11–13 關：色輪上的三種關係

配色理論最基礎的部分是色相之間的角度關係：

• 互補（相差 180°）：對比最強，適合強調與按鈕，大面積並列會「打架」，通常一主一輔。
• 三角（相隔 120°）：三個顏色均衡活潑，常見於品牌與插畫，用時降低其中兩個的飽和度。
• 類似（相鄰 20–40°）：和諧、安靜，適合背景與層級，缺點是缺少對比，需要用明度拉開。

課程的配色輪標出當前色的這三組位置；判定只看色相角度差（允許小幅誤差），飽和度與亮度可以自由調整——真實配色裏它們往往比色相更重要。

第 14–15 關：色覺缺陷

約 8% 的男性與 0.5% 的女性有某種色覺缺陷，最常見的是紅綠色盲（protanopia 缺紅、deuteranopia 缺綠），藍黃色盲（tritanopia）少見，全色盲極少。課程用 Machado 等人 2009 年的生理模型模擬：把顏色投影到缺陷者的錐細胞響應上，再換回 sRGB。同時用 OKLab 空間的歐氏距離 ΔE 量化兩個顏色「差多少」：≈ 0.02 以內幾乎不可分，≥ 0.15 一眼可分。

第 14 關讓你在三對顏色裏找出綠色盲者最難分的一對——橙 #E76F51 與綠 #8AB17D 模擬後 ΔE 只剩 0.056，而紅與青、深藍與黃因為明度差大仍然清晰；第 15 關要你修好它。可行的手段有兩種：拉開明度（色盲主要丟失色相信息，明度差始終可見）或換色相（紅/綠改成藍/橙）。圖表儘量再加形狀、紋理或直接標註數字，不要只靠顏色傳遞信息——這是 WCAG 1.4.1 的要求。

第 16 關：品牌色提取

從圖片裏「提取主色」的樸素做法是統計像素：把每個像素的 RGB 各通道量化到 16 級（4096 個桶），計數、排序、取前幾個桶的平均色。課程在 canvas 上畫一個示例 logo，統計後給出按佔比排序的調色板，你點擊色塊或直接在圖上取色。真實工具（如 Vibrant.js、Material You 的動態取色）會再做聚類、剔除近白近黑、按飽和度加權，但原理相同。

第 17 關：一套能用的三色

最後一關綜合全部：交出三個顏色，每個對白底的對比度都 ≥ 4.5:1（可以直接做正文或按鈕文字），任意兩個之間的色相差 ≥ 60°（可分），並建議把三者的 OKLCH 明度調到相近（統一）。真實項目裏的配色決策，大致就是「可讀、可分、統一」這三條約束的交集。

色彩空間

只講 sRGB 及其派生（HSL、HSV）與 OKLCH；不講 Display P3、Rec.2020 等廣色域，不講 CMYK 印刷與專色。

對比度算法

使用 WCAG 2.x 的相對亮度公式；WCAG 3 草案中的 APCA 感知對比度不在課程範圍（它更精確，但尚未成為標準）。

色盲模擬

Machado 2009 模型的全缺陷（severity = 1）矩陣，未提供程度可調的弱色覺模擬。

配色判定

只校驗色相角度關係（允許小幅誤差），不評價審美。

品牌色提取

只對課程內置的示例圖運行，不接受上傳；要處理自己的圖片請用「顏色工具」。

不做什麼

不生成調色板方案、不導出設計令牌、不檢查整站合規。

• 「HSL 的 L 相同就一樣亮」：不是。HSL 與感知無關，黃色 L=50% 遠比藍色 L=50% 亮；要讓顏色看起來一樣亮，比對 OKLCH 的 L 或直接看對比度。
• 「顏色差得越遠對比度越高」：對比度只看亮度。純紅 #F00 與純綠 #0F0 色相相差 120°，對比度卻只有 2.9:1，並且紅綠色盲幾乎無法區分。
• 「4.5:1 是設計師的偏好」：它是 WCAG 2.2 AA 級的可測量門檻，是多國無障礙法規的依據。
• 「透明度不影響對比度」：半透明文字疊在背景上得到的合成色才是真正參與計算的顏色；工具算的是不透明色，要先把疊加結果算出來。
• 「色盲就是分不清紅綠」：還有藍黃色盲與全色盲；而且紅綠色盲者也能分辨明度差，所以拉開明度永遠有效。

課程全部在瀏覽器本地運行：顏色換算、對比度、色盲模擬與像素統計都是頁面內的純計算，不請求服務器；示例 logo 是頁面用 canvas 現場繪製的，不加載外部圖片；進度存在本機 localStorage。

• W3C，Web Content Accessibility Guidelines (WCAG) 2.2，Success Criterion 1.4.3 Contrast (Minimum)、1.4.6 Contrast (Enhanced)、1.4.11 Non-text Contrast，以及術語表中 relative luminance 與 contrast ratio 的定義：https://www.w3.org/TR/WCAG22/#contrast-minimum（访问日期：2026-09-09）
• W3C，CSS Color Module Level 4——sRGB 伽馬曲線、hsl()、oklch() 的規範定義與相互轉換：https://www.w3.org/TR/css-color-4/（访问日期：2026-09-09）
• Björn Ottosson，A perceptual color space for image processing（2020）——OKLab 的設計目標與轉換矩陣：https://bottosson.github.io/posts/oklab/（访问日期：2026-09-09）
• G. M. Machado, M. M. Oliveira, L. A. F. Fernandes，A Physiologically-based Model for Simulation of Color Vision Deficiency，IEEE TVCG 15(6), 2009——課程色盲模擬所用矩陣的來源：https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html（访问日期：2026-09-09）
• MDN Web Docs，Color contrast（無障礙指南）——門檻的實踐解讀與工具清單：https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast（访问日期：2026-09-09）