Color review 檢查網頁配色是否符合 WCAG 規範

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

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

Color.review 使用 RGB、HSL、CMYK 和 CSS 格式置入顏色，還有一篇帶有標題、內文加上圖片的範例文章用來預覽配色，除了顯示兩個顏色計算後的對比度數值還能找出符合 WCAG 規範的顏色（後面內文詳細說明）。

Color.review
https://color.review/

使用教學

STEP 1

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

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

STEP 2

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

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

STEP 3

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

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

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