PageSpeed Insights網頁速度評估有一項是無障礙功能，本文以實際網頁為例介紹其中關於色彩對比度的衡量指標，包括基本概念及如何使用工具修正調整網站主題配色。
一、PageSpeed Insights
使用google的PageSpeed Insights網頁速度評估工具，「診斷效能問題」中有一項是「無障礙功能」，贊贊小屋網頁的評估分數是「87」分，應該算是不錯了，但也許會想要知道到底這裡它評估的主要重點，可以直接點選「無障礙功能」圓形文字框。
關於PageSpeed Inights網站使用，可以參考贊贊小屋相關文章。
二、無障礙功能報告
在上個步驟點選之後來到相關說明的部份，可以看到主要是「背景和前景顏色沒有足夠的對比度」，可能造成難以閱讀或者無法閱讀。依照報告所提供的網頁截圖，原來是綠底白字兩種顏色的對比程度較低的緣故。說明段落後面有一個顯然是超連結的說明文件：「瞭解如何提供充足的色彩對比」。
三、線上輔助工具
點選上個步驟的超連結文字會前往一個網站頁面，看起來並不是Google本身所屬的網站，不過應該是Google所推薦的，它的頁面標題非常清楚，網頁元素必須達到最起碼的顏色對比門檻。
四、色彩對比分析器
經過先前步驟已經瞭解了色彩對比度的概念及實務作用，由於不同網站都會有自己偏好或者是習慣的主題色彩，因此也會很希望能夠知道目前配色是否適當，這個頁面便提供了輔助工具：Color Contrast Analyzer（色彩對比分析器）。
五、自訂色彩測試
首先當然是回歸到文章一開始的問題，在分析器裡面輸入贊贊小屋網站綠底白字相對應的色值，對比度只有「2.73：1」，不管是大字小字或者AA、AAA標準都沒有通過，直接是很清楚紅底白字的「FAIL」。
六、前景色彩選擇
沒有通過的唯一解決方法是更改顏色，分析器便有這方面的幫助工具，把背景顏色下拉便有許多既定色彩可供選擇。
七、色彩對比度合格
贊贊小屋測試過許多不同的顏色之後，適當方式是維持原有的綠色背景，前端字體顏色改成非常接近黑色的顏色，如此才得以過關。
八、色彩亮度調整
除了顏色名稱下拉選擇之外，針對同一個色彩還可以用拉桿方式調整亮度，例如同樣是黑色，其實只要適當調整亮度還是有不同感受，而且在每個色彩只要將亮度調到非常低都會趨近於黑色，在達到對比度標準門檻的同時又有點不太一樣的色彩呈現。
專業網頁設計的色彩工具
這篇文章是針對PageSpeed Insights網頁評估結果裡面，無障礙功能中關於色彩對比程度的實際經驗。以文章範例贊贊小屋的網站而言，其實通常在一般察看時就可以辨識出是否容易閱讀，不至於會有太大的對比性問題。然而如果是以比較專業的網站設計者角度，當然會比較希望自己的作品有一定的客觀衡量標準，在這種情況下，本文介紹的網站是一個不錯值得推薦的工具，提供給有相同需求的讀者。zanzan.tw © 2023
每天學習，每天充電：SEO文章合集。