可訪問性 顏色對比度
為什麼
網頁上的文字和圖形元件需要良好的對比度，以確保使用者能夠感知到。我們有些人視力下降。其他人則會遇到對比度很重要的情況，例如在明亮的陽光下。
什麼
我們測量文字或圖形與背景顏色之間的對比度。這稱為對比度比。白色背景上的白色文字的對比度比為 1。這無法感知。黑色背景上的黑色文字的對比度比為 21。
沒有完美的比例。它並不總是儘可能高，儘管高對比度通常比低對比度更易讀。 根據蘋果的說法，我們應力爭最低 4.5，但 7 為最佳。
如何操作
測量顏色對比度的一種方法是使用像 Contrast Ratio 這樣的工具。它可以接受多種顏色輸入，例如 RGB、HSL 和十六進位制。它甚至支援透明度，例如 RGBA。
來自 Foodora 的示例
Foodora 將皇家紅用作其主要輪廓顏色。該顏色的十六進位制程式碼為 #D60265。在白色背景上，顏色對比度為 5.17。這對於裝飾、圖示、徽標和按鈕來說效果很好。如果 Foodora 將此顏色用於大塊文字，則可讀性會很差。
圖片上的文字
要測量背景圖片上文字的對比度，我們需要找到圖片中最亮或最暗的部分。如果文字很亮，則查詢最亮的部分，反之亦然。
在 Wolt 的這個例子中，我們在明亮的背景圖片上有白色文字。使用顏色拾取器選擇淺綠色部分可獲得十六進位制值 #a1ad95。這僅提供了 2.35 的對比度比。這不夠。一種可能的改進方法是在圖片上有文字的部分新增顏色疊加。疊加可以是純色的，也可以具有一定的不透明度。
不同狀態
任何互動式元件都有不同的狀態——懸停、聚焦、活動、未訪問、已訪問和停用。請記住確保這些狀態也具有良好的對比度。處理狀態時，我們必須考慮兩種情況：
- 所有狀態都需要良好的顏色對比度。
- 從非聚焦狀態到聚焦狀態的對比度變化至少為 3。
在 Cos 服裝的這個例子中，導航的顏色對比度為 9.73。
然而，懸停在Women上時，我們得到的懸停對比度為 2.84。
