顏色是品牌識別的核心組成部分。麥當勞紅色的拱門、紅白的肯德基老爺爺,這類耳聞熟悉的品牌,當我們提起它們的時候,腦海裡瞬間能浮現這些品牌形象,甚至瀏覽訂閱的常規郵件,依舊是熟悉的品牌色調,吸引收件者繼續往下閱讀全篇郵件。這說明顏色是電子郵件設計的重要組成部分,本篇文章將介紹如何使用對比色來提高郵件閱讀性。

色彩與郵件閱讀體驗

良好的閱讀體驗是傳達郵件內容的入場券。據統計,全球有 2.53億人有視力障礙,阻礙著他們無法正常瀏覽閱讀文字內容,可見,郵件排版要重點考量收件人的閱讀體驗感,而提升閱讀體驗,則需要正確運用色彩到郵件中,優化色彩設計。

顏色對比度

現在快節奏的時代生活,每位打工人的信箱幾乎都被塞的滿滿噹噹,甚至有研究表明,每個人平均每天收到高達 120 封郵件,若要讀完全部的來信,意味著停留在每封郵件的時間非常短暫,而通過控制顏色對比度,改善郵件色彩,提供良好閱讀體驗感的同時,也加快收件者閱讀速度。

何謂「顏色對比度」? 「顏色對比度」通常是指背景色和前景色對比,其數值範圍是1:1-21:1,不同的比值反應不同顏色運用效果。例如,下圖中,左邊顏色對比度運用效果不理想,白色字體在灰色背景上,不清晰,閱讀文字會非常吃力,相反右邊的對比度則效果非常好,白色字體在黑色背景上,閱讀起來毫無壓力。

顏色對比度運用規則

如何使用「顏色對比度」讓你的郵件發揮最佳效果呢?針對「顏色對比度」,一般可參照網頁無障礙性指導原則(Web Content Accessibility Guidelines,WCAG) ,分成 3 個等級 Level A,Level AA 和 Level AAA,級別越高,顏色對比度比值要求越高。以下是文字的對比度運用標準:

PS:文字運用標準,有以下幾種情況特殊情況:

  • 大號字體,標、副標題,對比度可以低於3:1。
  • 表示標誌、品牌的文字沒有對比度要求。

郵件顏色對比度

在郵件當中,顏色對比度所指的前景色一般是指文字、圖形、圖表或圖標顏色。設計郵件時,重點考慮:

  • CTA 文字和底色搭配
  • 圖片中的文字和圖片底色
  • 連結的文字顏色

或許你想要在郵件中推薦產品,添加文字到連結,引導收件者點擊,並前往網站購買。添加連結的文字,僅添加顏色以突出顯示連結,有視覺障礙的收件者可能無法辨識添加連結的位置,例如下圖,添加連結的文字標示為藍色,在他們的視角下,這些文字也是顯示為黑色,因此,可透過其他方式,增加連結的識別度,促進點擊轉換:

  • 下劃橫線
  • 加粗文字
  • 斜體文字
  • 指示符號
  • 文字按鈕

顏色對比度檢測工具

正式發送郵件之前可以預先檢測郵件顏色運用,一封郵件內容可能會應用到多種顏色,排版完成之後,不要忘記查看顏色對比度喔。如果無法確定顏色對比度是否是最佳的,可以藉助工具,適時調整顏色使用。在此,我們推薦以下 WebAIM 這款工具,線上網頁版即可使用,用戶可以調整前景色,也可以調整背景色,邊調整邊觀看預覽的效果,也同步知道是否通過 WCAG 三大等級標準。

色彩心理學

色彩可以傳達人們的心情,也可以影響人們消費心理,吸引不同購物族群,比如男性群體更喜歡鮮豔的色彩,而女性群體更喜歡柔軟的色彩。因此,商家透過運用色彩心理學,研究每一款顏色背後都有不同的涵義,結合自家商品定制行銷策略,讓商品更加有吸引力,例如:

●紅橙、黑色 、寶藍色

能吸引購物者產生衝動消費想法,通常為快餐店、廉價商品銷售中心、特價商品購物中心以及清倉甩賣的場所使用。

●海軍藍、青色

容易吸引預算有限的消費者,應用場所通常為大型百貨公司、銀行等。

●粉色、天空藍

此類顏色容易吸引傳統的買家,通常使用的地方是服裝店等。

眾所周知,黑色、紅色和白色是三大主要、常用的行銷顏色,再搭配其他顏色混合使用。郵件互動以及轉換很大程度上取決於您的郵件設計,其中就包含郵件色彩。在郵件中推廣產品,產品圖片顏色也是影響收件人購買的主要因素之一。因此,郵件行銷色彩一定要符合自身品牌形象,或者在發送前,透過 AB 測試功能,讓它告訴你受用戶歡迎的郵件色彩。

是策略,也是關懷

郵件色彩心理學實際上是一種郵件策略,也承載著企業的品牌形象任務,設計符合 WCAG 標準的電子郵件設計可能需要花費一定的時間,但是經過深思熟慮的設計有增加轉換是值得,包含了改善用戶電子郵件體驗目的,這不僅是一種郵件關懷,更是對郵件策略的昇華。