對比接口和可讀性

1）為什麼會有對比

• 減少認知負擔和疲勞，
• 提高了界面掃描速度，
• 提高視力和色彩感知障礙患者的承受能力，
• 減少相互關聯的腳本（付款、表格、確認）中的錯誤。

2）基本概念和公式

2.1 WCAG對比

• Contrast = (L1 + 0.05) / (L2 + 0.05），其中「L1 ≥ L2」，「L」是相對亮度（0..1）。

2.2相對亮度（sRGB）

1.將R、G、B組件帶入範圍0..1。

• 如果'c ≤ 0。04045', to' c_lin=c/12。92`
• 否則,"c_lin=（c+0.055) / 1.055) ^ 2.4`

3.亮度： 'L=0。2126 R_lin + 0.7152 G_lin + 0.0722 B_lin`

2.3顏色表示

HSL/HSV-方便手動調整,但感知不均勻。
Lab/LCH/OKLCH-更接近人類感知；OKLCH方便於在保持可讀性的同時系統地改變光度/飽和度。

3）規範和目標（WCAG 2。2)

文本≥ 14 pt bold或≥ 18 pt（普通）：對比度至少為3：1 （AA）。

文本的其余部分： 對比度最低4。5:1 (AA).

AAA（可讀性提高）：普通文本為7：1；4.5-1對於大。
圖像和重要的非攝影元素（輸入字段邊界，檢查框，開關，錯誤指示器）：帶背景的地標3：1。
狀態（hover/focus/pressed/disabled）在狀態之間或具有背景時必須具有不低於3：1的區分性,再加上明顯的非攝影指示器（下劃線、陰影/邊框、厚度變化）。

4）設計系統： 對比令牌

建議在設計系統中將對比度捕獲為令牌屬性。

• 「fg/primary」 ↔ 「bg/base」 ≥ 7：1（關鍵文本的AAA）
• `fg/secondary` ↔ `bg/base` ≥ 4.5:1
• 「fg/muted」 ↔ 「bg/subtle」 ≥ 3：1（服務文本）
• 'border/default' ↔ 'bg/base' ≥ 3：1（字段邊界、卡片）
• `interactive/default` ↔ `bg/base` ≥ 4.5：1（鏈接/按鈕）
• 「interactive/disabled」不應模仿活動狀態；使用對比度降低和光標/ARIA屬性。

• 主題的基本亮度（L），然後是層/表面的偏差「Δ L」（「bg/subtle」，「bg/elevated」），
• 在測試中捕獲最小對比對。

5）明暗主題

明亮的主題：文字幾乎是黑色的（不是幹凈的#000，而是溫暖/寒冷的色調），背景從白色到略微有色以減少「閃爍」。

黑暗主題： 避免純粹的#000背景-深石墨/煤炭與L≈0。12–0.16降低了亮度；將白色文字軟化至L≈0。9.

在兩個主題中保持相同的對比目標；不要讓顏色重音在黑暗背景上失去可讀性（通常需要轉移「Δ L」並降低飽和度）。

6）圖像和視頻中的文字

使用覆蓋層（漸層/半透明層40-60%）或文本下方的條紋。
固定最低4。5：1在文本和本地條紋背景之間。
對於動態視頻-自適應背景/幀亮度分析（中央/偽造區域的采樣）。

7）狀態和交互性

鏈接不僅要用顏色來區分：默認下劃線或下劃線到hover/focus+與普通文本的對比度≥ 3：1。
按鈕：文本和圖標≥ 4。5：1到填充；填充≥ 3：1到周圍環境。

錯誤/成功/警告： 不要依賴顏色；添加圖標/文本提示；提供最低4的文本對比度。5:1.

8）顏色感知受損的人

• Deuteranopia/Protanopia（紅色和綠色區域）：避免使用「紅色vs綠色」組合而沒有其他特征。
• Tritanopia：分別檢查藍黃色對。
• 使形狀和圖形變得清晰：文本標簽、不同的筆觸/標記類型、填充圖樣、段簽名。

9）印刷和背景

Kegl主文本：14-16 px最低（web）, 16-18 px用於內容區域。
字符串間距1。4–1.6以高對比度提高背景的可讀性。
避免在對比度不足的情況下進行微妙的刻字。
彩色背景上的文本：減少背景飽和度和/或增加光度以達到目標關系。

10）圖表,表格,圖形

線條/列≥ 3：1到網格/背景。

軸和傳說的簽名≥ 4。5:1.

除顏色外,還使用不同的形狀/模式。

11）動態/自適應對比

自動對比： 計算選定填充的文本的對比顏色（例如,通過OKLCH：選擇「L」以達到4。5:1).

系統設置：尊重「prefers-countrast」、「forced-colors」、高端操作系統模式。
個性化：在應用程序中設置「高對比度」（增強「Δ L」，用更中性的品牌口音代替品牌，並通過形狀/圖標保持專有性）。

12）控制流程和自動化

12.1為設計師

檢查布局（兩個主題和關鍵背景）上的對比度。
在元件（標題/primary/secondary/hint）中輸入「對比度插槽」。
記錄每個組件的有效背景上下文。

12.2為開發人員

單位輔助器：令牌對測試中的對比度計算和散列函數。
帶有對比度校驗的視覺快照（屏幕渲染+通過樣本進行計算L1/L2）。
Linters風格：禁止「原始」顏色，僅通過令牌。

12.3在CI/CD中

檢查主題和狀態中的所有「fg/bg」對。

違規情況報告,列出組件、選項、主題和實際值（例如3.9： 1與所需的4。5:1).

13） iGaming特點（可選）

生動的促銷橫幅和錦標賽卡片經常被「吞噬」文本。需要分段/覆蓋並限制背景飽和度。
負責通知的系統元素（18+，限制，風險）-對比度AAA。
在排名/系數表中：數字和+/-符號≥ 4。5：1,勝利的亮點不僅僅是顏色（圖標/標簽）。

14）反模式

僅依靠顏色來區分狀態。
彩色背景上的細灰色字體不計算對比度。
黑暗模式中的「深暗」，促銷區中的「明亮」。
帶有細節/噪音的背景中的文本沒有條紋。

15）歡呼的支票清單

基本文本

[] ≥ 4.5：1（普通），≥ 3：1（大/脂肪）。

鏈接/按鈕

• 第4 ≥按鈕文本。5：1到填充。
• 狀態的區分≥ 3：1或顯式指標。

圖標/邊界

• ≥ 3-1到背景。

黑暗/光明主題

• 同樣的對比目標已經實現。

媒體背景

• Overley/Plashka,系數保持不變。

可用性

• 除了顏色外，還有非攝影特征。

自動化

• CI/CD中關於令牌和組件的對比度測試。

16）引入令牌（示例符號）

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

註意：值近似值；通過計算特定主題的對比度來選擇最後一個。

17）團隊文檔

在Gaidlines中指定：對比目標、忠實/錯誤對示例、關鍵組件的「fg × bg」矩陣、媒體背景規則以及如何啟用「高對比度」模式。
保持實時的「排除和原因」頁面（例如,允許3.8：1在主要顯示標題的狹窄情況下）。

簡短的摘要

對比度是可測量的參數而不是味覺。設置目標（AA/AAA）,通過令牌進行控制（最好是OKLCH）,自動檢查CI和視覺布局,考慮深色/淺色主題和顏色視力受損的人。這樣可以確保可讀性，減少錯誤並提高轉換率。