一場活動上，講者站上台，身後卻是一整面貼滿海報、五顏六色的背景牆。坐在後排的觀眾別說聽懂內容，連講者的表情都快看不清楚。主辦單位這時候只剩兩條路可走：換一面乾淨的背景板，或是打一盞聚光燈，把講者從雜亂背景裡整個「挑」出來。網站首頁的 hero banner 也是同一個處境，一行標語疊在一張照片上，讀者的眼睛能不能順利抓到那行字，決定的是 hero banner 可讀性，不是照片好不好看。
多數團隊在挑首頁照片時，注意力全放在畫面夠不夠大器、標語夠不夠打動人，卻很少有人真的停下來問一句：這行字疊在這張照片上，讀者真的看得清楚嗎？結果常是照片本身很美，字卻淹沒在雲朵、人臉或建築的陰影裡，訪客要瞇著眼睛才勉強認得出標語在寫什麼。可讀性不是美感問題，是對比問題。對比可以被具體處理、被數字驗證，不是碰運氣。
先從文字為什麼會被背景吃掉講起，再一招一招拆解怎麼把字「救」回來。
Banner 文字疊在照片上，為什麼常常看不清楚？
字看不清楚，很少是設計師沒眼光，而是文字色與背景色的色相、明度太接近，人眼天生分不出兩者的邊界。這是最常見的三種失敗情境：淺色文字疊在淺色調照片上、深色文字疊在深色調照片上，或者文字色乾脆挑到跟背景色系太相近。
hero banner 又比一般排版更容易踩雷，因為背景通常是一張有明有暗、有紋理的照片，不是單一底色。同一行字橫跨過去，左半段可能剛好落在天空的亮部，對比還過得去；右半段卻正好蓋在雲朵或人臉上，瞬間淹沒不見。整張照片的「平均色」看起來安全，實際上局部早就破功。
Nielsen Norman Group 的一篇分析把這件事拆成兩個常被混用的詞：legibility 是「辨得出這是什麼字」，readability 是「讀得懂這段話在說什麼」。對比一旦不足，兩者會一起垮，讀者不只認不出字型，連整句話在說什麼都要猜——問題不是感覺對不對，而是有沒有一個可以拿來檢查的數字。
文字對比要到多少，才算讀得清楚？
看得清楚不清楚，不必只靠感覺猜。W3C 制定的無障礙網頁內容指南 WCAG 2.1，在編號 1.4.3 的成功準則裡，針對「文字與背景的對比」訂出具體門檻，把 hero banner 可讀性 這件事從主觀感受變成可以檢查的數字。對比度是一個介於 1:1 到 21:1 之間的比值，數字愈大代表反差愈明顯，愈容易辨識。
W3C 的官方文件裡，更直接把「用照片當文字底色」點名為容易失敗的高風險情境，因為照片的顏色會隨畫面位置變化，很難像純色底那樣一次調到位。
一般文字門檻 4.5:1，大字級可以放寬到 3:1
門檻分兩種字級。一般內文字，小於 18 點或粗體小於 14 點，對比至少要達到 4.5:1；字級夠大夠粗的標題文字，達到 18 點以上、或 14 點以上的粗體，門檻可以放寬到 3:1，因為字越大、筆畫越粗，即使對比稍低也還能辨認。
4.5:1 這個數字不是隨便訂出來的。W3C 的說明文件回推，這個比值是為了讓視力大約落在 20/40（相當於多數 80 歲長者的平均視力水準）的使用者，也能舒服讀完一整段文字所需要的最低對比。
背景是照片而不是純色，這裡最容易讓對比不足
純色底只要挑對一次顏色，對比就一次到位；照片型背景卻是一張連續變化的畫面。同一行字橫跨過去，左邊可能踩在天空的亮部，右邊卻踩進陰影裡，只看「整張照片的平均色」去挑文字色，很容易在暗部或亮部破功，而這正是 WCAG 官方文件明確列為失敗案例的情境。
門檻有了，接下來要處理的是怎麼讓一張本來忽亮忽暗的照片，也能穩穩守住這個數字。
作法一：遮罩與漸層，先把嘈雜背景壓暗
把照片和文字之間加一層半透明色層，是業界最常見、也最省工的第一招，設計圈把它叫 overlay 或 scrim，用意是先把背景的複雜度壓下去，讓文字自然浮出來。
遮罩的顏色要跟著照片的明暗走，不是每次都套黑色。亮色調的照片適合搭深色遮罩、淺色文字；暗色調的照片則可以反過來，用淺色遮罩襯托深色文字。Google 的 Material Design 設計規範就把這個做法明確寫進「使用 scrim 保護文字」的原則裡，實際做法有兩種強度，力道不同，分開來看。
整張照片蓋一層半透明黑，最直接也最保險
這招適合背景本身很花、找不到任何乾淨角落的照片，犧牲一點照片的鮮豔度，換全篇一致的高對比。壓的力道抓一個平衡點就好，大概落在三成到五成之間，依照片複雜度調整，不必死守一個固定數字，壓到照片完全看不出內容反而本末倒置。
CSS-Tricks 分析這個做法時提到，實作上用 CSS 的 linear-gradient 疊加一層純色最直接，而不是用漸層色去疊，這樣顏色的深淺才好控制。
只在文字周圍做局部漸層，照片保留更多細節
只在文字所在的區塊做局部漸層，是另一種強度更輕的做法。例如只針對底部三分之一，做一道由深到透明的漸層，讓照片其餘部分維持原本的色彩與細節，只有文字背後那一小塊被壓暗。這是目前多數精緻網站首頁常用的做法。
Google 的 Material Design 設計規範也特別提醒，針對特定區域做文字保護就好，不要整張圖都蓋上遮罩，那樣反而會犧牲掉照片原本該有的存在感。
作法二：陰影與描邊，讓文字自己跳出背景
幫文字加上陰影（text shadow）或描邊（outline，也叫 halo），是另一個不用動到照片本身的解法，做法是讓字的邊緣多一圈跟背景反差夠大的顏色，視覺上就會被「框」出來。
這招在背景明暗變化劇烈、遮罩會犧牲太多照片細節的情況下特別好用。Nielsen Norman Group 的分析裡，把文字陰影跟描邊並列成同一組解法：陰影是讓字的邊緣多一層深色暈開，描邊則是直接沿著筆畫外框加一圈顏色，兩種做法都能讓字本身跟任何背景都保有基本對比。W3C 的技術文件 G18，也把「在文字周圍加窄邊框或光暈」列為維持對比的合法做法之一。
要注意的是，這招通常跟遮罩合併使用，不是二選一，先壓暗背景、再加一點陰影，對比才會夠穩。
作法三：把照片調暗、加一點模糊，不跟文字搶戲
如果不想只處理文字，也可以反過來調整照片本身，整體調降曝光，或針對文字要疊上去的那塊區域做局部模糊，讓那一小塊顏色變得更均勻、少了銳利的邊緣線，文字自然更容易被讀出來。
Nielsen Norman Group 的分析裡，把「調暗」跟「模糊」列為同一組手法，兩者的原理相同，都是讓文字底下的背景失去細節、變成一片相對平滑的色塊。Smashing Magazine 的技術文章也提到，這種模糊處理常搭配大膽的粗體字使用，字越粗，越能撐住模糊後的畫面。這招會改變照片的質感與品牌調性，取捨要想清楚，不是每張照片都適合這樣處理。
作法四：找照片裡本來就乾淨的角落，放文字最省事
前面幾招都是照片選定之後的事後補救，這一招從源頭解決。挑照片，或請攝影師拍攝時，就刻意留一塊天空、牆面、水面這種色彩單純的區域，攝影術語叫 copy space，文字直接放進那一塊，完全不用加任何遮罩或陰影，還能保留照片最完整的質感。
Smashing Magazine 的技術文章把這一招放在整套解法的前段，理由是選圖或裁圖階段就先規劃好文字要放的位置，比排版時才發現整張照片找不到乾淨角落要省事得多。這招最考驗前期選圖的眼光，但只要選對，效果通常是幾招裡最自然的一種。
作法五：加一個文字框或色塊，直接墊高對比
前面幾招都不夠力，或照片真的找不出任何乾淨角落時，最保險的做法是幫文字加一塊實色或半透明色塊當底，設計圈把這種做法叫 text-in-a-box，色塊跟文字之間的對比完全自己控制，不再受照片牽制。
CSS-Tricks 與 Smashing Magazine 都把這一招留在整套解法的後段，因為代價也很明顯，視覺上會比前面幾招多「隔」一層，質感通常不如遮罩或陰影細膩，比較適合當最後手段，而不是首選。換來的好處是對比穩定達標，不用擔心哪張照片踩雷。
手機版的 Banner，安全區跟字級要重新算一次
前面幾招在桌機螢幕上調好，換到手機不一定還成立。手機版的 banner 通常會把照片兩側裁掉，原本規劃好的乾淨角落可能整塊被裁到畫面外；字級也要跟著螢幕寬度重新縮放，不是把桌機版的字級直接等比縮小就好，太靠邊緣的文字更容易被裁到只剩一半。
常見的情況是，桌機版選好的 copy space 落在照片最左側，手機版直接裁切成正方形或直式比例，那塊留白跟著消失，文字只好硬疊回人物或建築上，對比整個破功。文字的安全區也要抓出來，離照片邊緣留一段距離，不要貼齊裁切線。
前面提到的對比門檻，一般文字 4.5:1、大字級 3:1，在手機螢幕上一樣適用，不會因為螢幕變小就放寬標準。可讀性要在桌機版跟手機版分開檢查，不能只測一種螢幕就算過關。
上線前，用對比度工具驗證，不要只靠肉眼判斷
不管桌機版或手機版，肉眼在螢幕亮度好、眼睛還不累的時候，都很容易高估對比度。正式上線前，應該換一套對比度檢查工具實測，而不是憑感覺點頭。Nielsen Norman Group 的分析裡就建議，用像 TPGi 的 Colour Contrast Analyser 這類色彩對比檢測工具，直接在畫面上取樣文字跟背景的實際顏色，確認遮罩或陰影是不是真的把對比壓到門檻以上。W3C 在 WCAG 1.4.3 的說明文件裡，也把類似的對比度檢測工具列進官方建議的相關資源。
要測就測「最極端」的那張照片，而不是看起來最順眼的那張。banner 如果有多張輪播圖，每一張都要各自過關，不能因為第一張測過就假設其他張也沒問題。有條件的話，深色模式或不同裝置的螢幕亮度也建議抽測一輪，畢竟訪客不會都用同一支手機、同一個亮度在看你的首頁。
回到一開始那位站在雜亂背景牆前的講者。換一面乾淨的背景，或是打一盞聚光燈把人從背景裡「挑」出來，殊途同歸，目的都是讓觀眾看得見、聽得懂。hero banner 的文字疊在照片上也是同一件事，選哪一招不重要，重要的是最後測出來的對比數字有沒有真的過關。
hero banner 可讀性從來不是設計完成後才檢查的最後一關，而是從挑照片、下標語的那一刻，就該一起放進考慮的事。