29
Determine colour visibility
Posted by Han Solo | Posted in Design Force | Posted on 29-11-2008
色彩對比分析: 如果兩個顏色的明亮度差異以及色彩差異都大於某個程度的話，這兩個顏色就被視為能提供良好的色彩可見性。 Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range.
根據全球資訊網協會 World Wide Web Consortium (W3C) 所建議的演算法
色彩明亮度公式計算
-
Colour brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour.((紅色值 X 299) + (綠色值 X 587) + (藍色值 X 114)) / 1000 背景色明亮度與前景色明亮度的差異應大於 125.
註: 這個演算法係由轉換 RGB (Red Green Blue) 值為 YIQ (Y=Luminance. I=Red-Y, Q=Blue-Y) 值的公式中所取得. 這個明亮度值得出色彩的知覺明度.
色彩差異公式計算
-
Colour difference is determined by the following formula:
(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))
((紅色值 1, 紅色值 2) 的最大值 – (紅色值 1, 紅色值 2) 的最小值 ) + ((綠色值 1, 綠色值 2) 的最大值 – (綠色值 1, 綠色值 2) 的最小值 ) + ((藍色值 1, 藍色值 2) 的最大值 – (藍色值 1, 藍色值 2) 的最小值 ) 背景色與前景色的色彩差異應大於 500.
The rage for colour brightness difference is 125. The range for colour difference is 500.
由 W3C 所建議的亮度差異應大於 125, 而色彩差異則應大於 500.
CSS Evaluation:
-
* Elements:
o BODY bgcolor | text | alink | link | vlink | background =anything OR
o TABLE bordercolor | bgcolor =anything OR
o TD | TH bgcolor =anything OR
o HR color =anything OR
o any_element style=”any_color_specification”
o STYLE “any_color_specification”… STYLE
o Where any_color_specification is defined as any CSS specification which contains:
color | background-color | background-image | background
* Requirement: Determine color visibility.
