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

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

Color.review

網(wǎng)站鏈接：https://color.review/

使用教學(xué)

開啟 Color.review 網(wǎng)站后會有預(yù)設(shè)顏色，主要是從右側(cè)調(diào)整前景、背景色，檢查上方顯示的內(nèi)文、標(biāo)題是否有符合 WCAG 規(guī)范的對比度，最好是能設(shè)定到兩個數(shù)值都綠色 AAA，不行的話也至少要讓兩個數(shù)值都顯示為綠色（對比度 4.5 以上）。

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

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

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

那么要怎么利用 Color.review 來調(diào)整到符合 WCAG 2.1 規(guī)范的對比度呢？

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

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

值得一試的三個理由：

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