這陣子下班之餘，我將經常使用的網站進行色彩擷取，並紀錄網站中主要的顏色佈局以及字體色彩，其中我也漸漸的發現這些網站的一些小規律，而我也將在本篇文章進行說明。
- 網站頁面色彩：
網頁顏色分佈大多是以一個主要色調(Primary Color)，並配上一至兩個的背景色調。主要色調大多根據該公司的Logo為配色，而另外的背景色調則是作為資訊的背景，讓使用者能夠以清晰的角度閱覽網頁內容。可以從知名訂房網站 — Booking.com 看出。
有卡片式(CardView)內容的網頁習慣將卡片作為白色，再將背景色調設置為稍微暗色系的灰階色調，以凸顯一張張的卡片資訊。例如：知名線上問答網站 — Quora。
如果網頁內容的基本背景以白色或其他灰階顏色作為背景色，這些網頁會用一至兩個明亮顏色作為按鈕或重要內容的色彩，作為用戶使用上的操作指引。這些顏色大多該公司形象Logo的相似色彩，或者是形象Logo的互補色，加以凸顯使用者需在網頁上進行的重要決定。比如說，知名旅遊網站-Klook便是以該品牌Logo的相關色系作為按鈕及重要訊息的色調。
- 字體顏色
字體顏色讓我感到意外的在於網頁文字的顏色並非以純黑色作為基底，而是以深灰色為主要色調。
Pure black text and backgrounds with white can cause discomfort for the eye when users read the text over an extended period of time, leading to eye strain.
Research found that text and background combinations with too high of a contrast can lead to eye strain. However, too low of a contrast can also cause eye strain.- link
我到網路上查了這個問題發現長時間閱讀純黑色文字在白色背景容易造成人體眼睛的負擔。研究也說明過高對比度的配色和過低對比度的配色會造成眼睛疲勞。除此之外，純黑色 (#000) 本來就並非自然色，因為在日常生活中我們所見到的黑色大多仍有少數的光反射，因此這些網站並非使用純黑的字體顏色。
我也發現仍有少數網站並非使用灰階色彩作為字體顏色，舉例來說知名機票價格搜尋網站 — Skyscanner 就是以偏紫色作為標題文字，並在內容上以淡紫色作為內容文字，雖然我們看到的是以白色、深灰和淺灰所構成的字體配色，擷取色碼後，我們得知字體色彩並非是深灰和淺灰，而是淺紫和深紫。
對於字體顏色的配色，其實也是一門學問，大家可以參考WCAG2.0的指引進行網頁文字與背景的對比度調整。
Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.
網頁內容無障礙指南涉及許多網頁內容的建議，使其能夠更簡便的讓人理解。追循這一類可以幫助視覺、聽覺及其他殘疾人士在瀏覽網頁能夠更加簡便友善，也能夠讓網頁內容對於普遍使用者更方便地瀏覽網站
這項協議把網頁內容的編排設定了一定的規範，並且劃分為由低至高的三個等級 — A、AA和AAA，越高的等級對網頁設計要求更加嚴格精確，所以針對對比度的要求在於AA和AAA級，分別如下：
- AA — 文字和背景的對比需要為4.5:1
- AAA — 文字和背景的對比需要為7:1
當然在這項標準下，針對裝飾性的文字、Logo文字和較大型的文字是例外的，可以不必遵守上述的規範。如果想要知道更仔細的原因，可以參考裡面的文章細節。
我們也可以利用 Colorable 查看文字和背景對比的程度是否足夠。
從下面的例子，網頁上經常使用的深灰字體(#333333)和白色的背景便是擁有12.63的對比，即是一個AAA級的標準。
大家也可以到自己經常拜訪的網站把他們的色碼擷取下來，看看網頁在對比度的部分達到什麼樣的等級。
總結
仔細觀察後，才發現原來現有網站上就可以看出網站的一些設計原則。這些理論一定在現有資源中可以透過書籍或者網路資源進行更深入的研究，但如果我們能從生活週遭的範例進行觀察，或許我們能更深體會這些設計原則。
之後可以再試試解析這些網站的排版有什麼可循的規則，或者是不同類型的網站在設計上會有什麼特別的編排。
參考連結：
