如何利用Chrome DevTools提升網站用戶體驗？

南京浪知潮網絡科技有限公司官方帳號，優質創作者

提高網站用戶體驗的最重要方面之一是確保您的文本可讀。創建可讀的文本意味著確保您的網站建設中的文本顏色和背景顏色之間具有足夠的顏色對比。

例如，查看示例中白色背景上的紫色文本。這種對比水平都很好：

但是，如果我們使文本變淺，則可以很快達到對比度太低且難以閱讀的程度：

現在，調整後的相同文字的對比度不好

這可能是一個相對簡單的概念，但是在實踐中確保足夠的對比實際上有些棘手。有時顏色對比看起來不錯，但實際上可能無法達到標准。那麼，如何確定我們的顏色對比度級別對可訪問性友好呢？這就是Chrome DevTools可以提供幫助的地方。

Chrome DevTools如何提供幫助

您會在上面的屏幕截圖中注意到我們看到了Chrome DevTools顏色選擇器。如果仔細觀察，還可以看到該顏色選擇器中還有一些其他信息，例如顯示對比度得分，這些信息有助於提供有關顏色選擇的反饋。這是最近在Chrome中添加的輔助功能工具的一部分-讓我們來看看它如何工作。

注意
：您可能會在網上看到一些說明，說您需要啟用“開發人員實驗”才能使用這些顏色對比檢查功能，但現在不再如此。現在，該功能已內置到Chrome和Chromium中。

訪問對比度檢查器工具

首先打開Chrome / Chromium DevTools，然後在HTML中選擇任何文本元素。然後，在“ 樣式”
選項卡中，找到color屬性，並在其右側單擊小色樣以打開選擇器工具。

在下面用紅色正方形突出顯示的區域中，您會看到該文本元素的對比度得分為5.00。該分數來自檢測背景元素的顏色並將其與文本的顏色進行比較。

您還會注意到分數旁邊有兩個綠色的勾，表示此對比度在可訪問性可接受的參數之內。

該基本比率得分很有用，但是要訪問所有顏色對比工具，請單擊對比度得分右側的向下箭頭。當您將鼠標懸停在其上時，它將顯示一個工具提示，顯示為顯示更多。

通過擴展本節，我們可以獲得一些其他信息。在這裏，您會看到理想的對比評分，您應該嘗試達到的理想評分，更高的數字代表更強的對比。3.0到4.5之間的分數表示為“ AA”，被認為是最低；而4.5或更高的分數表示為“ AAA”，是理想的。

不要越界

您還將注意到，一旦展開全色對比工具，顏色選擇器的頂部就會出現一條線。這是至少達到“ AA”等級的文字顏色與不符合標准的文字顏色之間的分界線。

注意
：您可以非常接近該線，並從“ AAA”評級轉換為“ AA”，保持在3.0以上但低於4.5：

但是，該行上方的所有內容都會帶有紅色警告符號標記，以告訴您顏色組合帶來了可訪問性問題：

Alpha值調整

您還可以移動位於色相滑塊下方的Alpha滑塊，並且“安全”行將偏移以說明增加的透明度：

哪一邊？

要注意的另一件事是，您希望文本顏色落在行的一側可以根據背景顏色而反轉。如果您的文字是深色背景，則您希望文字的顏色顯示在線條上方。如果您的文字是淺色背景，則其顏色應低於該線。

在下面，我們看到了這種反演的示例，左圖為深色背景，右圖為淺背景。注意，還同時預覽了文本和背景顏色– 在“ 顯示更多”開關下方的圓圈中查找Aa：

總結

Chrome和Chromium中的這些顏色對比檢查工具將大大簡化在設計過程中確保可讀性的過程。我們需要做的就是快速檢查每種文本顏色，在必要時使用顏色選擇器進行調整，然後將新顏色重新集成到我們的代碼中。