不對——RGB 互補色並不保證具備無障礙的對比度。

互補色尋找器只會計算一種狹義定義的結果:將每個 8 位元 sRGB 色道替換為 255 減去該色道的值。這會使輸出成為輸入顏色的精確位元組數位反相。它不會計算對比比例、判定 WCAG 結果,也不會證明前景與背景可清楚閱讀。無障礙性仍須針對你實際用於介面的兩種顏色另行測試。

這項區別很重要,因為「互補色」描述的是顏色之間的關係,而「無障礙對比」描述的是兩種顏色一起使用的特定情境。某個結果即使在數學上完全精確,仍可能不適合用於正文、標籤、置於細節繁複背景上的圖示或其他介面元素。

does a complement guarantee accessible contrast when i use complementary color finder
RGB 互補色能保證無障礙的對比度嗎?

此尋找器實際計算的內容

輸入要求十分精確:請提供 6 個十六進位數字,並可選擇在開頭加上 #。#fff 等縮寫形式及具名顏色會被拒絕,而整數紅、綠、藍色道的有效範圍為 0 至 255。選擇「尋找 RGB 互補色」後,會產生來源色票、反相色票、標準化的小寫十六進位值,以及十進位 RGB 色道值。

此運算具決定性,且適用範圍狹隘。它不會搜尋更和諧的顏色、針對可讀性最佳化配對,也不會選擇看起來最適合的相反顏色。它只會反轉每個位元組值,並以一致的格式序列化結果。

以一個範例說明,來源 #ff0000 包含紅色 255、綠色 0、藍色 0。套用規則後,紅色為 255 − 255 = 0,綠色為 255 − 0 = 255,藍色為 255 − 0 = 255。序列化後的反相結果為 #00ffff。

解析、反相與顯示完全在瀏覽器中進行。不會上傳或儲存任何顏色值,此工具也不會進行任何描述檔轉換。這使結果可用於數位作業的重現,但不會將 sRGB 位元組反相轉化為通用的顏色關係。

CSS Color 4 sRGB 參考資料與MDN 的 CSS rgb() 參考資料在理解或實作所傳回的色道值時很有幫助。它們說明數位 RGB 標示法,但不會為尋找器加上對比度計算。

尋找 RGB 反相色,再驗證最終配對

  1. 輸入來源顏色。貼上 6 位數的十六進位值,可有或沒有開頭的 #,或使用顏色輸入框選擇一種顏色。請勿改用 3 位數縮寫或具名顏色,因為尋找器會拒絕這些形式。
  2. 執行反相。選擇「尋找 RGB 互補色」。工具會將來源解析為整數紅、綠、藍色道,並將每個色道替換為 255 減去其值。
  3. 檢查並複製結果。比較來源色票與反相色票,檢查標準化的小寫十六進位值及十進位 RGB 色道,然後複製或使用顯示的結果。處理與顯示皆在瀏覽器本機進行,不會上傳或儲存顏色。
  4. 指定最終顏色角色。決定哪種顏色作為前景、哪種作為背景。如果來源顏色用於文字,而反相色作為其背景,請在第一次檢查時保留這些確切數值。如果設計後來變更其中任一顏色,請改為檢查變更後的配對。
  5. 一起檢查前景與背景。將確切的配對輸入色彩對比度檢查器,並依適用的 WCAG AA 與 AAA 規則進行檢視。屬於 RGB 反相色並不是通過或失敗的結果。
  6. 檢查實際介面並反覆修正。以預定的尺寸、角色及周圍元素檢視顏色,包括相關的懸停、聚焦、選取、錯誤或停用狀態。如果配對未達到設計適用的目標,請調整其中一種或兩種顏色,然後再次執行對比度檢查。

為何互補色與對比度檢查不同

尋找器回答的是生成問題:「這個值的位元組層級 RGB 反相色是什麼顏色?」對比度檢查回答的是使用問題:「這組確切的前景與背景顏色,是否為此介面提供足夠的對比度?」只有在產生的配對也按照其最終角色接受測試時,這兩個問題才會重疊。

無障礙對比是兩種顯示顏色之間的關係,而不是附加在單一互補色上的品質標籤。來源顏色及其數學反相色可能形成醒目的視覺關係,卻未必是可靠的文字配對。反相色可作為強調色、圖形或類別色使用,同時由另一個值處理重要文字。

最終情境也很重要。適合大型顯示文字的顏色,可能不適合小型介面文案;裝飾性圖形的用途,也與傳達資訊的標籤不同。請勿讓「互補色」一詞取代對你將實際發布的前景與背景進行直接評估。

  • 定義檢查:確認位元組層級的 RGB 反相色是否為專案所需的顏色關係。
  • 無障礙檢查:依適用的對比規則,測量最終的前景與背景配對。
  • 情境檢查:在介面中以預定的尺寸、角色及周圍元素檢視配對。

選擇符合任務的互補色定義

「互補色」可能指數種不同方法,而這些方法不一定會產生相同結果。請依所需輸出選擇定義,不要假設每種相反色方法都能互相取代。

互補色的意義 變更內容 最適合用途
數位 RGB 反相色 每個 8 位元色道都變成 255 減去其原始值。 可重現的螢幕顏色作業、CSS 實驗、圖示、反相色盤及資料視覺化。
HSL 色相互補色 色相旋轉 180 度,亮度與飽和度保持不變。 以色相為基礎且需保留 HSL 屬性的色盤探索。
傳統顏料互補色 採用減色顏料的關係,而非螢幕色道反相。 顏料混合及傳統色彩選擇決策。
CMYK 或印刷模式 依循墨水色道與印刷行為,而非 RGB 位元組。 特定輸出流程的印刷製作及色彩準備。
感知互補色 在感知色彩空間中尋找視覺上的對立。 依感知關係而非精確位元組反相所設計的色盤。

如果你需要 HSL 色相互補色,這個尋找器並非該方法。對於傳統顏料、印刷與 CMYK、廣色域或色彩管理素材,以及感知色盤設計,請使用適當的具名色彩空間及其測量流程。若要確保無障礙性,除了色彩生成,還須使用對比度測量。此工具不應在未告知的情況下,以一種定義悄悄取代另一種定義。

精確 RGB 反相色的實用情境

此結果很適合用於 CSS 實驗、快速反相色盤、圖示、資料視覺化,以及測試高層次的顏色組合。來源與反相色票可提供快速的視覺檢查,而標準化十六進位值及十進位色道則提供可在程式碼中重用的精確數值。

請將產生的配對作為具有明確定義角色的起點。例如,其中一種顏色可作為有限使用的強調色,另一種則保留於更廣泛的介面色盤中。反相色不會自動變得和諧、易讀、無障礙或適合特定品牌,因此仍須在情境中評估這些特性。

數位結果也不應被視為印刷規格,或廣色域與色彩管理製作流程的替代方案。它是未經描述檔轉換的 sRGB 位元組反相。如果輸出將用於印刷,請使用適合印刷的模式;如果要依感知上的對立關係評估色盤,請改用感知方法。

根據最終配對做出對比度決策

可靠的工作流程包含兩個獨立階段:先產生候選顏色,再驗證實際的顏色配對。第一階段可使用精確的 RGB 反相色;第二階段則必須使用對比度檢查器,並對介面進行視覺檢查。

  • 確認數位 RGB 反相色是否為預期的互補色定義。
  • 使用尋找器產生可重現的候選顏色,並保留其確切的十六進位或 RGB 數值。
  • 將這些數值套用於預定的前景與背景角色。
  • 使用對比度檢查器,依適用的 WCAG 規則檢查最終配對。
  • 檢查算繪後的介面,並在調整任何顏色後重複檢查。

如果配對未通過,請勿假設找到另一個「互補色」就能解決問題。尋找器不會針對對比度最佳化,因此你可能需要變更來源顏色、只將反相色作為裝飾性強調色,或從更廣泛的無障礙色盤中選擇前景與背景。

因此,直接答案很簡單:尋找器可以計算精確的數位互補色,但無障礙對比度必須另行證明。請將生成與無障礙性視為兩項各自明確的檢查,並且只在測試過使用者實際會看到的顏色後,才核准該配對。

相關閱讀:使用 JavaScript 將十六進位轉換為 RGB:嚴格 CSS 解析。