如何利用Chrome DevTools提升網(wǎng)站用戶體驗？

時間：2024-04-16 17:30:01 | 來源：建站知識

時間：2024-04-16 17:30:01 來源：建站知識

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

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



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



現(xiàn)在，調(diào)整后的相同文字的對比度不好

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

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

注意：您可能會在網(wǎng)上看到一些說明，說您需要啟用“開發(fā)人員實驗”才能使用這些顏色對比檢查功能，但現(xiàn)在不再如此?，F(xiàn)在，該功能已內(nèi)置到Chrome和Chromium中。

訪問對比度檢查器工具 首先打開Chrome / Chromium DevTools，然后在HTML中選擇任何文本元素。然后，在“ 樣式”選項卡中，找到color屬性，并在其右側(cè)單擊小色樣以打開選擇器工具。



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

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



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



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



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

注意：您可以非常接近該線，并從“ AAA”評級轉(zhuǎn)換為“ AA”，保持在3.0以上但低于4.5：



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



Alpha值調(diào)整 您還可以移動位于色相滑塊下方的Alpha滑塊，并且“安全”行將偏移以說明增加的透明度：



哪一邊？ 要注意的另一件事是，您希望文本顏色落在行的一側(cè)可以根據(jù)背景顏色而反轉(zhuǎn)。如果您的文字是深色背景，則您希望文字的顏色顯示在線條上方。如果您的文字是淺色背景，則其顏色應低于該線。

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



總結(jié) Chrome和Chromium中的這些顏色對比檢查工具將大大簡化在設計過程中確?？勺x性的過程。我們需要做的就是快速檢查每種文本顏色，在必要時使用顏色選擇器進行調(diào)整，然后將新顏色重新集成到我們的代碼中。