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

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

Color.review

網站鏈接：https://color.review/

使用教學

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

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

舉例來說，我設定前景、背景色后左上角顯示的對比度為 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），看起來也和原本顏色相去不遠，如果你想要調整網頁顏色，讓它可以讓一般使用者順利閱讀，其實花點時間微調配色相當重要喔！

值得一試的三個理由：

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