Contrasting Color

簡介

輸出與輸入顏色對比的顏色。

UI 設計中的一項常見任務是為文字或圖示選擇與背景色足夠對比的顏色，以確保清晰可讀。Contrasting Color Utility 可用於自動化此過程，並確保符合最新的 WCAG 無障礙標準。

UI

Mode - 設定對比度比率以測試 Input Color 與 Primary Color：

• Most Contrasting - 輸出與 Input Color 對比最強的顏色（Primary 或 Secondary）。
• Least Contrasting - 輸出與 Input Color 對比最弱的顏色（Primary 或 Secondary）。
• 3:1 - 最低限度級別。也稱為 A 級別（基本合規）。
• 4.5:1 - 對大多數使用者可用且可存取。也稱為 AA 級別（可接受的合規）。
• 7:1 - 黃金標準級別的無障礙性。也稱為 AAA 級別（最佳合規）。
• Custom - 設定自訂 Custom Ratio。

Custom Ratio - 設定自訂比率 [value]:1。

Input Color - 設定要與 Primary Color 進行測試的顏色。通常是文字或圖示的顏色。

Primary Color - 設定要與 Input Color 進行測試的顏色。如果對比度比率測試通過，則輸出此顏色。

Secondary Color - 設定當 Primary Color 未通過對比度比率測試時輸出的替代顏色。

1. 建立一個 Rectangle。
2. 建立一個 Ellipse：
   • 設定 Radius 為 70。
   • 停用 Fill。
   • 啟用 Stroke。
3. 將 Rectangle 和 Ellipse Group 組合。
4. 選取 Group，點擊 Shelf 中的 Duplicator 圖示。
5. 設定 Duplicator 的 Grid Size（Width 和 Height）為 500。
6. 建立一個 Color Array。
7. 使用 Add 按鈕，加入 3 個更多索引，並為每個設定不同的顏色。確保顏色混合淺色和深色。
8. 連接 colorArray.id→rectangle.fill.color。
9. 建立一個 Contrasting Color Utility。
10. 連接 colorArray.id→contrastingColor.inputColor。
11. 連接 contrastingColor.id→ellipse.stroke.color。

位於淺色矩形上的橢圓的 Stroke 顏色應設為 Primary Color，反之亦然。

最佳實踐是選擇彼此對比的 Primary 和 Secondary 顏色，以確保當一個未通過時，另一個更有可能具有足夠的對比度來保持清晰可讀。