OTOnline Toolbox
◩

圖片與設計工具

Contrast Checker

Contrast Checker 在瀏覽器中執行，用於檢查、轉換或準備結果，不會把輸入傳送到伺服器。

圖片與設計工具

Input / output

Aa Sample

Text contrast preview

WCAG result

21:1

Recommended color: #000000

Normal text AA

>= 4.5:1

Pass

Normal text AAA

>= 7:1

Pass

Large text AA

>= 3:1

Pass

Large text AAA

>= 4.5:1

Pass

UI component / non-text 3:1

>= 3:1

Pass

CSS code

.sample {
  color: #000000;
  background: #FFFFFF;
}
HelpOpen usage notes, examples, practical tips, and FAQ only when you need them.

What is this tool?

Contrast Checker 是用於圖片與設計流程的本機瀏覽器工具，輸入、選項與結果都在同一頁完成。

How to use it

  1. 貼上輸入

    在輸入區域輸入或貼上要處理的值。

  2. 調整選項

    選擇適合 contrast, WCAG, accessibility 的模式、格式或單位。

  3. 檢查結果

    執行工具，確認結果後再複製或下載。

Examples

Contrast Checker 範例

Input
範例輸入
Output
在瀏覽器中檢查後的輸出。

Practical tips

  • 內容較大時，先從小樣本開始。
  • 廣告會保持在主要控制項和結果區域之外。

FAQ

Contrast Checker 應該輸入什麼？

請輸入與頁面任務相符的值，並在執行前調整選項。

可以複製 Contrast Checker 的結果嗎？

可以。檢查結果後即可複製或下載。

Contrast Checker 支援行動裝置嗎？

支援。輸入、選項和結果會在小螢幕上縱向排列。

輸入會傳送到伺服器嗎？

不會。此工具設計為在瀏覽器內處理輸入。

Tools to Use Together

Color Palette GeneratorCSS Gradient GeneratorSVG Optimizer