色彩對比分析程式 1.0 (中文)

本頁導覽:

這是甚麼?
用途
使用方法
便捷鍵
聲明
下載
關於

色彩對比分析程式是甚麼東西?

這套軟體能夠一併檢測前景色及背景色, 看看它們是否提供了良好的色彩可見性. 判斷 "色彩可見性" 的方法, 是根據 World Wide Web Consortium (W3C) 所建議的演算法來做的:

"如果兩個顏色的亮度差異以及色彩差異都大於某個程度的話, 這兩個顏色就被視為能提供良好的色彩可見性." 由 W3C 所建議的亮度差異應大於 125, 而色彩差異則應大於 500. 註: Hewlett Packard (HP) 也提供了一套線上的色彩對比驗證工具, 這套工具用的也是 W3C 的演算法, 但是他們所使用的色彩差異底限則是大於 400 即可; 這麼一來, 前景色跟背景色搭配的可接受範圍就變大了.

色彩亮度公式

色彩亮度係以下列公式計算所得:
((紅色值 X 299) + (綠色值 X 587) + (藍色值 X 114)) / 1000 背景色亮度與前景色亮度的差異應大於 125.
註: 這個演算法係由轉換 RGB 值為 YIQ 值的公式中所取得. 這個亮度值得出了色彩的知覺亮度.

色彩差異公式

色彩差異係以下列公式計算所得:
((紅色值 1, 紅色值 2) 的最大值 - (紅色值 1, 紅色值 2) 的最小值 ) + ((綠色值 1, 綠色值 2) 的最大值 - (綠色值 1, 綠色值 2) 的最小值 ) + ((藍色值 1, 藍色值 2) 的最大值 - (藍色值 1, 藍色值 2) 的最小值 ) 背景色與前景色的色彩差異應大於 500.

回到頁頂

用途

這個色彩對比分析程式 (CCA) 對於協助判斷網頁文字的易讀性, 以及圖片裏的文字的易讀性來說, 特別好用.

評估是否符合網站內容親和力指導原則 1.0 中的檢查要點 2.2

WCAG 1.0 中的檢查要點 2.2 要求

"前景色與背景色的搭配組合, 即使在色盲患者的眼中, 或在黑白螢幕裏, 都應該要能提供充足的對比."

您可以用 CCA 來檢測色彩搭配, 看看它們是否符合 W3C 所建議的演算法中, 所謂 "充足的對比".

回到頁頂

使用 CCA

使用者介面含有四個部分

選擇色彩
結果
色盲結果
選項與說明選單

1. 選擇色彩

選擇色彩控制面版分成兩個部分 (前景與背景), 每個部分都提供了三種選擇施測色彩的方法. 選擇色彩的使用者介面

下拉式選單裏的調色盤. 您可以用這個調色盤來測試並選擇適宜的色彩搭配. 底下 (較小的) 調色盤會從目前所選擇的基底色彩中, 衍生出 10 個不同明暗程度的色彩; 基底色彩位於最左上角, 演變出多種不同的透明度. 上面那一列會模擬成在白色底色上的不同透明度, 而下面那一列則是在黑色底色上. 上面那一列的透明度值分別為 100% 不透明, 75%, 50%, 25% 和 10%; 下面那一列的第一個則從 85% 開始. 這個調色盤對於測試基底色彩較亮或較暗的色彩時很有用, 這些不同明暗的衍生色彩可能對於改善色彩搭配的可見性會有所幫助. 註: 這項功能是由色盤建立程式所啟發的.
在文字框裏 (用十六進位制) 輸入色彩值. 當您想直接測試某個 Hex 值的色彩時會很有用.
使用放大色彩取樣器, 從網頁 (或螢幕上任何地方) 取樣以得到色彩.
當您想要快速取樣, 檢查並取得色彩的 hex 值時會很有用. 一旦色彩取樣按鈕被按下後, 在滑鼠游標周圍就會出現一塊放大顯示的區域; 滑鼠游標尖端所指的色彩, 將匯出現在調色盤選擇區
一旦以色彩取樣器選取色彩 (按一下滑鼠左鍵, 或者按一下鍵盤上的 'Enter' 鍵) 後, 其 hex 值就會出現在 'hex 值' 的文字盒中, 而且結果部分也會馬上更新, 以反映目前色彩搭配的亮度差跟色彩差.
註: 如果要精細控制游標的話, 也可以用鍵盤上的方向鍵.

2. 結果

結果的部分又分成摘要結果及詳盡結果. '摘要結果' 會指出亮度差異及色彩差異的數值. 如果兩個項目都通過檢測的話, 就會出現一個綠色勾勾; 如果有任何一項檢測沒有通過的話, 就會出現一個紅色叉叉. '詳盡結果' 會顯示出每一個檢查中所得的數值, 該檢測項目的篩選標準, 以及目前的對比情況是否足夠.
註: 摘要結果及詳盡結果中的文字都可以加以選取並複製. 對比分析程式的結果部分

3. 色盲結果

如果您核選了 '顯示色盲患者眼中的對比結果' 核選框的話, 就會顯示出 '正常視覺' 以及三種色盲 (紅色盲, 綠色盲, 藍黃色盲) 的摘要結果顯示色盲結果註:針對三種色盲, 判斷色值轉換的方法係根據 Hans Brettel, Francoise Vienot 以及 John Mollon 刊登於 Journal of the Optical Society of America V14, #10 pp2647 的論文中所提出的演算法.特別感謝 Vischeck 的人大方地讓我們能直接取得他們實做 Brettel 演算法的程式源碼.

4. 選項與說明選單

從選單裏選擇 '永遠置於最上層' 的話, 就會讓 CCA 視窗保持在所有其他視窗之上. 從選單裏選擇 '字體' 的話, 則會開啟一個對話盒, 讓您變更用於 CCA 的文字標籤及內容的字體.
註: 選擇某些字體或尺寸時, 可能會截斷文字內容. 選項選單

從選單裏選擇 '說明' 的話, 說明選單就會在瀏覽器視窗中開啟 CCA 的文件網頁.註: 您得先連上網際網路, 纔能看到這份文件.

回到頁頂

使用鍵盤操作

色彩對比分析程式便捷鍵
功能	按鍵
開啟前景調色盤	F9
開啟背景調色盤	F10
在調色盤中移動	方向鍵或跳位 (tab) 鍵
啟用前景色彩取樣器	F11
啟用背景色彩取樣器	F12
移動色彩取樣器	方向鍵
在取樣器或調色盤中選取色彩	Enter

使用注意事項之聲明:

本色彩對比分析程式係免費軟體.

當您取用本色彩對比分析程式時, 即表示您已閱讀過, 理解並同意隨附於本色彩對比分析程式之使用聲明.

THIS SOFTWARE IS BEING PROVIDED "AS IS", WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, THE NATIONAL INFORMATION AND LIBRARY SERVICE (NILS) DOES NOT MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, NILS DOES NOT GUARANTEE THAT USE OF THIS SOFTWARE WILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.

本著作係以創意公用授權條款授權公眾使用.