在網頁設計中使用對比前景色和背景色

用適當的對比度提高網站的可讀性和用戶體驗

對比度在任何網站設計的成功中起著重要的作用。 從該網站的版式 ,到整個網站使用的圖像,以及前景元素和背景色彩之間的對比 - 設計良好的網站必須在所有這些區域具有足夠的對比度,以確保高質量的用戶體驗和長期的網站成功。

低對比度等於不良閱讀體驗

對比度太低的網站很難閱讀和使用,這會對任何網站的成功造成負面影響。 較差的色彩對比度問題通常很容易識別。 您通常可以通過查看在Web瀏覽器中呈現的頁面來完成此操作,並且可以查看由於顏色選擇不當而導致文本太難閱讀。 儘管可能很容易確定哪些顏色不能很好地協同工作,但確定哪些顏色與其他顏色相比能夠很好地工作確實非常具有挑戰性。 你可能不是什麼不管用,但你如何確定什麼工作? 本文中的圖像應該能夠幫助您展示各種不同的顏色以及它們如何作為前景和背景顏色進行對比。 您可以看到一些“良好”配對和一些“差”配對,這將幫助您在項目中選擇正確的顏色。

關於對比

你應該注意的一件事是,對比度不僅僅是一種顏色與背景相比的亮度。 正如你應該在前面提到的圖像中看到的那樣,這些顏色中的一些非常明亮,並且在背景顏色上充滿活力 - 例如黑色的藍色,但我仍然將其標記為對比度較差。 我這樣做是因為雖然它可能很亮,但顏色組合仍使文本難以閱讀。 如果您要在黑色背景上以藍色文本創建頁面,您的讀者會很快產生眼睛疲勞。 這就是為什麼對比不僅僅是黑色和白色(是的,這個雙關語是有意的)。 有對比的規則和最佳實踐,但作為設計師,您必須始終評估這些規則,以確保它們在您的特定實例中工作。

選擇顏色

對比度只是為您的網站設計選擇顏色時要考慮的因素之一,但它是一個重要因素。 在選擇顏色時,要注意公司的品牌標準,同時也願意提供調色板,雖然它們可能符合組織的品牌準則,但不能很好地在線工作。 例如,我總是發現黃色和鮮綠色在網站上有效使用非常具有挑戰性。 如果這些顏色符合公司的品牌標準,那麼它們可能只需要用作重音顏色,因為很難找到與任何顏色都對比的顏色。

同樣,如果您的品牌顏色是黑色和白色,這意味著巨大的對比度,但是如果您的網站上有很多文字,黑色背景和白色文字會使閱讀變得非常困難。 即使黑白對比也很好,黑色背景上的白色文字會導致長時間段的眼睛疲勞。 在這種情況下,我會反轉顏色以在白色背景上使用黑色文本。 這可能不是視覺上的興趣,但你不會找到比這更好的對比!

在線工具

除了您自己的設計意義外,還有一些在線工具可用於測試網站的顏色選擇。

CheckMyColors.com將測試您網站的所有顏色並報告頁面上元素之間的對比度。

此外,在考慮顏色選擇時,您還應該考慮網站可訪問性以及具有色盲形式的人。 WebAIM.org可以提供幫助,ContrastChecker.com也可以提供幫助,它將根據WCAG指南測試您的選擇。