選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

可訪問性 顏色對比度


為什麼

網頁上的文字和圖形元件需要良好的對比度,以確保使用者能夠感知到。我們有些人視力下降。其他人則會遇到對比度很重要的情況,例如在明亮的陽光下。


什麼

我們測量文字或圖形與背景顏色之間的對比度。這稱為對比度比。白色背景上的白色文字的對比度比為 1。這無法感知。黑色背景上的黑色文字的對比度比為 21。

沒有完美的比例。它並不總是儘可能高,儘管高對比度通常比低對比度更易讀。 根據蘋果的說法,我們應力爭最低 4.5,但 7 為最佳。 


如何操作

測量顏色對比度的一種方法是使用像 Contrast Ratio 這樣的工具。它可以接受多種顏色輸入,例如 RGB、HSL 和十六進位制。它甚至支援透明度,例如 RGBA。 

Screenshot from Contrast Ratio showing pink color on white background with a contrast ratio of 5.17.

來自 Foodora 的示例

Screenshot from Foodora front page showing their use of intense pink as a color with good contrast.

Foodora 將皇家紅用作其主要輪廓顏色。該顏色的十六進位制程式碼為 #D60265。在白色背景上,顏色對比度為 5.17。這對於裝飾、圖示、徽標和按鈕來說效果很好。如果 Foodora 將此顏色用於大塊文字,則可讀性會很差。


圖片上的文字

要測量背景圖片上文字的對比度,我們需要找到圖片中最亮或最暗的部分。如果文字很亮,則查詢最亮的部分,反之亦然。

在 Wolt 的這個例子中,我們在明亮的背景圖片上有白色文字。使用顏色拾取器選擇淺綠色部分可獲得十六進位制值 #a1ad95。這僅提供了 2.35 的對比度比。這不夠。一種可能的改進方法是在圖片上有文字的部分新增顏色疊加。疊加可以是純色的,也可以具有一定的不透明度。

Screenshot from Wolt, showing white text on a light green background.

不同狀態

任何互動式元件都有不同的狀態——懸停、聚焦、活動、未訪問、已訪問和停用。請記住確保這些狀態也具有良好的對比度。處理狀態時,我們必須考慮兩種情況:

  • 所有狀態都需要良好的顏色對比度。
  • 從非聚焦狀態到聚焦狀態的對比度變化至少為 3。
Screenshot of the navigation from the Cos website, showing text with high contrast.

在 Cos 服裝的這個例子中,導航的顏色對比度為 9.73。

Screenshot from the main navigation of the Coz web site, showing the hover state with low contrast.

然而,懸停在Women上時,我們得到的懸停對比度為 2.84。



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援