圖卡設計留意「色彩對比」，提升文字可讀性
- 邊境牧羊犬
- 6月25日
- 讀畢需時 4 分鐘
已更新：3天前
「圖卡設計明明很有質感，為什麼客戶反應看不清楚？」 「想要做出繽紛感，文字卻被背景吃掉？」
在設計圖卡的路上，你也曾經遇過這樣的困擾嗎？
想要讓圖卡變得更好閱讀，除了注重字型挑選、字體大小、排版間距等等，還有另外一項很重要但時常被忽略的關鍵，那就是「顏色的對比」。
為什麼有時候，文字會看不清楚？
你在生活中有遇過類似的情況嗎？感覺文字跟背景之間好像有一點灰灰的，看起來有點模糊的感覺，導致在閱讀文字時感到很吃力。這就是「對比不足」所導致的。
那麼，要怎麼樣才能選對顏色？想要活用色彩，首先就必須先了解色彩的組成！
簡單認識色彩三要素 - 色相、明度、彩度
如果色彩是一顆球體，那麼就像下方這張圖所示，球體的縱向代表明度，橫向剖面裡，環狀代表的是色相，而從球體表面至軸心的部分則表示彩度，越往軸心彩度越低。
色相：顏色的種類，如紅、黃、綠、藍等。
明度：顏色明亮的程度，明度越高，越亮越淡，明度越低，則越暗越深。
彩度：色彩的強弱，鮮濁程度。
至於要如何運用色相環，來快速找出合適的配色呢？透過 5 個配色技巧，就能先從上千萬種顏色中，找出比較合適的配色組合，再來進行更細緻的調整。
當兩個顏色的色相或明度過度相近，如淺黃色底搭配淺綠色文字，或是深灰底搭配深藍色文字，就會導致文字看不清楚。因此在選色時，不妨參考線上配色網站，以對比色的概念來選色，並可以藉由顏色對比檢查工具，檢視對比度是否不足。
（延伸閱讀：不懂設計也能用！3 個配色網站推薦）
為什麼要留意配色可讀性？
在設計上，若忽略配色可讀性，會造成什麼結果？可不只有「字看不清楚」這麼簡單！
一場活動宣傳圖看不清楚，可能導致報名人數下滑，一張網頁商品圖看不清楚，可能造成銷售額下降。可讀性差會讓使用者放棄閱讀，也可能導致誤解訊息，重視配色可讀性，才能讓資訊更好的傳遞給受眾。
此外，若是你的受眾包含高齡者、色盲、色弱者，那你就更要留意設計配色。老年人由於視覺老化，太淡的顏色容易辨識不清，較適合使用明亮或鮮豔的色彩。色盲可能有無法分辨紅色、綠色或黃綠色的狀況，色弱則有辨色異常現象，在設計配色上則要更加用心，可搭配使用色盲友好工具進行選色。
實際案例分享
稍微有點理解色彩關係之後，一起來看圖！
因為夏天的關係，好想吃冰，於是選了冰淇淋來作為範例圖的主題，哈哈哈！
在使用相似色進行設計時，配色上因為屬於同色系，視覺效果會比較協調，然而必須注意使用顏色的對比，以上圖兩張海報為例，雖然文字使用相似色（橘色、黃色），但因為左圖橘色跟底色過於相近，會讓文字的邊界不明顯，而右圖將文字與背景的對比拉大，可讀性就提高一些。
使用互補色來做設計，可以做出比較活潑繽紛的效果，然而用色上一樣要留意對比，像是上圖中同樣使用綠色文字，左圖的綠色明度與彩度較低，剛好跟背景有點融合了，而右圖則是將明度與彩度提高，鮮艷一點的綠色跟背景色有較高對比，讓文字與背景的邊界變得更明顯。
萬一背景圖比較複雜，或是文字想要使用跟背景同色系，有什麼方法能加強對比？
從上圖實例來看，你可以使用「深色背景+淺色文字」，或「淺色背景+深色文字」，刻意創造顏色的對比程度；甚至，將你的文字添加白邊或加上底色框，都能突顯文字、提高對比。
結論
配色沒有標準答案，但是若想要讓你的觀眾看得清楚、看得喜歡，就要好好選擇使用的顏色。在選色的過程中，除了可以多加思考用色是否能讓文字更容易閱讀，也可以藉由線上的各類配色工具輔助選色。
除了嘗試做出好看的設計，也可以試著為特殊需求的族群稍微盡一份努力，創造出能讓更多人都能容易觀看的設計，打造更友善的世界。
學設計永無止境，歡迎一起來留言討論你推薦的配色輔助工具，或是如何學習無障礙配色，也可以聊聊你過去曾看過哪些有趣優秀的作品哦！
喜歡這篇文章嗎？你可以：
✅ 為文章按下愛心
✅ 訂閱茶水間，獲取最新文章通知
✅ 請邊境牧羊犬喝飲料，支持我持續創作好文章！
✅ 追蹤邊境牧羊犬 粉絲專頁 / Instagram / Threads，看更多生活小心思
.
Comments