OKLCH + WCAG 色彩對比工具

使用現代色彩科學設計無障礙色彩組合。採用 OKLCH 色彩模型並透過 WCAG 對比度指標驗證可讀性。

前景色

R
G
B
L
C
H

背景色

R
G
B
L
C
H

前景色 OKLCH 調整

0.00
0.000
0°
HEX: #000000oklch(0.00 0.000 0°)

點擊上方色彩面板來切換調整目標（前景/背景）

匯出設計 Token

{
  "colors": {
    "foreground": {
      "hex": "#000000",
      "rgb": "rgb(0, 0, 0)",
      "oklch": "oklch(0.00 0.00 0deg)"
    },
    "background": {
      "hex": "#ffffff",
      "rgb": "rgb(255, 255, 255)",
      "oklch": "oklch(1.00 0.00 0deg)"
    }
  }
}

預覽

可讀性有限

文字樣式

大標題
次標題
中標題
正文文字
小型文字
超小文字

按鈕與互動元素

標籤元素
連結文字

文字區塊

無障礙設計的重要性

良好的色彩對比度是無障礙設計的關鍵要素。高對比度的文字能夠幫助視覺障礙用戶更容易閱讀內容，同時也能提升所有用戶的使用體驗。

在設計界面時，請確保文字與背景之間有足夠的對比度，尤其是對於小型文字和次要信息。WCAG 標準提供了基本的可讀性評估指標。

卡片元件

卡片標題

範例卡片元件

此卡片展示您選擇的色彩組合在 UI 元件中的呈現效果。

表單元素

對比度結果 (WCAG)

對比比率1.0等級: Fail
可讀性評估不通過
建議

WCAG 對比度評估是網頁無障礙設計的標準指標，確保視力不同的使用者都能輕鬆閱讀您的內容。 AAA 級別 (≥7:1) 提供最佳可讀性，AA 級別 (≥4.5:1) 則符合基本需求。

色彩預設

經典黑白

最大對比度的黑白組合

柔和黑白

較舒適的閱讀體驗

深夜模式

夜間模式風格

藍灰閱讀

舒適的閱讀藍灰色調

海水藍綠

清爽的藍綠配色

暖色葡萄柚

溫暖的紫紅色調

綠色自然

自然綠色調

橘色強調

充滿活力的橘色組合

儲存的色彩組合

尚未儲存任何色彩組合