顏色對比度不夠怎麼調？線上找出符合 WCAG 規範的配色

Color.review 是什麼？

前幾天寫了一篇「Colour Contrast Analyser 色彩對比分析器檢查易讀性和視覺對比度」工具教學，也協助我找到更適合且符合 WCAG（網頁無障礙性指導原則）規範的顏色，簡單來說就是前景色和背景色需要達到一定的對比度才能在閱讀時更輕鬆，而且也能符合各類使用者需求，在測試工具中會有對於網站無障礙項目評分，其中可能很多人遇到的問題是顏色對比度不夠高，我們就能透過色彩工具來解決問題。

本文要推薦的「Color.review」是用來計算兩種顏色對比度、檢查是否符合 WCAG 2.1 規範的線上工具，也能協助使用者找出看起來好看、又適合每個人的色彩組合，相較於 CCA 來說 Color.review 無需下載軟體或應用程式，直接以瀏覽器開啟就能使用，產生對應的分享連結來將檢測結果提供給其他人參考。

Color.review 使用 RGB、HSL、CMYK 和 CSS 格式置入顏色，還有一篇帶有標題、內文加上圖片的範例文章用來預覽配色，除了顯示兩個顏色計算後的對比度數值還能找出符合 WCAG 規範的顏色（後面內文詳細說明）。手邊如果只有 HEX 色碼，可以先用「Google 搜尋內建選色器及 HEX、RGB 色碼查詢轉換工具」換算成需要的格式。

對比度要達到多少才符合 WCAG 2.1？

Color.review 的調色盤上有三條線，分別對應 WCAG 2.1 的三個對比度門檻，先知道各自代表什麼，操作時才知道要把顏色拉到哪個位置。

一般網頁的內文都落在 4.5 這條線上，把對比度調到 4.5 以上是最低要求。如果還想知道這組配色對色盲或弱視使用者的實際觀感，可以再用「Who Can Use 檢查網頁配色對視力障礙使用者友善程度」交叉確認。

使用教學

開啟網站並調整前景色與背景色

開啟 Color.review 網站後會有預設顏色，主要是從右側調整前景、背景色，檢查上方顯示的內文、標題是否有符合 WCAG 規範的對比度，最好是能設定到兩個數值都綠色 AAA，不行的話也至少要讓兩個數值都顯示為綠色（對比度 4.5 以上）。

右上角會有 RGB、HSL、CMYK 或 CSS 顏色格式，選擇自己習慣的格式即可。

查看對比度數值與 WCAG 通過狀態

舉例來說，我設定前景、背景色後左上角顯示的對比度為 4.1，再從上方看到文字部分沒有通過 WCAG 2.1 規範，顯示為紅色的 FAIL，在這樣的配色情況可能會導致內文不容易閱讀（不過標題因字體較大就沒影響）。

往下捲動網頁會看到前景、背景色實際套用在一篇文章或圖案上的效果，左側還會顯示有無符合 WCAG 2.1 以及評分為 AA 或是 AAA，可以看到在這個配色時只有標題有通過，內文部分則是連 AA 評級都沒有達到。

把顏色拉到分界線之間調出合格配色

那麼要怎麼利用 Color.review 來調整到符合 WCAG 2.1 規範的對比度呢？

有看到調色盤裡面有三條線嗎？分別對應到不同的對比度，例如下圖由上而下分別為 3、4.5 和 7，只要將顏色調整到 4.5 到 7 之間就能讓內文及標題的評級達到綠色通過（如果需要兩者都達到 AAA 評級，就要將顏色拉到最下方那條線才有足夠的對比度）。

微調後對比度提高到 4.5，也就符合 WCAG 2.1 對比度（內文為 AA、標題 AAA），看起來也和原本顏色相去不遠，如果你想要調整網頁顏色，讓它可以讓一般使用者順利閱讀，其實花點時間微調配色相當重要喔！

和 Colour Contrast Analyser 該用哪一個？

這兩個工具算的是同一件事，差別在使用場合。

臨時要確認一組顏色、或是需要把結果傳給設計師和工程師，用 Color.review 比較快，如果是在處理本機的圖檔或應用程式介面，「Colour Contrast Analyser 色彩對比分析器檢查易讀性和視覺對比度」這類桌面工具會更方便。另一個方向是反過來做，先用「Colorable 網頁色彩線上產生器」產生符合 WCAG 規範的配色組合，或是從「ColorDrop 線上調色盤」這類網站挑好顏色，再拿到 Color.review 檢查對比度。

值得一試的三個理由：

1. 線上色彩對比度測試工具，檢查是否符合 WCAG 2.1 規範
2. 設定前景色、背景色後套用到範例文章查看標題和內文樣式
3. 顯示對比 3、4.5 和 7 的顏色，協助使用者找出更適合的配色組合

常見問題