色彩學:高可讀性配色對比度檢查,杜絕門牌顏色之亂


前陣子新北市的門牌之亂相信大家仍記憶猶新,因為政治思考而自我受限的配色引來民眾一陣撻伐,那還不如恢復早年使用的正藍白配色呢。不過我得說,前十幾年使用的綠白色並沒有比較好,陽光下的綠色字體搭配白色背景其實一樣很難辨識。

這些都是後話了,反正新北市政府已經從善如流暫停新門牌的更換,就看之後是否能記取教訓讓我們耳目一新。其實新北市政府大可趁這次機會,將總共 29 個轄區都以不同顏色表示,除了話題有趣外,也能加強區域民眾的情感(如果嫌配色難,還可以搞組合式門牌讓大家自己挑,畢竟就算不是每張門牌都顯示地區跟路名也影響不大)。

Taiwan house number sign color contrast Testing
哪種配色的門牌最顯眼?

既然配色對比很重要,而現在又是螢幕世代,那是否有什麼辦法方便我們找出最顯眼的適當配色呢?

答案是有的,除了對比度最高的單調黑白配以外,由美國麻省理工學院(Massachusetts Institute of Technology,MIT)發起的國際組織「全球資訊網協會(World Wide Web Consortium,簡稱W3C) 」為了倡導無障礙網頁設計,針對網頁內容親和力(又稱網路無障礙,Web accessibility)發布了一份「網頁內容無障礙設計指引(Web Content Accessibility Guidelines,簡稱 WCAG)」,當中已經規範色彩配色可讀性的架構。

不過要讀懂那些規範是網頁設計高手們去做的事,我們只要有概念就好。現在網路工具發展非常發達,例如今天要跟大家介紹「WebAIM」提供的「Contrast Checker(對比檢查器)」。使用者只要在網站上填入背景色彩(Background Color)以及文字色彩(Foreground Color),系統就能快速計算出「Contrast Ratio(對比度分數)」,分數越高就代表越容易閱讀!

官方網站:「WebAIM: Contrast Checker」。

請參考下圖,我們以白色字體跟黑色背景進行測試,獲得21分的高分(反過來測試也是一樣)。21分同時也代表這套系統最高的評定分數,之後我們在做喜愛色彩的搭配組合測試時,就可以用這個分數當作最高標準。

網站還會針對「普通大小字體(Normal Text)」、「大字體(Large Text)」以及「圖像式使用者介面(Graphical Objects and User Interface Components)」進行分析,訂定出「失敗(Fail)」、「AA」到「AAA」級不等的評定。

只要能拿到全部 AAA 級的分數(對比度 7 分以上)就代表你的配色基本上具有相當高的網頁親和力。

Color Contrast Checker Black and White

接著我們用鷹眼觀察網站的 Logo 顏色來做測試,背景為深藍色的「005080」,文字色彩用鷹眼的鵝黃色「ffd51c」,得到對比度分數為 6.01 分(遠目)。雖然離黑白配的21分相差快要四倍,不過其實還算是對比度不錯的分數,從下圖可以看到可讀性評比達到四個 WCAG AAA 級。

Vedfolnir Logo Color Contrast Checker

嘛,悄悄聲說,Logo 的對比度在普通字體的 WCAG AAA 級竟然被判定為失敗 FAIL(淚)!後來稍微調整,發現只要把藍色背景加深到「004570」,就能獲得全部 WCAG AAA 級的 7.09 高分。回頭立馬改!

分享這篇文章:

留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *