其他
對比度檢查
對比度檢查是一款指定前景色(文字色)與背景色後,即時計算兩者對比度,並判定是否符合 WCAG(Web Content Accessibility Guidelines)2.1 / 2.2 無障礙標準的工具。對比度檢查的結果會以 4.5:1 這樣的形式醒目顯示,作為配色檢查工具,讓您一眼就能掌握配色的無障礙程度。
預覽
可確認一般大小文字的呈現方式。
大型文字的呈現方式
UI 元件範例WCAG 2.1 / 2.2 判定
| 區分 | AA? | AAA? |
|---|---|---|
| 一般文字 | 合格4.5:1 | 合格7:1 |
| 大型文字（18pt / 14pt 粗體以上） | 合格3:1 | 合格4.5:1 |
| UI 元件、圖形 | 合格3:1 | 無規定 |
色覺異常模擬?
呈現方式為基於 Brettel 1997 法的近似，無法保證每個人實際的呈現方式。
所有計算皆在您的瀏覽器內進行，輸入的顏色不會傳送至外部伺服器。
相關工具
QR Code 產生
將 URL / 聯絡人 / Wi-Fi / 郵件 / 活動 / 地理座標 / SMS / 電話 / 文字轉換為 QR Code 影像。可選尺寸、格式、顏色與 Logo。全程在瀏覽器中完成。
抽籤 / 抽獎
從文字清單或數值範圍中隨機抽出 1~N 項。支援不重複、捲動動畫、抽籤歷史保存。全程在瀏覽器中完成。
色彩選擇器
從圖片中擷取顏色並取得色碼。可透過放大鏡依像素精準拾取,支援 HEX / RGB / HSL 切換與調色盤匯出。全程在瀏覽器中完成。
色碼轉換
可在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具。支援含透明度的 RGBA、8 位 HEX 與 HSLA,將輸入的顏色一次轉換為所有格式,並可一鍵複製。同時顯示 CMYK 參考值。全程在瀏覽器中完成。
番茄鐘
免費的線上番茄鐘，依 25 分鐘專注加 5 分鐘休息的節奏循環。支援環形進度條、提示音、全螢幕模式以及永遠置頂的子母畫面（小視窗彈出），適合用作學習與工作的專注計時器。全程在瀏覽器中完成。
單位換算
可在長度、重量、溫度、面積、體積、速度等各種單位之間相互換算的免費單位換算工具。支援長度換算、重量換算、溫度換算（攝氏與華氏），以及 cm 與英吋、坪與平方公尺等即時換算。全程在瀏覽器中完成。
對比度檢查是什麼?
對比度檢查是一款指定前景色(文字色)與背景色後,即時計算兩者對比度,並判定是否符合 WCAG(Web Content Accessibility Guidelines)2.1 / 2.2 無障礙標準的工具。對比度檢查的結果會以 4.5:1 這樣的形式醒目顯示,作為配色檢查工具,讓您一眼就能掌握配色的無障礙程度。
顏色除了可在文字輸入框輸入 HEX 色碼外,也能透過顏色選擇器,或在支援的瀏覽器中以滴管(EyeDropper API)直接擷取畫面上的顏色來指定。判定會針對「一般文字」「大型文字(18pt / 14pt 粗體以上)」「UI 元件、圖形」3 種區分,分別顯示 AA、AAA 是否合格。一般文字的 AA 為 4.5、AAA 為 7,大型文字的 AA 為 3,UI 元件為 3(aa 對比度 / wcag 對比度)。
此外,當未達標準時,工具會調整明度,自動建議最接近且符合標準的顏色,並可一鍵套用。色覺異常模擬可並列確認 P 型、D 型、T 型的呈現方式,也會一併附上 APCA(預期將於 WCAG 3.0 採用、以感知為基礎的指標)的 Lc 值作為參考。並備有以指定配色實際呈現的預覽。
所有計算皆在您的瀏覽器內進行,輸入的顏色不會傳送至外部伺服器。無需註冊帳號,立即就能使用。
使用方法
- 以 HEX 輸入、顏色選擇器、滴管其中一種方式,指定前景色(文字色)與背景色。
- 對比度會自動計算並醒目顯示。
- 針對 WCAG 的 3 種區分(一般文字、大型文字、UI 元件),確認 AA、AAA 是否合格。
- 未達標準時,可點擊建議的合格色,套用至前景色、背景色。
- 在預覽中確認實際呈現方式,並以色覺異常模擬比較 P 型、D 型、T 型的呈現方式。
- 可視需要透過交換按鈕,將前景色與背景色對調。
使用情境
- 想確認網站或應用程式的文字色、背景色是否符合 WCAG 無障礙標準的製作者。
- 想在公開前檢查設計稿配色對比度是否達 4.5 以上的設計師。
- 想確認按鈕、圖示等 UI 元件是否符合 3:1 的前端工程師。
- 想以模擬確認配色對色覺異常的使用者是否也容易辨識的使用者。
- 想將不合格的配色,在維持相近色調的情況下快速調整為符合標準顏色的使用者。
- 想一併參考 APCA 等新指標來評估配色無障礙程度的使用者。
注意事項
- 對比度依 WCAG 2.x 的定義(由相對亮度以 (L1+0.05)/(L2+0.05) 計算)為準。判定標準為一般文字 AA 4.5 / AAA 7、大型文字 AA 3 / AAA 4.5、UI 元件、圖形 3。
- 「大型文字」是指 18pt(約 24px)以上,或 14pt(約 18.66px)以上的粗體。
- UI 元件、圖形在 WCAG 1.4.11 中僅規定 3:1,並無 AAA 標準(表中會顯示為「無規定」)。
- APCA(Advanced Perceptual Contrast Algorithm)是 WCAG 3.0 草案中參照的指標,本工具會以參考值(Lc)一併附上。正式的合格判定請以 WCAG 2.x 的比值進行。
- 色覺異常模擬基於 Brettel 1997 法的近似,嚴重程度以最大(雙色覺)計算。實際呈現方式因人而異,本工具無法保證。
- 所有計算皆在瀏覽器內完成,輸入的顏色不會傳送至外部。