為主管提供五種易於使用的「對比檢查器」。

2024/07/29

對比檢查器計算對比度，即網站或影像中前景顏色（文字和圖形元素）與背景顏色之間的差異、比例是否符合 WCAG 和 JIS 等無障礙網頁指引。評估工具也稱為對比率檢查器或色彩對比檢查器。

本文介紹以下五種典型的對比檢查工具。

以下將介紹這些工具，並詳細解釋在驗證對比度時應注意的事項、我們鼓勵負責處理無障礙網頁的人員參考這篇文章。

為無障礙專業人員提供五種易於使用的對比檢查工具。

對於設計師和無障礙專業人士來說，有多種類型的對比度檢查器是驗證網站和網頁內容對比度的必要工具。

就是這樣、典型且容易使用的對比檢查器五，雖然有些工具可在網站（瀏覽器）上使用，有些則可安裝使用、這兩種工具都是免費提供的。來介紹系統，所以請放心先檢查系統的使用情況。

工具名稱	特點	利用環境
① WebAIM	進入網站後可立即使用的工具；雖然網站是英文的，但使用者介面簡單、直接且容易使用。	(瀏覽器
② ColorTester	可拖放影像以檢查對比度；由於是安裝式系統，在工作場所使用可能會受到限制。	安裝 （Windows / Mac）
AdobeColor	具有對比度檢查功能，以及豐富的色彩方案相關功能，並可與 Photoshop、Illustrator 和 inDesign 等 Adobe 產品連結。	(瀏覽器
WCAG 顏色對比檢查器	此工具安裝在 Google Chrome 瀏覽器中，並作為擴充套件使用，對於驗證網站的對比度特別有用。	(瀏覽器 (Chrome擴充套件)
⑤ 對比網格	讓使用者一目了然地檢查設定顏色對比的工具；可設定多種顏色代碼，讓不擅長配色的人也能輕鬆瞭解並決定使用哪種顏色。	(瀏覽器

 

① WebAIM

設定文字顏色 (Foreground) 和背景顏色 (Background) 並計算對比度、確保符合 WCAG 標準可使用顏色代碼、顏色擷取器指定顏色，並可調整亮度；設定顏色後，即時計算對比度，並可預覽一般文字、粗體字及圖形物件（如核取標記）。

每項結果是否符合一致性等級，可在「Pass」或「Fail」下一目了然。導覽以英文進行，但簡單直接。因此，您不必擔心一般的使用問題。

官方網頁：WebAIM

② ColorTester

根據 JIS X 8341-3:2010（WCAG 2.0）的標準計算和評估兩種顏色的對比度。將影像檔案拖曳到視窗中，即可自動猜測和評估影像的前景色和背景色是。

該工具由日本製造，雖然與 Windows 和 Mac 作業系統相容、工具需要安裝各作業系統的支援版本為 Windows 8.1 或更新版本，以及 Mac OS X 10.10 或更新版本；另提供英文版本。

官方網頁：色彩測試儀

Adobe 顏色

此工具由 Adobe 提供，Adobe 是為創作者提供工具的開發商和經銷商，具有各種有助於創作活動的功能，包括用於檢查可存取性的對比檢查器。

但它與其他對比檢查器相似、它也會建議設定顏色的最佳對比色。雖然該工具由 Adobe 製作，但無需安裝或登入即可使用，但如果您登入對於經常使用 Adobe 上應用程式的設計師而言，這是一款易於使用的工具，因為它可以與其他 Adobe 產品整合。應該是

官方網頁：Adobe 顏色

WCAG 顏色對比檢查器

Google Chrome 的附加元件 (擴充套件)此工具可用於即時抽取網站頁面內所使用的顏色，並評估每種顏色的對比度；可逐頁檢查，因此可輕鬆用於檢查試運作階段的網站或維護已運作的網站。

按一下側邊控制面板中的任何顏色，即可獲得使用該顏色的頁面部分的特寫、可輕鬆檢查入口網站和其他資訊豐富的網站。。

官方網頁：WCAG 顏色對比檢查器

⑤ 對比網格

許多對比度檢查器都是以指定顏色並每次檢查對比度的方法為基礎，但此工具顯示調色板 (清單)，您可以選擇要使用的對比組合。因此，建議設計初學者和不擅長配色的人使用此方法。

如果您造訪官方網站，您已經可以看到如上圖所示的預設顏色組合。在左側方塊中加入顏色代碼，就可以列出與調色板上其他顏色的組合。合規等級會標籤出來，例如「AA」或「AAA」，不同顏色的標籤表示是否合規。因此，可用的組合也一目了然。

官方網頁：對比網格

在快速介紹了五種有用的對比度檢查工具之後，我們為什麼首先需要驗證對比度呢？

為什麼需要進行對比檢查？

關於在 2024 年 4 月生效的經修訂的《殘疾歧視法》下提供合理便利的義務、網頁可存取性支援也是一項必要的措施。為了因應這個問題，首先必須從多角度檢視網站，以檢查公司網站的無障礙程度是否達到要求。

尤其是，由於網站提供了大量以視覺方式取得的資訊，因此網站不只適用於視障人士，也適用於非視障人士。網站的設計是否能讓低視能和年長使用者，或具有色覺特徵的使用者辨認文字和影像？必須檢查網站的無障礙網頁，並在必要時進行改進。

而驗證這一點所需的指標之一是色彩對比度」。對比度是量度螢幕上兩種顏色（通常是前景色和背景色）的明暗差異，此對比度以數字表示兩種顏色的相對亮度；對比度越高，就越容易區分顏色、對比度的表示範圍是 1:1 到 21:1，數值越高表示對比度越大 = 越容易辨識。。

現在讓我們來看看不同的對比度實際上會在多大程度上改變我們看東西的方式，請參閱下文。

對比度造成的能見度差異

此外，上面的圖片已經過模糊處理，讓人了解當字母看起來模糊時會發生什麼事，就像低視力的人一樣。

◆ 影像模糊時的外觀差異。

因此、對比度高時，由於背景顏色與整體景觀顏色之間的差異較大，因此顏色邊界較容易辨識，也就是較易辨認。舉例來說，如果文字和背景的顏色是 1:1，兩者的顏色相同，無法辨識，而如果是 21:1，則會以黑白顯示，清晰可辨，這點很容易理解。為了確保混合了不同元素 (例如文字和圖像) 的網站的無障礙網頁，對比度的設計必須注意細節。。

因此，他們自己網站設計的對比是'是否符合確保網頁無障礙的要求？對比檢查是確定對比檢查器」是量化決策的重要工具。無障礙網頁的要求將在下一節說明。

三點對比檢查。

使用對比度檢查器來驗證網站或內容的對比度時，您不應以自己的感覺來決定是否可以接受。驗證必須依照既定的無障礙網頁標準進行。本節將介紹在進行對比檢查時需要注意的三個關鍵點。

要點 1：了解符合 JIS 標準的對比率。

如前所述，經修訂的《殘疾歧視法案》已強制要求所有企業提供合理的便利，這使得無障礙網頁成為所有企業的必修課。

構成網站的元素有多種，每種元素都有自己的無障礙標準，所有這些標準都由一個名為 WCAG 2.0（網頁內容無障礙指引 2.0）的國際標準所定義 在日本JIS 標準 (JIS X 8341-3:2016)就是它的內容。

此外，根據總務省的規定，本標準中的達成等級被定義為 A 至 AAA 符合性等級、無障礙網頁要求符合 AA 或 AAA (建議)它被視為

参考：公共機關所需的網站等無障礙支援（內政通訊部）。

對比度也設定了標準。

對比率符合 AA 和 AAA 等級標準

一致性水平	所需的對比率
AA	4.5:1 或更高
AAA	7:1 或以上

換句話說，作為無障礙網頁的網站、要求對比度至少為 4.5:1。許多對比度檢查器會自動計算對比度，因此請注意此對比度，並加以驗證。

請注意，7:1 的 AAA 對比度是以視力下降至 20/80 左右的使用者為基礎，而 W3C 假定視力下降至 20/80 以上的使用者通常會使用輔助技術存取內容。

AAA 並非必須達到，而只是建議達到、如果網站是供沒有輔助技術的低視力或色弱使用者使用，則在設計時應將對比度設為 7:1應該是

参考：瞭解成就標準 1.4.6 | WCAG 2.0 評論 (W3C)

第二點：注意文字大小。

雖然第(i)點中說明對比度至少需要 4.5:1，但實際上也有例外。在下列情況下，不需要滿足 4.5:1

對比度符合標準的例外情況

例外 1) 粗體大字。
適用於大字體或粗體文字 (超過 18 點或 14 點粗體的一般文字)、對比率為 3:1會符合標準，因為大字體的可視性很高，因此稍微降低對比度就會被認為問題較少。

例外 (ii) 用於裝飾的文字和標誌。
用於裝飾目的的附帶文字和企業標誌不在此對比度要求之列，因為這些都是用於設計和品牌識別目的，不被視為傳達資訊的方式。

例外 (iii) 影像中的文字。
但照片和影像中的文字除外、對於提供重要資訊的文字，即使在影像中也要有適當的對比度。建議使用。

第 3 點）還必須考慮到具有色覺特性的使用者。

到目前為止，我們只專注於對比度，但在考慮色彩可接近性時，光是對比度其實是不夠的，因為正如我們所見，對比度並不是考慮色彩可接近性時唯一可以考慮的因素、考慮到使用者的色覺特性這是因為它還必須考慮到

例如，以下是網站電子郵件表單等中常見的一連串按鈕。對於這兩個按鈕，背景顏色與文字顏色的對比是符合 AA 標準的配色方案。

對比率 AA 相容按鈕

我們很容易就會想：「對比度符合標準，所以無障礙就有保障了。D 型色覺（2 型重色視）過濾器，您會看到以下內容。

D 型色覺中的按鈕視覺

因此、這兩個按鈕的顏色相似，乍看之下難以分辨這意味著在創建色彩方案時，不僅需要考慮對比度，還需要考慮色覺特性。

此外，在對具有色覺特性的使用者的考量方面、確保資訊的傳達不只是基於顏色的差異這也是需要考慮的重要一點。

使用 UniWeb，使用者可以變更對比度。

如果您沒有資源在自己的網站上進行對比檢查，我們的UniWeb 無障礙工具。UniWeb 建議您只需在網站原始碼中加入一行程式碼，即可引進一系列無障礙功能。即日實施它是一個外掛工具，可以

UniWeb 的主要功能是什麼？在使用者端瀏覽網站時，可以使用各種輔助功能。有一點：在將要實現的無障礙功能中，包括調整對比度的功能，讓使用者只需簡單點擊即可在「反色」、「深色對比」和「淺色對比」之間切換，以增加可讀性。

◆ UniWeb 對比變更功能。

此外，管理畫面會顯示有關網站無障礙存取符合性的診斷報告。報告中會顯示每個項目的符合性等級 (A、AA、AAA)，以及針對需要採取矯正措施的領域對代碼所做的具體修改、無需使用各種驗證工具等大費周章地尋找修正點，即可實現高效率的操作。。

◆ UniWeb 管理畫面。

本文右下角。按一下「藍色圓形人類圖示」。您還可以切換對比度和其他多種無障礙功能，何不親身體驗一下 UniWeb 的操作呢？

摘要

在具有大量從視覺中獲得資訊的網站中、確保所有使用者的可視性和可讀性因此，您必須瞭解低視能、年長者和色盲等使用者的必要考量，並在您的網站上實施適當的無障礙設計。

對比檢查器是實現無障礙設計非常有用的工具，雖然許多工具都包含在付費的網頁無障礙檢查工具中、單是對比檢查器，免費工具就已經足夠。因此，請儘快從檢查您自己的網站開始。

不過，這篇文章的重點在於無障礙網頁中的對比率驗證、如果您想瞭解更多關於無障礙網頁的資訊，請參閱本網站之前的文章，以及 Digital Agency 提供的「無障礙網頁實施指南」。。

参考：過去的文章，「網站管理者必須執行哪些網頁無障礙措施？」、無障礙網頁實施指南 (Digital Agency)。

此外，我們的 UniWeb 還提供也可免費診斷您公司的網站。如果您是一家企業，正在考慮為您的網站提供無障礙網頁支援，因為您正在實施無障礙網頁、以下連結請隨時從以下網址申請

免費無障礙評估 (UniWeb)。

對比檢查器