色彩對比

在開發網站經驗中,我們有時候希望能讓使用者能夠擁有更多的控制權,如讓使用者自行修改網站的背景顏色或字體顏色,若您遇到的使用者是熟悉網站顏色搭配的則通常不會有太大的問題,但當你遇到不太會配色的使用者時,配出來的字體顏色與背景顏色太接近,造成網站的可讀性降低,不只流失了拜訪者,也讓你的網站整體美感變得不好。

若你的會員有上千個,我們總不可能逐個頁面去檢查配色吧? 這個時候就需要一個"色彩對比分析演算法" 來解決這個問題。

對顏色熟悉的朋友都知道在RGB顏色模式中, R代表RED, G代表GREEN, B代表BLUE,若以rgb(x,y,z) 作為顏色產生的含數來看,x,y,z 的值必須介於0-255之間。紅色代表rgb(255,0,0), 綠色代表(0,255,0),…以此類推。

假設使用者輸入了兩種顏色,你想要知道這兩個顏色的配色是否恰當,根據W3C的建議,我們可以使用以下演算法

我們主要透過兩個指標來判斷,分別是:亮度差異色彩差異

W3C 所建議的亮度差異應大於 125, 而色彩差異則應大於 500(也有人建議400)。若兩色比對的結果小於這些指標則表示不符合。

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

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

 

參考資料:

1. 親和資訊解決方案 http://ais.z6i.org/web/resources/contrast_analyser/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
以上標籤會影響IE8的一些HTML性質,
如CSS中的 position:fixed;
若沒有插入上述的標籤則會造成IE無法使用position:fixed;
但這個性質在FireFox是沒有影響的.
注意:
不能在header上方插入任何的註解, 否則就會完全不能使用.

<!– #include virtual="inc/IZClsPage.asp" –>
<!– #include virtual="inc/pageclass.asp"–>
<!– #include virtual="webclass.asp"–>
<!–  test –>
<!– #include virtual="inc/headerv6.asp"–>
<!–  test –






如上所示, <!– test –> 會造成問題, 我就被這個問題搞的我兩天沒睡, 最後終於被我DEBUG出來! = =+

從此以後我一定會記得,不要在檔頭插入任何的註解….

Posted in CSS.

很多時候由於瀏覽器版本的問題而造成諸多不便,如果我們要針對不同的瀏覽器做CSS設計,可以用以下的方法:

只針對 IE 系列的瀏覽器

只針對非 IE 系列的瀏覽器

只針對 IE-7 的瀏覽器

只針對 IE-6 的瀏覽器

只針對 IE-5 的瀏覽器

只針對 IE-5.5 的瀏覽器

只針對 IE-6 以下的瀏覽器

若是要在CSS針對不同版本的IE做設計則方式如下:

只針對 IE-7:

html #div {
*height: 300px;
}

只針對 IE-6:

#div {
_height: 300px;
}

不要影響到 IE 6 以下的版本:

#div {
height/**/: 300px;
}

不要影響到 IE 6 以下的版本(方法二)

html > body #div {
height: 300px;
}

參考資料:
1. how-to-create-an-ie-only-stylesheet
2. ie-css-bugs-thatll-get-you-every-time/

#bottombar {
background-color: #efefec;
position: fixed; !important;
width: 100%;
bottom: 0;
z-index: 5;
height: 34px;
border: 1px solid #999999;
background-repeat:repeat-x;
color:#FFFFFF;
_position:absolute;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}
Posted in CSS.

很多時候我們需要做出同一頁面有二到三個欄位的排版, 除了使用table劃分外, 另外一種常見的方式是使用float: left, 將div 定義為float:left可以使division之間會自動向左靠, 若因大小限制而擠不進, div會自動移到下一行, 所以您只要定義好div之間的大小就可以達成column-column的排版. 然而, 在IE與FF實作時會發現有些不同點.

IE:

<div id="parent"> <!– parent 不需定義大小, child1, child2 會自動插到parent裡面 –>

<div id="child1″>  <!– float: left –>

<div id="child2″> <!– float: left –>

</div>

FF:

<div id="parent">
<!– parent 一定要定義大小(width="400px"), child1, child2 才會插到parent裡面, 否則height的呈現是會出現問題的 –>

<div id="child1″>  <!– float: left –>

<div id="child2″> <!– float: left –>

</div>

Posted in CSS.