共通設計理論教材 / Class LLL

色彩、形狀與文字冗餘

拿掉一種線索，狀態還能說清楚嗎

同三筆狀態資料比較只用顏色與加入形狀、文字，再逐項移除線索。分清可見的替代線索、輔助科技名稱與完整資料；形狀不是放上去就能保證所有尺寸與情境都可辨。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 9 分鐘

開啟互動教材查看參考來源

閱讀目標

找出只靠顏色承擔的資訊
分別比較形狀與可見文字
把符號約定與尺寸條件說清楚

適用條件與學習範圍

若讀者分不清三個色票，還能從樣本本身知道哪一項已確認、待補充或需修正嗎？

能分清色相、明暗與面積；可先補讀唯一色彩屬性教材。

能對同一原創清單做一次單變因線索比較，指出哪些可見資訊仍在，並用同灰或縮小符號反例限制結論。

這是移除線索的設計活動，不是色覺缺陷濾鏡或醫療檢測。形狀對應只在本例約定，不保證跨文化理解或真人辨識；視覺冗餘與程式語義需分別檢查。

原理與判斷

紅、黃、綠可以吸引注意，卻不會自動把三個狀態告訴每個人。有人難以區分某些顏色，也有人在不同顯示條件下只能看到有限色彩；如果只有色相不同，必要資訊便依賴那一條線索。教具把同三筆校樣資料放在左右兩個視窗。A視覺只用色彩，B可保留形狀及狀態文字；先一次只改一項，記錄哪個訊息消失。完整原始資料不會被拿走，因此不需靠猜測或限時作答換取解釋。

冗餘是同一資訊有其他可見入口

WCAG2.2 §1.4.1為A級，處理不能只用顏色作視覺傳訊。它不是禁止用色彩，而是要求資訊、動作或區分不完全依賴色彩。教具B把狀態對應到形狀及直接文字，A則刻意保留只色彩的視覺比較。移除B狀態文字，形狀仍有差異；還原後只移除形狀，文字仍直接說出意思。這兩種改動責任不同，不能一次全改完便把結果都歸給「好配色」。

形狀需要清楚的對應與尺寸

本例約定圓形表示已確認、菱形表示待補充、三角形表示需修正。這些對應由同一原始資料表說明，不把圓形或三角形當所有文化、工具與場合都固定的意思。形狀在24px與12px都由真正SVG幾何畫出，切尺寸不改狀態資料、字級與色票。縮小後要重新看輪廓能否分清；多加一種形狀並不保證在任何輸出尺寸、線寬或觀看距離都有效。這裡沒有真人辨識率數據。

可見文字與可及名稱不是互相替代

只把狀態藏在輔助科技名稱裡，仍沒有替看得到畫面卻分不清顏色的人補上可見線索。Understanding Use of 顏色明確分開可見替代與輔助科技資訊；兩者各有需要。本例比較樣本即使移除可見狀態文字，仍保留輔助科技文字與下方完整資料表。這讓教材不需讀者猜題，卻不代表A樣本本身已變成可見冗餘。描述觀察時應說「A只有色彩，下方另有原始資料」，而非只因DOM裡有字便宣稱視覺問題消失。

反例：同灰、無文字與相同圓形

關閉色彩時，B三個符號都改同一灰色，不是使用某種色盲演算法。若再移除形狀與文字，三個灰圓即使和底色有足夠對比，也無法從相同記號區分三種狀態。重新加入文字可直接說狀態，加入形狀則仍要知道本例約定。這個反例把「看得見一個符號」與「知道符號代表什麼」分開，也說明只看對比值不足以判斷資訊已完整。

把活動帶回真正任務

先問需要區分哪一種狀態，再安排顏色、形狀、文字及結構。若內容本身是錯誤或過時的，增加線索只會更明確地重複錯誤；換成緊急通知、資料圖或表單時，也需重新判斷必要文字與約定。網站的看過／自行理解仍由原流程保存，沒有根據你是否分清色票自動評分或插旗。這是原創設計比較，不是色覺、認知或醫療能力檢測。

步驟與觀察

確認同一原始資料
重設，讀完整清單與三種形狀約定。左右資料與順序相同；A只色彩，B加入另外兩種可見線索。
一次移除一種線索
只移除B狀態文字，記錄仍能從哪裡知道意思；還原後只移除形狀，再比較文字的責任。
用同灰與12px限制結論
移除色彩，確認不是醫療模擬；再分別移除其他線索。還原後只縮小符號到12px，對比值不變仍需看輪廓。
補讀對比並返回
沿對比教材看相鄰色條件；返回／重載保留本頁線索，本頁重設不影響另一頁方案。

常見問題

輔助科技名稱有狀態就代表不只靠顏色

另查可見替代線索；看得到畫面但分不清色相的人，未必使用輔助科技。

三種形狀必然人人理解

提供可查約定或直接文字，再在實際尺寸與任務中檢查，不能假設跨文化固定。

把移除色彩當色盲模擬或測驗

本活動只把三色改同灰；不模擬特定色覺機制、不診斷或給能力分數。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：跨工具的色彩冗餘、指定sRGB色對與狀態辨識；原創三筆校樣清單，不是設計軟體操作。來源狀態：實讀WCAG2.2固定2024-12-12 W3C Recommendation §1.4.1、1.4.3、1.4.11及contrast ratio／relative luminance／large scale定義；Understanding Use of 顏色、對比最小與Non-text 對比的用途、條件、相鄰色與門檻解說。Understanding是非規範解說，不把範例技術當唯一強制做法。S20只支援無強制位移的替代呈現界線，詳細動態教材引用唯一頁。示意限制：重用QZ23原創雙座校樣架。三筆狀態、順序與底色同源；A視覺只色彩，B可分別切色彩、幾何、原生文字，另白／深背景、同灰／淡色與12／24px反例。完整資料表一直可選取。WCAG讀數與實際樣本使用相同全不透明sRGB色碼，解碼後加權，不用HSL L或編碼RGB灰值代替。原生軟體實測：僅網站Chromium的HTML／SVG／computed style、本地字型及公開操作檢查；不是Ps／Ai／Figma像素、ICC／CMYK、校準螢幕或多瀏覽器全站稽核。學習成效驗證：沒有色覺模擬或醫療診斷、眼動、真人辨認率／可用性或學習成效實驗；符合單一色對條件不構成全站WCAG認證。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。